websocket + xterm 前端实现网页版终端

简介

网页版终端就是能够在浏览器上操作服务器的终端，主要用websocket和xterm来实现。websocket负责与后端保持长连接，发送前端的请求给后端，并监听后端响应的数据。xterm是渲染前端终端的库，他负责监听用户的输入和打印服务端的输出。

安装

shell 复制代码

// 1. 安装xterm
npm i @xterm/xterm @xterm/addon-fit @xterm/addon-web-links
// 2. websocket是内置API无需安装

使用xterm

html 复制代码

<template>
  <div class="terminal-container">
    <div ref="terminalRef" class="terminal"></div>
  </div>
</template

typescript 复制代码

import {onMounted, onBeforeUnmount} from "vue";
import {Terminal} from "@xterm/xterm";
import {FitAddon} from "@xterm/addon-fit";
import {WebLinksAddon} from "@xterm/addon-web-links";

const terminal = new Terminal({
  cursorBlink: true,
  scrollback: 1000,
  rows: 30,
  cols: 100,
  theme: {
    background: '#1e1e1e',
    foreground: '#d4d4d4'
  },
});
const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
terminal.loadAddon(new WebLinksAddon());

window.addEventListener('resize', resize);

const terminalRef = ref()

onMounted(() => {
  terminal.open(terminalRef.value);
  fitAddon.fit();
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize);
})

function resize() {
  fitAddon.fit();
}

以上代码会将终端渲染到页面上，并出现跳动的光标。但是当你使用键盘输入时，会发现页面上没反应，因为它和普通的输入框不一样，并不会直接将你输入的内容显示到页面上。

我们需要用到的方法只有两个

onData 监听用户输入，用户每输入一个字符，都会触发该方法。
write 向终端写入日志

但是不要在onData里直接调用write写入日志，正常的流程为：onData监听用户输入 -> 使用websocket将输入的字符发送给后端 -> 后端将收到的字符原封不动的返回给前端 -> 前端监听到websocket消息后调用write方法写入终端。

总而言之，前端只需要做两件事，1. 把用户输入的字符传给后端。2. 把websocket监听到的消息写入终端

使用websocket监听消息

ts 复制代码

const socket = new WebSocket(url);
socket?.addEventListener('message', (event: any) => {
    try {
      const msg = JSON.parse(event.data);
      // 解析后端响应的消息，Op === 'stdout', 则为标准输出，写入终端
      if (msg.Op === 'stdout') {
        terminal.write(msg.Data);
      }
    } catch (e) {
      // 非 JSON 消息直接写入终端
      terminal.write(event.data);
    }
});

监听用户输入

ts 复制代码

terminal.onData((data: any) => {
  // stdin 为标准输入，格式化为json字符串后发送给后端
  socket.seed(JSON.stringify({"Op":"stdin","Data": data}))
})

总结

网页版终端总体流程如下

网页终端 <--> 前端脚本 <--> websocket <--> 后端服务 <--> 服务器终端

用户在网页上操作终端时，经过前端脚本、websocket、后端服务最终到服务器终端，其中前端脚本、websocket、后端服务只负责转发和通信的功能，所以这套流程就相当于用户在浏览器直接操作服务器终端。