xterm.js结合WebSocket 实现前端虚拟终端

Posted 2023-05-17

参考技术A 参考文档地址
http://www.luyixian.cn/news_show_272157.aspx
https://blog.csdn.net/qq_31126175/article/details/84346305
https://superwang.cn/
https://blog.csdn.net/weixin_33913377/article/details/91470776
https://juejin.im/post/5c9cae315188251e40649499
https://blog.csdn.net/weixin_38318244/article/details/103908129 //最重要，区分了3.X和4.X的区别

注意：如果你的服务启动后报： Invalid UTF-8 in text frame
那么解决方案是后端服务器字符集问题, 需要设置为export LANG=en_US.UTF-8
感谢 小_Aa

webssh-xterm.js的简单使用

参考技术A 本文demo主要实现一个页面一个webssh窗口，前端部分主要利用 xterm 通过 原生ws 和后端通信，后端部分使用 nodejs+utf8+ws+ssh2 。

基于vue项目，前端主要依赖包： xterm xterm-addon-fit ，使用前请install。

前端主要依赖包： utf8 ssh2 ws ，使用前请install。
ssh2 用来实现nodejs和服务器进行连接和通信。
utf8 用来实现服务器返回的命令执行结果解码。
ws 用来实现后端和前端ws全双工通信。

1、浏览器resize后，webshell窗口宽高自适应、命令显示的问题；
2、设置了cols或者fitAddon.fit(); 当一行字符超过80个后，会替换现在的内容问题。