How to create web based terminal using xterm.js to ssh into a system on local network

After a bit of research here is working code.

Libraries:

1) https://socket.io/

This library is used for transmit package from client to server.

2) https://github.com/staltz/xstream

This library is used for terminal view.

3) https://github.com/mscdex/ssh2

This is the main library which is used for establishing a connection with your remote server.

Step 1: Install Library 3 into your project folder

Step 2: Start from node side create a server.js file for open socket

Step 3: Connection client socket to node server (both are in local machine)

The tricky logic is how to use socket and ssh2.

On emission of socket you need to trigger an SSH command using the ssh2 library. On response of the ssh2 library (from server) you need to transmit the socket package to the client. That's it.

Click here to find an example.

That example will have these files & folders:

Type    Name
------------
FILE    server.js
FILE    package.json
FOLDER  src
FOLDER  xtream

First you need to configure your server IP, user and password or cert file on server.js and just run node server.js.

P.S.: Don't forget to run npm install

Let me know if you have any questions!

After some research later I came across this service : https://tmate.io/ which does the job perfectly. Though if you need a web-based terminal of tmate you have to use their ssh servers as a reverse proxy which ideally I was not comfortable with. However, they provide tmate-server which can be used to host your own reverse proxy server but lacks web UI. But to build a system where you have to access a client behind NAT over ssh on web, below are the steps.

• Install and configure tmate-server on some cloud machine.
• Install tmate on the client side and configure to connect to a cloud machine.
• Create a nodejs application using xterm.js(easy because of WebSocket based communication) which connects to your tmate-server and pass commands to the respective client. (Beware of security issues of exposing this application, since you will be passing Linux commands ).
• Depending on your use case you might need a small wrapper around tmate client on client-side to start/stop it automatically or via some UI/manual action.

Note: I wrote a small wrapper on client-side as well to start/stop and pass on the required information to an API server (written in nodejs) which then pass on the information to another API which connects the browser to the respective client session. Since we had written this application it included authentication as well as command restrictions of what can be run on terminal. You can customize it a lot.