Vue Websocket 监听 websocket.readyState

监听 websocket.readyState 的变化

  • CONNECTING:值为0,表示正在连接。
  • OPEN:值为1,表示连接成功,可以通信了。
  • CLOSING:值为2,表示连接正在关闭。
  • CLOSED:值为3,表示连接已经关闭,或者打开连接失败。
this.ws = new WebSocket("ws://ip:port/ws/muweb/channels/")

this.ws.addEventListener('open', () => { 
    console.log('socket 打开了')
    this.ws_status = this.ws.readyState;
});

this.ws.addEventListener('close', () => {
    console.log('socket 关闭了')
    this.ws_status = this.ws.readyState;
});
### 集成 xterm.jsWebSocketVue 项目 为了在 Vue 项目中集成 `xterm.js` 并通过 WebSocket 进行通信,可以遵循以下方法来创建一个基本的功能模块。 #### 安装依赖库 首先,在 Vue 项目的根目录下安装必要的 npm 包: ```bash npm install xterm ws xterm-addon-fit xterm-addon-web-links ``` 这些包提供了基础的终端模拟器功能以及 WebSockets 支持[^1]。 #### 创建 XTerm 组件 接着定义一个新的组件用于封装 `xterm.js` 功能。这可以通过编写如下所示的一个简单的 Vue 单文件组件 (`.vue`) 来完成: ```html <template> <div id="terminal-container"></div> </template> <script> import { Terminal } from 'xterm'; import * as FitAddon from 'xterm-addon-fit'; export default { name: "XTermComponent", data() { return { term: null, fitAddon: new FitAddon.FitAddon(), }; }, mounted() { const terminalElement = document.getElementById('terminal-container'); this.term = new Terminal({ rendererType: 'canvas', // 使用 canvas 渲染提高性能 cursorBlink: true, // 设置光标闪烁效果 convertEol: true // 启用自动换行模式 }); this.term.loadAddon(this.fitAddon); this.term.open(terminalElement); window.addEventListener('resize', () => this.fitAddon.fit()); this.fitAddon.fit(); } }; </script> <style scoped> #terminal-container { width: 100%; height: calc(100vh - 2rem); /* 调整大小适应视窗 */ } </style> ``` 此代码片段展示了如何初始化并配置 `Terminal` 对象,并将其附加到页面中的指定容器上。 #### 建立 WebSocket 连接 为了让前端能够与服务器端交互,还需要建立 WebSocket 连接并将消息传递给 `xterm.js` 实例处理输入输出操作。可以在上述组件内继续扩展逻辑以支持这一点: ```javascript // ... 上述代码省略 ... mounted() { // ... 初始化部分省略 ... let socket; try { socket = new WebSocket(`ws://${window.location.host}/ws`); socket.onmessage = function(event) { this.term.write(event.data); }.bind(this); this.term.onData((data) => { if(socket.readyState === WebSocket.OPEN){ socket.send(data); } }); } catch(error) { console.error("Failed to connect via WebSocket", error); } // 关闭时清理资源 this.$once('hook:beforeDestroy', () => { if (socket && socket.readyState !== WebSocket.CLOSED) { socket.close(); } }); } // ... 下方其他代码保持不变 ... ``` 这段脚本实现了 WebSocket 的连接过程,并设置了相应的事件监听器以便于接收来自服务端的数据并向其发送用户的键盘输入数据[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值