vue3 webssh终端实现-基于xterm.js

一、xterm介绍

xterm是一个使用 TypeScript 编写的前端终端组件,可以直接在浏览器中实现一个命令行终端应用,通常与websocket一起使用。

--------------------------顺便吐个槽:官方文档太简陋,啥都需要看代码 -_- --------------------------

二、xterm插件介绍
  • FitAddon:调整终端的大小,以适合父元素的大小。
  • AttachAddon:将终端附加到 WebSocket 流,与后台进行交互。

AttachAddon

如果想使用这个插件,最好看下默认的WebSocket 实现是否是符合需要,需要定制化的可能不太适用。
比如:message 使用addEventListener监听事件实现,这意味着 AttachAddon默认的监听事件覆盖不了,会输出所有data
而我的项目需求是展示data里面的部分信息,所以默认的WebSocket用不了了,这个插件也就用不了,需要自己实现一个websocket

三、webssh终端实现

经过不断的摸索和尝试,有了初步的终端实现:

<template>
    <div
        v-loading="loading"
        ref="terminal"
        element-loading-text="拼命连接中"
    ></div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import { debounce } from 'lodash'
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
import "xterm/css/xterm.css";

const terminal = ref(null);
const props = defineProps({
    terminalDetail: Object,
    type: String
});
const fitAddon = new FitAddon();

let first = ref(true);
let loading = ref(true);
let terminalSocket = ref(null);
let term = ref(null);


const runRealTerminal = () => {
    loading.value = false;
}

const onWSReceive = (message) => {
    // 首次接收消息,发送给后端,进行同步适配
    if (first.value === true) {
        first.value = false;
        resizeRemoteTerminal();
    }
    const data = JSON.parse(message.data);
    term.value.element && term.value.focus()
    term.value.write(data.Data)
}

const errorRealTerminal = (ex) => {
    let message = ex.message;
    if (!message) message = 'disconnected'
    term.value.write(`\x1b[31m${message}\x1b[m\r\n`)
    console.log("err");
}
const closeRealTerminal = () => {
    console.log("close");
}

const createWS = () => {
    const url = 'XXXX' 
    terminalSocket.value = new WebSocket(url);
    terminalSocket.value.onopen = runRealTerminal;
    terminalSocket.value.onmessage = onWSReceive;
    terminalSocket.value.onclose = closeRealTerminal;
    terminalSocket.value.onerror = errorRealTerminal;
}
const initWS = () => {
    if (!terminalSocket.value) {
        createWS();
    }
    if (terminalSocket.value && terminalSocket.value.readyState > 1) {
        terminalSocket.value.close();
        createWS();
    }
}
// 发送给后端,调整后端终端大小,和前端保持一致,不然前端只是范围变大了,命令还是会换行
const resizeRemoteTerminal = () => {
    const { cols, rows } = term.value
    if (isWsOpen()) {
        terminalSocket.value.send(JSON.stringify({
            Op: 'resize',
            Cols: cols,
            Rows: rows,
        }))
    }
}
const initTerm = () => {
    term.value = new Terminal({
        lineHeight: 1.2,
        fontSize: 12,
        fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace",
        theme: {
            background: '#181d28',
        },
        // 光标闪烁
        cursorBlink: true,
        cursorStyle: 'underline',
        scrollback: 100,
        tabStopWidth: 4,
    });
    term.value.open(terminal.value);
    term.value.loadAddon(fitAddon);
   // 不能初始化的时候fit,需要等terminal准备就绪,可以设置延时操作
    setTimeout(() => {
        fitAddon.fit();
    }, 5)
}
// 是否连接中0 1 2 3 
const isWsOpen = () => {
    const readyState = terminalSocket.value && terminalSocket.value.readyState;
    return readyState === 1
}
const fitTerm = () => {
    fitAddon.fit();
}
const onResize = debounce(() => fitTerm(), 800);

const termData = () => {
    // 输入与粘贴的情况,onData不能重复绑定,不然会发送多次
    term.value.onData(data => {
        if (isWsOpen()) {
            terminalSocket.value.send(
                JSON.stringify({
                    Op: 'stdin',
                    Data: data,
                })
            );
        }
    });
}
const onTerminalResize = () => {
    window.addEventListener("resize", onResize);
}
const removeResizeListener = () => {
    window.removeEventListener("resize", onResize);
}
//监听类型变化,重置term
watch(() => props.type, () => {
    first.value = true;
    loading.value = true;
    terminalSocket.value = null;
    initWS();
    // 重置
    term.value.reset();
})

onMounted(() => {
    initWS();
    initTerm();
    termData();
    onTerminalResize();
})
onBeforeUnmount(() => {
    removeResizeListener();
    terminalSocket.value && terminalSocket.value.close();
})
</script>
<style lang="scss" scoped>
#terminal {
    width: 100%;
    height: 100%;
}
</style>
遇到的问题

1、websocket连接成功后,前端输入命令在message里不输出,websocket readyState 会从1 ( connect )转成3( close )

之前没看AttachAddon的默认实现,就自动给term loadAddonAttachAddon,使用了默认的websocket,自己实现的被覆盖了,导致刚连成功websocket 的状态从1变成了3,去掉了就好了。

2、终端自适应问题


终端大小
  • fitAddon.fit() 的问题:不能初始化的时候调用,需要设置延时
  • websocket进行通信时发现命令都是换行的,查找资料后发现没有和后端同步页面显示的命令行大小,需要发送同步消息resizeRemoteTerminal哦。
  • 前端自适应(resize)的时候也是要和后端同步的,fitAddon.fit()后需要走onResize方法同步

3、终端释放问题
onBeforeUnmount 最后加上term.value&&term.value.dispose()总是会释放失败,可能不需要释放吧。

本文章由javascript技术分享原创和收集

如若转载请注明原文及出处:https://www.dsiab.com/post/1e2910ac-6708-4ac6-a063-f06d74cfda9e
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。