WebSocket 是一种支持全双工通信的协议，允许客户端和服务器之间进行实时通信。然而，在实际使用中，网络不稳定或服务器重启等情况可能导致连接中断。为了确保连接的稳定性和持续性，我们需要实现 WebSocket 的自动重连机制。
***心跳机制和重连逻辑
// 定义 WebSocket 变量和心跳检测对象
var ws;
var heartCheck = {
timeout: 3000, // 心跳间隔时间
timeoutObj: null,
serverTimeoutObj: null,
start: function() {
var self = this;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.timeoutObj = setTimeout(function() {
ws.send("PING"); // 发送心跳消息
self.serverTimeoutObj = setTimeout(function() {
ws.close(); // 如果未收到心跳响应，关闭连接
}, self.timeout);
}, this.timeout);
}
};
// 创建 WebSocket 连接
function createWebSocket(url) {
try {
ws = new WebSocket(url);
init();
} catch (e) {
reconnect(url);
}
}
// 初始化 WebSocket 事件
function init() {
ws.onclose = function() {
reconnect(ws.url);
};
ws.onerror = function() {
reconnect(ws.url);
};
ws.onopen = function() {
heartCheck.start(); // 连接成功后启动心跳检测
};
ws.onmessage = function(event) {
heartCheck.start(); // 收到消息后重置心跳检测
};
}
// 重连逻辑
function reconnect(url) {
if (heartCheck.lockReconnect) return;
heartCheck.lockReconnect = true;
setTimeout(function() {
createWebSocket(url);
heartCheck.lockReconnect = false;
}, 4000); // 设置重连间隔时间
}
// 启动 WebSocket 连接
createWebSocket("ws://example.com/websocket");
***解释
心跳检测：心跳检测通过定时发送心跳消息（如 "PING"）来检测连接状态。如果在指定时间内未收到服务器的响应，则认为连接已断开，并关闭连接。
重连逻辑：当连接关闭或发生错误时，调用 reconnect 函数进行重连。重连逻辑中使用了一个定时器，避免频繁重连导致的资源消耗。
初始化 WebSocket 事件：在 init 函数中，设置了 WebSocket 的 onclose、onerror、onopen 和 onmessage 事件处理函数，确保在连接关闭、发生错误、连接成功和收到消息时进行相应处理。
通过上述代码，我们可以实现 WebSocket 的自动重连机制，确保在网络不稳定或服务器重启等情况下，客户端能够自动重新连接服务器，保持通信的稳定性和持续性。