ReconnectingWebSocket 是一个自动重连的 WebSocket 实现,非常适合在 Vue 项目中使用。下面是如何在 Vue 中集成和使用它的方法:
首先,你需要安装 ReconnectingWebSocket 库:
npm install reconnecting-websocket
# 或者
yarn add reconnecting-websocket
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();
}
}
};
为了更好的复用性,可以创建一个 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
});
wss://
而不是 ws://
<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 通信。