vue2 websocket 与后端通信

在 Vue2 应用中使用 WebSocket 与后端进行通信，可以通过原生的 `WebSocket` API 或者结合第三方库（如 `@stomp/stompjs` 或 `websocket-client`）来实现。以下是一种基于原生 WebSocket 的实现方法，并结合 Vue2 的生命周期钩子进行连接管理。 ### 1. 创建 WebSocket 服务模块 为了便于在多个组件中复用 WebSocket 连接，可以创建一个单独的 WebSocket 服务模块。例如，创建 `websocket.js`： ```javascript // src/utils/websocket.js export default class WebSocketService { constructor(url) { this.url = url; this.socket = null; this.callbacks = {}; } connect() { this.socket = new WebSocket(this.url); this.socket.onopen = () => { console.log('WebSocket connection established'); }; this.socket.onmessage = (event) => { try { const data = JSON.parse(event.data); if (this.callbacks[data.type]) { this.callbacks[data.type](data.payload); } } catch (error) { console.error('Error parsing message:', error); } }; this.socket.onclose = (event) => { console.log('WebSocket connection closed:', event.reason); }; this.socket.onerror = (error) => { console.error('WebSocket error:', error); }; } onMessage(type, callback) { this.callbacks[type] = callback; } sendMessage(message) { if (this.socket && this.socket.readyState === WebSocket.OPEN) { this.socket.send(JSON.stringify(message)); } else { console.warn('WebSocket is not open. Ready state:', this.socket.readyState); } } disconnect() { if (this.socket) { this.socket.close(); } } } ``` ### 2. 在 Vue 组件中使用 WebSocket 接下来，在 Vue 组件中引入并使用上述服务模块，实现与后端的实时通信。 ```vue <template> <div> <h3>WebSocket 实时通信示例</h3> <input v-model="message" placeholder="输入消息" /> <button @click="sendMessage">发送</button> <ul> <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li> </ul> </div> </template> <script> import WebSocketService from '@/utils/websocket'; export default { data() { return { message: '', messages: [], wsService: null }; }, mounted() { this.wsService = new WebSocketService('ws://your-backend-url'); this.wsService.connect(); this.wsService.onMessage('serverMessage', (payload) => { this.messages.push(payload.text); }); }, methods: { sendMessage() { if (this.message.trim()) { this.wsService.sendMessage({ type: 'clientMessage', payload: { text: this.message } }); this.message = ''; } } }, beforeDestroy() { if (this.wsService) { this.wsService.disconnect(); } } }; </script> ``` ### 3. 使用 Web Worker 管理心跳机制 为了确保 WebSocket 连接的稳定性，可以使用 Web Worker 来实现心跳包发送机制，如引用中提到的心跳逻辑 [^3]。 创建 `ws.worker.js` 文件： ```javascript // src/workers/ws.worker.js let heartBeatTimer = null; onmessage = (e) => { const { type } = e.data; if (type === 'start') { heartBeatTimer = setInterval(() => { postMessage({ type: 'heartbeat' }); }, 5000); } if (type === 'stop') { clearInterval(heartBeatTimer); heartBeatTimer = null; } }; ``` 在主组件中启动心跳： ```vue <script> const wsWorker = new Worker('@/workers/ws.worker.js'); export default { mounted() { wsWorker.postMessage({ type: 'start' }); wsWorker.onmessage = (event) => { if (event.data.type === 'heartbeat') { this.wsService.sendMessage({ type: 'heartbeat', payload: {} }); } }; }, beforeDestroy() { wsWorker.postMessage({ type: 'stop' }); wsWorker.terminate(); } }; </script> ``` ### 4. 注意事项 - **连接状态管理**：确保在组件销毁前关闭 WebSocket 连接。 - **错误处理**：在 `onerror` 和 `onclose` 中加入重连机制，提升用户体验。 - **消息格式**：前后端约定统一的消息格式，例如使用 JSON 并包含 `type` 和 `payload` 字段。 通过上述方法，可以在 Vue2 应用中实现与后端的 WebSocket 通信，并结合 Web Worker 实现心跳包机制，从而提升连接的稳定性与可靠性。 ---