基于 xterm + websocket + vue 实现网页版终端 terminal

使用xterm.js实现WebSocket网页终端

原创

已于 2022-06-10 09:41:43 修改 · 1.1w 阅读

49 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #vue.js #前端 #xterm #网页终端

于 2022-06-09 14:41:43 首次发布

本文档详细介绍了如何使用xterm.js库结合WebSocket协议创建一个网页终端。前端通过安装xterm.js及其相关插件，配置WebSocket连接，并设置终端参数。在后端，数据通过WebSocket双向通信，实现命令的执行和显示。注意处理删除键的特殊情况，确保前端不进行额外处理，仅将操作转发给后端。此外，提供了xterm.js的配置选项和一些关键API的使用说明。

网页版的终端,首选 xterm.js，其次是 k9s，和后端的通信采用 websocket 通信协议，这是一种可以在单个TCP连接上进行全双工通信的协议。如果需要websocket 带 token 发起连接可以参考这篇文章。
网页终端实现效果如下：
在这里插入图片描述

如果想要达到这种效果，那就跟着接下来的步骤一步步操作。

准备工作

1. 安装xterm

yarn add xterm

2. 安装xterm-addon-fit

yarn add xterm-addon-fit

xterm.js的插件，使终端的尺寸适合包含元素。

3. 安装xterm-addon-attach

yarn add xterm-addon-attach

xterm.js的附加组件，用于附加到Web Socket

前端实现

模板部分：

<template>
    <div >
        <div ref="terminal" />
    </div>
</template>

业务逻辑部分：

<script>
import 'xterm/css/xterm.css'
import {
   
    Terminal } from 'xterm'
import {
   
    FitAddon } from 'xterm-addon-fit'
import {
   
    AttachAddon } from 'xterm-addon-attach'

export default {
   
   
  name: 'terminal',
  data() {
   
   
    return {
   
   
      term: null,
      socketUri: 'ws://127.0.0.1:8088/podname',
      socket: '',
      accessToken: 'token',
    }
  },
  mounted() {
   
   
    this.initTerm();
  },
  beforeDestroy() {
   
   
    this.socket && this.socket.close();
    this.term && this.term.dispose();
  },
  methods: {
   
   
    initTerm() {
   
   
      // 1.xterm终端初始化
      const term = new Terminal({
   
   
        rendererType: "canvas", //渲染类型
        rows: 40, //行数
        cols: 100, // 不指定行数，自动回车后光标从下一行开始
        convertEol: true, //启用时，光标将设置为下一行的开头
        // scrollback: 50, //终端中的回滚量
        disableStdin: false, //是否应禁用输入
        windowsMode: true, // 根据窗口换行
        cursorStyle: "underline", //光标样式
        cursorBlink: true, //光标闪烁
        theme: {
   
   
          foreground: "#ECECEC", //字体
          background: "#000000", //背景色
          cursor: "help", //设置光标
          lineHeight: 20,
        },
      });
      // 2.webSocket初始化
      if (this.socketUri === '') return;
      this.socket = new WebSocket(

最低0.47元/天解锁文章