xterm实现单个页面多个webssh

xterm是一个使用TypeScript编写的前端终端组件。

1、demo主要介绍

本文demo主要实现一个页面可以有webssh窗口，前端部分主要利用xterm通过socket.io-client和后端通信，后端部分使用nodejs+utf8+socket.io+ssh2。

界面效果

点击界面中创建WEBSSH按钮，即可新建一个webssh窗口。为了方便验证功能，本demo中后端连接的服务器信息是写死的，可根据实际情况在前端在创建webssh调用addTerm方法时，传入服务器信息。

简要流程

2、前端实现

基于vue项目，前端主要依赖包：xterm xterm-addon-fit socket.io-client，使用前请install。

3、后端实现

前端主要依赖包：utf8 ssh2 socket.io，使用前请install。
ssh2用来实现nodejs和服务器进行连接和通信。
utf8用来实现服务器返回的命令执行结果解码。
socket.io用来实现后端和前端ws全双工通信，通过传入不同的socket-msgId来实现信息标识，就可以实现单页面多个webssh只利用一个websocket。后端使用ws这个库也可以实现同样的效果，只是使用ws库要达到这个效果，客户端会创建多个ws实例而已。

/**用来实现多个webssh功能**/
const http = require('http').Server(app);
const io = require('socket.io')(http, {cors: true});
const utf8 = require('utf8');
const SSHClient = require('ssh2').Client;

const serverInfo = {
  host: '192.168.18.141',
  port: 22,
  username: 'root',
  password: '就不告诉你'
};

function createNewServer(machineConfig, socket) {
  var ssh = new SSHClient();
  let {msgId} = machineConfig;
  ssh
    .on('ready', function () {
      socket.emit(msgId, '\r\n*** ' + serverInfo.host + ' SSH CONNECTION ESTABLISHED ***\r\n');
      // ssh设置cols和rows处理界面输入字符过长显示问题
      ssh.shell({cols: machineConfig.cols, rows: machineConfig.rows}, function (err, stream) {
        if (err) {
          return socket.emit(msgId, '\r\n*** SSH SHELL ERROR: ' + err.message + ' ***\r\n');
        }
        socket.on(msgId, function (data) {
          stream.write(data);
        });
        stream.on('data', function (d) {
          socket.emit(msgId, utf8.decode(d.toString('binary')));
        }).on('close', function () {
          ssh.end();
        });
        socket.on('resize', function socketOnResize (data) {
          stream.setWindow(data.rows, data.cols);
        });
      })
    })
    .on('close', function () {
      socket.emit(msgId, '\r\n*** SSH CONNECTION CLOSED ***\r\n');
    })
    .on('error', function (err) {
      console.log(err);
      socket.emit(msgId, '\r\n*** SSH CONNECTION ERROR: ' + err.message + ' ***\r\n');
    }).connect(serverInfo);
}

io.on('connection', function (socket) {
  socket.on('createNewServer', function (machineConfig) {
    // 新建一个ssh连接
    console.log("createNewServer")
    createNewServer(machineConfig, socket);
  })

  socket.on('disconnect', function () {
    console.log('user disconnected');
  });
})

http.listen(5000, function () {
  console.log('listening on * 5000');
});

4、遗留问题

1、浏览器resize后，webshell窗口宽高自适应、命令显示的问题；

5、友情链接

• 消息推送机制-轮询、长轮询、SSE(Server Sent Event)和WS(WebSocket)；
• webssh-xterm.js的简单使用；
• webssh2；
• socket.io 官方文档；
• socket.io中文文档-简述；
• node.js+react.js+xterm.js构建webssh；