websocket 心跳包 vue3

### 如何在 Vue3 中实现 WebSocket 心跳包机制 为了实现在 Vue3 项目中的 WebSocket 心跳包机制，可以按照如下方法构建： #### 构建 WebSocket 客户端并初始化连接 首先，在组件内部定义一个 `WebSocket` 的实例变量来管理与服务器的连接状态。当页面加载时建立连接，并设置定时器发送心跳消息。 ```javascript import { onMounted, ref } from 'vue'; export default { setup() { const ws = ref(null); function initWebSocket() { if (ws.value !== null) return; ws.value = new WebSocket('wss://example.com/socket'); // 替换成实际地址 [^1] ws.value.onopen = () => console.log('Connected to server'); ws.value.onerror = error => console.error(`WebSocket error: ${error}`); ws.value.onmessage = messageEvent => handleIncomingMessage(messageEvent.data); startHeartbeat(); } onMounted(() => initWebSocket()); } } ``` #### 发送心跳请求 通过设定间隔时间定期向服务器发送特定的消息作为心跳信号，以保持会话活跃。通常情况下每分钟发送一次即可满足大多数应用场景的需求。 ```javascript let heartbeatIntervalId; function startHeartbeat() { clearInterval(heartbeatIntervalId); // 清除之前的计时器以防重复启动 heartbeatIntervalId = setInterval(() => { try { if(ws.value.readyState === WebSocket.OPEN){ ws.value.send(JSON.stringify({ type: "ping" })); } } catch(e){ /* 错误处理 */ } }, 60 * 1000); // 设置为每隔一分钟执行一次 } ``` #### 处理来自服务器的心跳响应 每当收到新的消息时都需要判断其是否属于心跳回复类型；如果是，则重置超时计数器防止因长时间无交互而断开连接。 ```javascript const lastPongTime = Date.now(); function handleIncomingMessage(dataStr) { const data = JSON.parse(dataStr); switch(data.type) { case "pong": lastPongTime = Date.now(); // 更新最后接收 pong 时间戳 break; default: // 正常业务逻辑... } } // 添加关闭事件监听以便清理资源 ws.value.onclose = () => cleanupResources(); function cleanupResources(){ clearInterval(heartbeatIntervalId); ws.value.close(); } ``` 以上就是在 Vue3 应用程序里加入 WebSocket 心跳检测功能的具体做法[^2]。这种方法不仅能够有效地维持长连接的有效性，而且还可以帮助开发者及时发现网络异常情况。