vue 代码

1.首先：npm 两个包 npm install --save xterm-addon-fit npm install --save xterm 2.vue代码如下 有两个按钮：一个是 Run， 一个是 Close Run按钮：打开Xterm 终端界面 打开Xterm终端界面代码： 方法 destroy 销毁终端, 不推荐使用。推荐使用dispose()

this.term.open(document.getElementById("xterm"))

Close按钮：关闭vue中websocke连接并且关闭Xterm终端界面 关闭Xterm终端界面代码：

this.term.dispose(document.getElementById("xterm")) <template> <div class="hello"> <form> <div class="column"> <div class="columns is-mobile"> <div class="column"> <label class="label">IP</label> <div class="control"> <input class="input" type="text" placeholder="IP" v-model="ip" /> </div> </div> <div class="column"> <label class="label">Port</label> <div class="control"> <input class="input" type="text" placeholder="Port" v-model="port" /> </div> </div> </div> </div> <input type="button" class="button is-success" @click="run" value="Run" /> <input type="button" class="button is-success" @click="close" value="Close" /> </form> <div id="xterm"></div> </div> </template> <script> import { Terminal } from "xterm"; import { FitAddon } from "xterm-addon-fit"; import "xterm/css/xterm.css"; import "xterm/lib/xterm.js"; const tbit = require("../tbit"); export default { data() { return { term: "", socket:"", ip:"127.0.0.1", port:"23" }; }, methods: { async run (){ var query = `{term_query(ip:"${this.ip}",port:"${this.port}")}` await tbit.ql(query) let url = "ws://localhost:9998" this.init(url) }, initXterm() { this.term = new Terminal({ rendererType: "canvas", //渲染类型 rows: 35, //行数 convertEol: true, //启用时，光标将设置为下一行的开头 scrollback: 10, //终端中的回滚量 disableStdin: false, //是否应禁用输入 cursorStyle: "underline", //光标样式 cursorBlink: true, //光标闪烁 theme: { foreground: "yellow", //字体 background: "#060101", //背景色 cursor: "help" //设置光标 } }); this.term.open(document.getElementById("xterm")) const fitAddon = new FitAddon(); this.term.loadAddon(fitAddon); // 支持输入与粘贴方法 let _this = this; //一定要重新定义一个this，不然this指向会出问题 let input = '' this.term.onData(function(key) { // let order = ["stdin",key]; //这里key值是你输入的值，数据格式一定要找后端要！！！！ // _this.socket.onsend(JSON.stringify(order)); //转换为字符串 _this.term.write(key) input += key if(Buffer.from(key)[0] == 13){ _this.term.writeln('') _this.socket.onsend(input) input = '' } }); }, init(url) { // 实例化socket this.socket = new WebSocket(url); // 监听socket连接 this.socket.onopen = this.open; // 监听socket错误信息 this.socket.onerror = this.error; // 监听socket消息 this.socket.onmessage = this.getMessage; // 发送socket消息 this.socket.onsend = this.send; }, open: function() { // console.log("socket连接成功"); this.initXterm(); }, error: function() { console.log("连接错误"); }, close: function() { if(this.socket){ this.socket.close(); } if(this.term){ this.term.dispose(document.getElementById("xterm")) } // console.log("socket已经关闭"); }, getMessage: function(msg) { this.term.write(msg.data) // this.term.close() }, send: function(order) { this.socket.send(order); }, }, beforeDestroy(){ this.close() }, }; </script>

后端代码

1.首先：npm 一个包 npm install --save nodejs-websocke 2.后端代码如下：

async function(){ var server = ws.createServer(function(wssocket){ wssocket.on('text',function(str){ console.log(str) wssocket.sendText('我收到了') }) wssocket.on('close',function(){ server.close() console.log('wssocket已经关闭') }) }).listen(9998) } }

参考文档：关于Xterm：https://blog.csdn.net/l17606145618/article/details/106907674 掘金关于Xterm：https://juejin.im/post/6844903809035010055