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.
Pre request for node server
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
Setup your index.js file
In the index.js file, we are using WsController for handle socket functions.
In webconsle.js file, we need to config SSH detail.
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.
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.
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.
For client-side we are using react.js.
$ create-react-app ssh-terminal-app
$ cd ssh-terminal-app
$ npm install --save websocket
Once installation sets completed then move to the code.
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
Add above styles in your index.css for terminal view.
Thank you for reading. Have a nice day!
SSH2 with Promises. Contribute to steelbrain/node-ssh development by creating an account on GitHub.