xterm是一個使用TypeScript編寫的前端終端組件间坐。

1株扛、demo主要介紹

本文demo主要實現(xiàn)一個頁面可以有webssh窗口缨睡，前端部分主要利用xterm通過socket.io-client和后端通信搔弄，后端部分使用nodejs+utf8+socket.io+ssh2贫母。

界面效果

簡要流程

2籍铁、前端實現(xiàn)

基于vue項目，前端主要依賴包：xterm xterm-addon-fit socket.io-client趾断，使用前請install拒名。

<template>
  <div class="container">
    <p>
      <button type="button" @click="addSsh">創(chuàng)建WEBSSH</button>
      <small style="margin-left: 10px;">ws地址不變，可以創(chuàng)建多個webssh窗口芋酌，且這些窗口互不影響增显。</small>
    </p>
    <ul class="list">
      <li
        v-for="item in sshList"
        :key="item.label"
        :class="{active: sshActiveInfo.label === item.label}"
        @click="changeSsh(item)">
        {{item.label}}
      </li>
    </ul>
    <div style="flex: 1; display: flex; padding-bottom: 10px;">
      <div
        style="padding-left: 10px; padding-right: 10px;"
        v-for="item in sshList"
        :class="item.selector"
        v-show="sshActiveInfo.label === item.label">
      </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 {
      sshList: [],
      sshActiveInfo: {}
    }
  },
  methods: {
    addSsh() {
      let index = this.sshList.length + 1;
      let info = {
        label: `WEBSSH-${index}`,
        isActive: true,
        selector: `xterm-${index}`,
        term: null
      };
      this.sshList.push(info);
      this.sshActiveInfo = info;
      this.$nextTick(() => {
        this.addTerm(info);
      });
    },
    changeSsh(item) {
      this.sshActiveInfo = item;
      item.term.focus();
    },
    addTerm(item) {
      item.term = new Terminal({
        cursorBlink: true,
        // cols: 100,
        // rows: 20,
        scrollback: 50
      });
      item.fitAddon = new FitAddon();
      item.term.loadAddon(item.fitAddon);
      item.term.open(document.querySelector(`.${item.selector}`));
      item.fitAddon.fit();
      item.term.focus();

      // socket.on()方法 和 socket.emit()在前后端是成對出現(xiàn)的，通過監(jiān)聽的標(biāo)識符來顯示不同模塊的數(shù)據(jù)脐帝，就不用一個頁面利用多個ws了同云。
      // socket.emit()用于向服務(wù)端（后端）發(fā)送數(shù)據(jù), 第一個參數(shù)為監(jiān)聽的標(biāo)識
      this.socket.emit("createNewServer", {
        msgId: item.selector,
        cols: item.term.cols,
        rows: item.term.rows
      });
      // 只要有鍵入 就會觸發(fā)該事件
      item.term.onData(data =>  {
        this.socket.emit(item.selector, data);
      });
      // socket.on()用于監(jiān)聽獲取服務(wù)端（后端）發(fā)送過來的數(shù)據(jù), 第一個參數(shù)為監(jiān)聽的標(biāo)識
      this.socket.on(item.selector, function (data) {
        // 用'\n'換行
        item.term.write(data);
      });
      window.addEventListener('resize', () => {
        item.fitAddon.fit()
        this.socket.emit('resize', { cols: item.term.cols, rows: item.term.rows });
      }, false);
    }
  },
  mounted() {
    this.socket = io('http://localhost:5000'); // ws://localhost:5000
  },
  beforeDestroy() {
    this.socket.close();
    this.sshList.map(item => item.term.dispose());
  }
}
</script>

<style scoped>
.list {
  padding: 0;
  margin: 0 0 15px 0;
  list-style: none;
}
.list::after {
  display: table;
  content: '';
}
.list li {
  float: left;
  margin-right: 20px;
  font-size: 14px;
  cursor: pointer;
}
.list li:hover {
  color: #60bb63;
}
.list li.active {
  color: #60bb63;
}
[class*="xterm-"] {
  flex: 1;
}
</style>

3糖权、后端實現(xiàn)

前端主要依賴包：utf8 ssh2 socket.io，使用前請install炸站。
ssh2用來實現(xiàn)nodejs和服務(wù)器進(jìn)行連接和通信星澳。
utf8用來實現(xiàn)服務(wù)器返回的命令執(zhí)行結(jié)果解碼。
socket.io用來實現(xiàn)后端和前端ws全雙工通信旱易，通過傳入不同的socket-msgId來實現(xiàn)信息標(biāo)識禁偎，就可以實現(xiàn)單頁面多個webssh只利用一個websocket。后端使用ws這個庫也可以實現(xiàn)同樣的效果咒唆，只是使用ws庫要達(dá)到這個效果届垫，客戶端會創(chuàng)建多個ws實例而已释液。

/**用來實現(xiàn)多個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設(shè)置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窗口寬高自適應(yīng)浸船、命令顯示的問題；

5寝蹈、友情鏈接

• 消息推送機(jī)制-輪詢李命、長輪詢、SSE(Server Sent Event)和WS(WebSocket)箫老；
• webssh-xterm.js的簡單使用封字；
• webssh2；
• socket.io 官方文檔耍鬓；
• socket.io中文文檔-簡述阔籽；
• node.js+react.js+xterm.js構(gòu)建webssh；