<template>
<div>
<!-- WebSocket 状态显示 -->
<p>WebSocket 状态: {{ wsStatus }}</p>
</div>
</template>
<script>
export default {
data() {
return {
wsStatus: '连接中',
ws: null,
lockReconnect: false, // 防止重复连接
timeout: 10000, // 心跳超时时间
timeoutObj: null, // 心跳超时对象
serverTimeoutObj: null // 服务器心跳超时对象
};
},
created() {
this.initWebSocket();
},
methods: {
initWebSocket() {
// 初始化WebSocket
this.ws = new WebSocket('ws://your-websocket-server');
this.ws.onopen = this.onOpen;
this.ws.onmessage = this.onMessage;
this.ws.onclose = this.onClose;
this.ws.onerror = this.onError;
// 心跳检测
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.startHeartBeat();
},
onOpen(event) {
this.wsStatus = '已连接';
// ... 其他操作
},
onMessage(event) {
// 处理消息
// ...
},
onClose(event) {
this.wsStatus = '已关闭';
// ... 其他操作
},
onError(event) {
this.wsStatus = '发生错误';
// ... 其他操作
},
reconnect() {
if (this.lockReconnect) return;
this.lockReconnect = true;
// 没有连接上会一直重连，设置定时器防止过多重连
this.timeoutObj && clearTimeout(this.timeoutObj);
this.timeoutObj = setTimeout(() => {
this.initWebSocket();
this.lockReconnect = false;
}, 2000);
},
startHeartBeat() {
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.serverTimeoutObj = setTimeout(() => {
// 发送心跳，服务器端如果10秒内未收到心跳，关闭连接
this.ws.send('heartbeat');
this.startHeartBeat();
}, 10000);
}
},
beforeDestroy() {
this.ws.close(); // 关闭WebSocket连接
}
};
</script>这段代码展示了如何在Vue 2中实现一个包含心跳检测和自动重连的WebSocket模块。它使用了WebSocket实例的各种生命周期事件，并通过计时器实现了心跳的发送和检测机制。当WebSocket连接关闭时，它会尝试重新连接，并且使用了锁的机制防止过度的重连尝试。