vue2 使用xterm+node实现webssh

前端使用xterm通过socket.io-client和后端通信，后端使用nodejs+utf8+socket.io+ssh2

前端代码

基于vue2项目，前端主要依赖包：xterm xterm-addon-fit socket.io-client

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" >
      <el-form-item label="连接地址" prop="host">
      <el-input v-model="queryParams.host"  autocomplete="off" />
    </el-form-item>
    <el-form-item label="用户名" prop="username">
      <el-input v-model="queryParams.username"  autocomplete="off" />
    </el-form-item>
      <el-form-item label="密码" prop="password">
      <el-input v-model="queryParams.password" type="password" autocomplete="off" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addTerm"
        >连接</el-button>
    </el-form-item>
    </el-form>
    <div style="flex: 1; display: flex; padding-bottom: 10px">
      <div
        style="padding-left: 10px; padding-right: 10px"
        class="termbox"
      ></div>
    </div>
  </div>
</template>

<script>
import "xterm/css/xterm.css";
import io from "socket.io-client";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
export default {
  name: "WebShell",
  data() {
    return {
      queryParams:{
        host:'',
        username:'',
        password:''
      },
      term:null,
      socket:null,
      fitAddon:null
    };
  },
  methods: {
    addTerm() {
        this.term=null;
        this.term = new Terminal({
        cursorBlink: true
        // cols: 100,
        // rows: 20,
        scrollback: 50,
      });
      this.fitAddon = new FitAddon();
      this.term.loadAddon(this.fitAddon);
      document.querySelector(".termbox").innerHTML=''
      this.term.open(document.querySelector(".termbox"));
      this.fitAddon.fit();
      this.term.focus();
      // socket.on()方法 和 socket.emit()在前后端是成对出现的，通过监听的标识符来显示不同模块的数据，就不用一个页面利用多个ws了。
      // socket.emit()用于向服务端（后端）发送数据, 第一个参数为监听的标识
      this.socket.emit("createNewServer", {
        msgId: "termbox",
        host: this.queryParams.host,
        username: this.queryParams.username,
        password: this.queryParams.password,
        cols: 100,
        rows: 20
      });
      // 只要有键入 就会触发该事件
      this.term.onData((data) => {
        this.socket.emit("termbox", data);
      });
      // socket.on()用于监听获取服务端（后端）发送过来的数据, 第一个参数为监听的标识
      this.socket.on("termbox", (data)=>{
        this.term.write(data)

      });
      window.addEventListener(
        "resize",
        () => {
          this.fitAddon.fit();
          this.socket.emit("resize", {
            cols: 100,
            rows: 20,
          });
        },
        false
      );
    },
  },
  mounted() {
    this.socket = io("http://localhost:5000");
  },
};
</script>

后端代码

1、先创建一个文件夹npm init 一个新项目
2、安装依赖express 、utf8、socket.io、ssh2
3、index.js里面代码如下
4、启动服务 node ./index.js

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


function createNewServer(machineConfig, socket) {
  var ssh = new SSHClient();
  let {msgId, ip, username, password} = machineConfig;
  ssh
    .on('ready', function () {
      socket.emit(msgId, '\r\n*** ' + ip + ' 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({
      host: ip,
      port: 22,
      username: username,
      password: password
  });
}

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');
});