webssh-xterm.js的简单使用

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

1、demo主要介绍

本文demo主要实现一个页面一个webssh窗口，前端部分主要利用xterm通过原生ws和后端通信，后端部分使用nodejs+utf8+ws+ssh2。

页面效果

简要流程

2、前端实现

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

3、后端实现

前端主要依赖包：utf8 ssh2 ws，使用前请install。
ssh2用来实现nodejs和服务器进行连接和通信。
utf8用来实现服务器返回的命令执行结果解码。
ws用来实现后端和前端ws全双工通信。

/**用来实现单个webssh功能**/
const utf8 = require("utf8");
const SSHClient = require("ssh2").Client;
const Server = require("ws").Server;
const wss = new Server({
  port: 2000
});

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

function createSocket(ws) {
  const ssh = new SSHClient();
  ssh
    .on("ready", function () {
      ws.send("\r\n*** SSH CONNECTION ESTABLISHED ***\r\n");
      ssh.shell(function (err, stream) {
        if (err) {
          return ws.emit("\r\n*** SSH SHELL ERROR: " + err.message + " ***\r\n");
        }
        ws.on("message", function (data) {
          stream.write(data);
        });
        ws.on("close", function () {
          console.log("close websocket。");
          ssh.end();
        });
        stream
          .on("data", function (d) {
            let data = utf8.decode(d.toString("binary"));
            ws.send(data);
          })
          .on("close", function () {
            ssh.end();
          });
      });
    })
    .on("close", function () {
      ws.close();
    })
    .on("error", function (err) {
      console.log("\r\n*** SSH CONNECTION ERROR: " + err.message + " ***\r\n");
      ws.close();
    })
    .connect(serverInfo);
}

wss.on("connection", function (ws) {
  createSocket(ws);
});

4、遗留问题

1、浏览器resize后，webshell窗口宽高自适应、命令显示的问题；
2、设置了cols或者fitAddon.fit(); 当一行字符超过80个后，会替换现在的内容问题。

5、友情链接

• 消息推送机制-轮询、长轮询、SSE(Server Sent Event)和WS(WebSocket)；
• 单页面多个webssh，处理了遗留问题2。