YavarTechWorks
Published in

YavarTechWorks

SSH web console

In this article, I will explain how to communicate with the SSH web console.

Before we go to SSH web console we should know about what is SSH.

Secure Shell (SSH) is a cryptographic network protocol for operating network services securely over an unsecured network. Typical applications include remote command-line, login, and remote command execution, but any network service can be secured with SSH. — wiki

We accomplished using different two methods. One part is server it is used node js and front-end we are using react js.

Earlier I assume we can communicate with SSH terminal using front-end but I could not. Because for security purpose from the browser it could not communicate with Shell. So we need a server, from the server we communicate with SSH.

Node Server

Pre request for node server

  1. fastify
  2. fastify-ws
  3. node-ssh

Create a node project

$ mkdir web-console
$ cd web-console
$ npm init
$ npm install --save fastify fastify-ws node-ssh
$ npm install -D nodemon

Set up your package.json

https://carbon.now.sh/

Setup your index.js file

https://carbon.now.sh/

In this fastify-ws to creating web socket. For more detail for fastify-ws click here.

In the index.js file, we are using WsController for handle socket functions.

Setup WsController.

https://carbon.now.sh/

In webconsle.js file, we need to config SSH detail.

https://carbon.now.sh/

The above code is set up ssh config. In this configuration, we set to host, username, privateKey. Using the connect method we can establish a connection.

https://carbon.now.sh/

The above code is to get the value from the socket and write in shell stream.

const shellStream = await ssh.requestShell();

After we made a connection with ssh then we called requestShell() function. This requestShell() function is a listener.

shellStream.write(data.command.trim() + "\n");

ws.on() method called whenever the user sends value from client-side. After the user receives value we parse the value because it receives the string format. And we checked the method of the value if the method is ‘command’ we write the command in shellStream.

https://carbon.now.sh/

After we write in shellStream we can receive output from the listener.

shellStream.on() method gives value when command executed successfully. And it gives data only binary format so we convert into the string format.

shellStream.stderr.on() method called whenever an error occurred in the execution of the command. Using ws.send() we send value to client.

Client-side

For client-side we are using react.js.

Installations

$ create-react-app ssh-terminal-app
$ cd ssh-terminal-app
$ npm install --save websocket

Once installation sets completed then move to the code.

https://carbon.now.sh/

Import all the things we need here and initialize web socket.

The above code we write ws.onmessage() listener for receive form value for the server. We write the listener inside the useEffect. Whenever the listener receives value from the server it updates ‘commandList’ state.

Once the user enters the value in the text box if the user press Enter key then it called onSend() function.

Inside the onSend() function user send value to server as string format. After the user sends value to the server, Server returns the output. We received value in our onmessage() listener.

Style for application

https://carbon.now.sh/

Add above styles in your index.css for terminal view.

Output

Screenshot

Thank you for reading. Have a nice day!

Source code

Server-side: https://github.com/EdisonDevadoss/node-web-console

Client-side: https://github.com/EdisonDevadoss/react-ssh-terminal

Reference

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Edison Devadoss

Edison Devadoss

Software developer / JavaScript / React / React Native / Firebase / Node.js / C Programming / Book Reader / Story Teller