在 Vue 中使用 ReconnectingWebSocket

ReconnectingWebSocket 是一個自動重連的 WebSocket 實現，非常適合在 Vue 項目中使用。下面是如何在 Vue 中集成和使用它的方法：

搜索? "程序員老狼"

安裝 ReconnectingWebSocket

首先，你需要安裝 ReconnectingWebSocket 庫：

npm install reconnecting-websocket
# 或者
yarn add reconnecting-websocket

基本使用方法

1. 在組件中直接使用

import ReconnectingWebSocket from 'reconnecting-websocket';export default {data() {return {socket: null,messages: []};},mounted() {// 創建 WebSocket 連接this.socket = new ReconnectingWebSocket('ws://your-websocket-url');// 監聽消息this.socket.addEventListener('message', (event) => {this.messages.push(event.data);});// 監聽連接打開this.socket.addEventListener('open', () => {console.log('WebSocket connected');});// 監聽錯誤this.socket.addEventListener('error', (error) => {console.error('WebSocket error:', error);});// 監聽連接關閉this.socket.addEventListener('close', () => {console.log('WebSocket disconnected');});},methods: {sendMessage(message) {if (this.socket && this.socket.readyState === WebSocket.OPEN) {this.socket.send(message);}}},beforeDestroy() {// 組件銷毀時關閉連接if (this.socket) {this.socket.close();}}
};

2. 作為 Vue 插件使用（推薦）

為了更好的復用性，可以創建一個 Vue 插件：

??src/plugins/websocket.js??

import ReconnectingWebSocket from 'reconnecting-websocket';const WebSocketPlugin = {install(Vue, options) {const socket = new ReconnectingWebSocket(options.url, [], {connectionTimeout: options.timeout || 5000,maxRetries: options.maxRetries || 10});Vue.prototype.$socket = socket;// 添加全局方法Vue.prototype.$connectWebSocket = function() {socket.reconnect();};Vue.prototype.$disconnectWebSocket = function() {socket.close();};}
};export default WebSocketPlugin;

??在 main.js 中注冊插件??

import Vue from 'vue';
import WebSocketPlugin from './plugins/websocket';Vue.use(WebSocketPlugin, {url: 'ws://your-websocket-url',timeout: 5000,maxRetries: 10
});

??在組件中使用??

export default {mounted() {this.$socket.addEventListener('message', (event) => {console.log('Received message:', event.data);});// 發送消息this.$socket.send('Hello, server!');},beforeDestroy() {// 可選：關閉連接this.$disconnectWebSocket();}
};

高級配置選項

ReconnectingWebSocket 提供了多種配置選項：

const socket = new ReconnectingWebSocket('ws://your-websocket-url', [], {// 自動重連的最小延遲時間（毫秒）minReconnectionDelay: 1000,// 自動重連的最大延遲時間（毫秒）maxReconnectionDelay: 5000,// 重連延遲時間的增長因子reconnectionDelayGrowFactor: 1.3,// 連接超時時間（毫秒）connectionTimeout: 4000,// 最大重試次數，Infinity 表示無限重試maxRetries: Infinity,// 是否在關閉時自動重連automaticOpen: true,// 是否在連接丟失時立即嘗試重連startClosed: false,// 調試模式debug: false
});

注意事項

1. ??跨域問題??：確保你的 WebSocket 服務器支持跨域請求
2. ??SSL??：生產環境建議使用 wss:// 而不是 ws://
3. ??組件銷毀??：記得在組件銷毀時關閉連接，避免內存泄漏
4. ??響應式數據??：WebSocket 消息不是響應式的，需要手動更新 Vue 的數據
5. ??重連策略??：根據業務需求調整重連策略參數

完整示例

<template><div><h1>WebSocket Demo</h1><button @click="sendMessage">Send Message</button><div v-for="(msg, index) in messages" :key="index">{{ msg }}</div></div>
</template><script>
import ReconnectingWebSocket from 'reconnecting-websocket';export default {data() {return {socket: null,messages: [],connectionStatus: 'disconnected'};},mounted() {this.initWebSocket();},methods: {initWebSocket() {this.socket = new ReconnectingWebSocket('ws://your-websocket-url', [], {minReconnectionDelay: 1000,maxRetries: 10});this.socket.addEventListener('open', () => {this.connectionStatus = 'connected';console.log('WebSocket connected');});this.socket.addEventListener('message', (event) => {this.messages.push(event.data);});this.socket.addEventListener('error', (error) => {this.connectionStatus = 'error';console.error('WebSocket error:', error);});this.socket.addEventListener('close', () => {this.connectionStatus = 'disconnected';console.log('WebSocket disconnected');});},sendMessage() {if (this.socket && this.socket.readyState === WebSocket.OPEN) {this.socket.send('Hello from Vue!');}}},beforeDestroy() {if (this.socket) {this.socket.close();}}
};
</script>

通過這種方式，你可以在 Vue 應用中輕松實現具有自動重連功能的 WebSocket 通信。