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

一、xterm介绍

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

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

二、xterm插件介绍

• FitAddon：调整终端的大小，以适合父元素的大小。
• AttachAddon：将终端附加到 WebSocket 流，与后台进行交互。

AttachAddon

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

三、webssh终端实现

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

遇到的问题

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

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

2、终端自适应问题

终端大小

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

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