基于xterm.js 实现Vue版本终端terminal

最新推荐文章于 2025-03-14 16:27:47 发布

油纸

最新推荐文章于 2025-03-14 16:27:47 发布

阅读量2.4k

点赞数

原文链接：https://www.jianshu.com/p/b895c22c85af

版权

本文档展示了如何在Vue应用中集成xterm.js，通过安装和使用xterm-addon-fit和xterm-addon-attach插件，实现终端窗口自适应及与WebSocket服务器的连接。在组件销毁时，确保WebSocket连接关闭且xterm实例被正确清理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端实现

xterm

npm install --save xterm

xterm-addon-fit

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

npm install --save xterm-addon-fit

xterm-addon-attach

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

npm install --save xterm-addon-attach

vue文件

<template>
    <div id="xterm" class="xterm" />
</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: 'Xterm',
  props: {
    socketURI: {
      type: String,
      default: ''
    },
  },
  mounted() {
    this.initSocket()
  },
  beforeDestroy() {
    this.socket.close()
    this.term.dispose()
  },
  methods: {
    initTerm() {
      const term = new Terminal({
        fontSize: 14,
        cursorBlink: true
      });
      const attachAddon = new AttachAddon(this.socket);
      const fitAddon = new FitAddon();
      term.loadAddon(attachAddon);
      term.loadAddon(fitAddon);
      term.open(document.getElementById('xterm'));
      fitAddon.fit();
      term.focus();
      this.term = term
    },
    initSocket() {
      this.socket = new WebSocket(this.socketURI);
      this.socketOnClose();
      this.socketOnOpen();
      this.socketOnError();
    },
    socketOnOpen() {
      this.socket.onopen = () => {
        // 链接成功后
        this.initTerm()
      }
    },
    socketOnClose() {
      this.socket.onclose = () => {
        // console.log('close socket')
      }
    },
    socketOnError() {
      this.socket.onerror = () => {
        // console.log('socket 链接失败')
      }
    }
  }
}
</script>

参考： https://www.jianshu.com/p/b895c22c85af