WebSSH的简单实现

因为web的便利性，很多传统功能都有了web端的实现，WebSSH就是其中之一，我是第一次接触，所以来记录一下使用。

WebSSH支持终端交互，主要可以分为两部分，第一是页面输入命令行并传递给远程终端，第二是展示命令执行结果，这两部分现在都已经有具体实现的库了，所以我们只需要把它们组合起来。

在具体实现之前，需要先准备一个远程终端，我这里用的是VMware创建的虚拟机

可以在Mac的终端直接登录

接下来我们就来看代码的实现，前端页面使用三方库xtermjs实现终端界面，远程连接使用nodejs的ssh2模块。

前端实现

我们先来看web端的实现。

前端代码主要做三件事，第一初始化终端对象terminal，第二增加监听事件监听用户的输入，第三建立web socket连接实现实时交互。我这里用react项目做简单的演示。

先在页面上准备一个div，模拟终端背景。

import React, {useEffect, useRef, useState} from 'react'; import { Terminal } from 'xterm';  import 'xterm/css/xterm.css';  const FontSize = 14; const Col = 80;  const WebTerminal = () => {   const terminalRef = useRef(null);   const webTerminal = useRef(null);   const ws = useRef(null);    useEffect(() => {     const ele = terminalRef.current;     if (ele) {      }    }, [terminalRef.current]);    return <div ref={terminalRef}  style={{ backgroundColor: '#000', width: '100vw', height: '100vh' }}/>; };  export default WebTerminal; 

然后我们对终端进行初始化。

import React, {useEffect, useRef, useState} from 'react'; import { Terminal } from 'xterm';  import 'xterm/css/xterm.css';  const FontSize = 14; const Col = 80;  const WebTerminal = () => {   const terminalRef = useRef(null);   const webTerminal = useRef(null);   const ws = useRef(null);    useEffect(() => {     const ele = terminalRef.current;     if (ele && !webTerminal.current) {       const height = ele.clientHeight; // +       const terminal = new Terminal({ // +         cursorBlink: true, // +         cols: Col, // +         rows: Math.ceil(height / FontSize), // +       }); // +  			// +       terminal.open(ele); // +       // +       webTerminal.current = terminal; // +            }    }, [terminalRef.current]);    return <div ref={terminalRef}  style={{ backgroundColor: '#000', width: '100vw', height: '100vh' }}/>; };  export default WebTerminal;  

这个时候可以看到页面上出现了一个闪烁的光标，就像input输入框被聚焦时候的状态，cols属性指定了一行可以输入的字符数，rows指定了展示的行数，这里做了一个简单的取整的计算。这个时候还不能输入内容，因为还没加上事件监听，那么现在我们给它加上。

import React, {useEffect, useRef, useState} from 'react'; import { Terminal } from 'xterm';  import 'xterm/css/xterm.css';  const FontSize = 14; const Col = 80;  const WebTerminal = () => {   const terminalRef = useRef(null);   const webTerminal = useRef(null);   const ws = useRef(null);    useEffect(() => {     const ele = terminalRef.current;     if (ele && !webTerminal.current) {       const height = ele.clientHeight;       const terminal = new Terminal({         cursorBlink: true,         cols: Col,         rows: Math.ceil(height / FontSize),       });        terminal.open(ele);              webTerminal.current = terminal;        terminal.onData((val) => { // 键盘输入 // +         if (val === 'x03') { // +           // nothig todo // +         } else { // +           terminal.write(val); // +         } // +       }); // +     }    }, [terminalRef.current]);    return <div ref={terminalRef}  style={{ backgroundColor: '#000', width: '100vw', height: '100vh' }}/>; };  export default WebTerminal;  

这里我们利用terminal对象的onData方法对用户输入进行监听，然后调用terminal的write方法将内容输出到页面上，这里因为x03代表了Ctrl+C的组合键，所以把它做了过滤。这个时候你可能会发现一个问题，就是我们点击回退键删除内容的时候，控制台会出现报错，这是因为编码的问题，onData返回的是utf16/ucs2编码的内容，需要转换为utf8编码，这个后面我们交给node端去处理。

最后我们来实现web socket的实时交互，这块因为需要建立web socket链接，需要web和node一起配合实现。

Webscoket实现

我们先写node端的代码。

const express = require('express'); const app = express(); const expressWs = require('express-ws')(app);  import { createNewServer } from './utils/createNewServer';   app.get('/', function (req: any, res: any, next: any) {   res.end(); });  app.ws('/', function (ws: any, req: any) {   createNewServer({     host: '172.16.215.129',     username: 'root',     password: '123456'   }, ws); });  app.listen(3001) 

这里我们使用express-ws模块来实现socket通信，监听3001端口，接下来我们主要看createNewServer方法的实现。

首先引入ssh2模块，构造一个ssh客户端，并与远程主机、也就是我前面创建的虚拟机建立连接。

const SSHClient = require('ssh2').Client; const utf8 = require('utf8');  const termCols = 80; const termRows = 30;  export const createNewServer = (machineConfig: any, socket: any) => {   const ssh = new SSHClient(); // +   const { host, username, password } = machineConfig; // +    // +   ssh.connect({ // +     port: 22, // +     host, // +     username, // +     password, // +   }).on('ready', function() { // +     console.log('ssh连接已建立'); // +   }) // + } 

这里端口22是SSH提供远程连接服务的默认端口，当ssh连接建立成功后，就会打印出”ssh连接已建立“。现在我们到web端去创建web socket连接来查看效果。

import React, {useEffect, useRef, useState} from 'react'; import { Terminal } from 'xterm';  import 'xterm/css/xterm.css';  const FontSize = 14; const Col = 80;  const WebTerminal = () => {   const terminalRef = useRef(null);   const webTerminal = useRef(null);   const ws = useRef(null);    useEffect(() => {     const ele = terminalRef.current;     if (ele && !webTerminal.current) {       const height = ele.clientHeight;       const terminal = new Terminal({         cursorBlink: true,         cols: Col,         rows: Math.ceil(height / FontSize),       });        terminal.open(ele);              webTerminal.current = terminal;        terminal.onData((val) => { // 键盘输入         if (val === 'x03') {           // nothig todo         } else {           terminal.write(val);         }       });        const socket = new WebSocket(`ws://127.0.0.1:3001`); // +       socket.onopen = () => { // +         socket.send('connect success'); // +       }; // +       ws.current = socket; // +     }    }, [terminalRef.current]);    return <div ref={terminalRef}  style={{ backgroundColor: '#000', width: '100vw', height: '100vh' }}/>; };  export default WebTerminal; 

这个时候我们去刷新页面，就可以看到nodejs的控制台打印出了”ssh连接已建立“这句话。

与远程主机建立连接后，我们就可以使用ssh2客户端的shell方法，与主机终端开启交互。

const SSHClient = require('ssh2').Client; const utf8 = require('utf8');  const termCols = 80; const termRows = 30;  export const createNewServer = (machineConfig: any, socket: any) => {   const ssh = new SSHClient();   const { host, username, password } = machineConfig;    ssh.connect({     port: 22,     host,     username,     password,   }).on('ready', function() {     console.log('ssh连接已建立');      ssh.shell({ // +       cols: termCols, // +       rows: termRows, // +     }, function(err: any, stream: any) { // +       if (err) { // +         return socket.send('rn*** SSH SHELL ERROR: ' + err.message + ' ***rn');       } // +       console.log('开启交互'); // +     }); // +   }) } 

此时nodejs的控制台就打印出了”开启交互“这句话，stream用于控制终端的输入输出。现在我们需要在web和nodejs两端都加上对消息的监听和发送，这样才能开始真正的交互，我们就接着先写node端的监听和发送。

在node端接收到socket消息后，用on-message对前端传递过来的内容进行编码转换处理，并转换为原始字节流写入终端。

const SSHClient = require('ssh2').Client; const utf8 = require('utf8');  const termCols = 80; const termRows = 30;  export const createNewServer = (machineConfig: any, socket: any) => {   const ssh = new SSHClient();   const { host, username, password } = machineConfig;    ssh.connect({     port: 22,     host,     username,     password,   }).on('ready', function() {     console.log('ssh连接已建立');      ssh.shell({       cols: termCols,       rows: termRows,     }, function(err: any, stream: any) {       if (err) {         return socket.send('rn*** SSH SHELL ERROR: ' + err.message + ' ***rn');       }       console.log('开启交互');       socket.on('message', function (data: any) { // +         stream.write(Buffer.from(data, 'utf8')); // +       }); // +       // +       stream.on('data', function (d: Buffer) { // +         socket.send(d.toString('binary')); // +       }); // +     });   }) } 

同时监听终端的输出，对前端输入的内容进行处理，并通过socket连接返回给前端。toString binary表示保持原始字节，避免utf8解码异常。

接着我们来完成web端对socket的处理，首先把原来的用户输入显示到屏幕上改为发送socket消息。

terminal.onData((val) => { // 键盘输入   if (val === 'x03') {     // nothig todo   } else {     socket.send(val); // M   } }); 

并增加对socket消息的监听。

socket.onmessage = e => {   terminal.write(e.data); }; 

将socket返回的消息输出到页面模拟的终端容器上。

这个时候我们刷新页面看到如下图所示，就表示我们实现了最基本的交互功能。

这样就可以愉快地和远程终端开始交互了。

到这里我们还可以简单优化一下，就是socket连接断开后，如果不退出终端，会在远程主机保留很多进程，我们可以用这个命令ps -aux | grep ssh看到。

为了避免占用内存，我们可以对socket的关闭进行监听，在socket连接关闭的时候调用end方法来结束ssh连接服务。

socket.onclose = (event: any) => {   ssh.end(); } 

这样我们再去查看的时候，就会看到只剩下一个正在运行的ssh服务。

到这里我们就实现了一个简单的WebSSH的交互了。当然这个例子比较简单，类似浏览器窗口尺寸变化对输出显示的影响这里也没有处理，以及node端ssh2模块的其他功能方法也没有涉及到，感兴趣的同学们可以去查阅文档自己尝试一下。