前端 websocket 断线重连
时间: 2023-09-23 15:02:38 浏览: 47
前端 WebSocket 断线重连是一种处理 WebSocket 连接异常断开的方法,以确保 WebSocket 连接的可靠性。以下是一个基本的断线重连示例:
```javascript
let websocket = null;
let lockReconnect = false; // 避免重复连接
function createWebSocket() {
try {
websocket = new WebSocket('ws://localhost:8080');
websocket.onopen = function () {
console.log('WebSocket 连接成功');
};
websocket.onclose = function () {
console.log('WebSocket 连接关闭');
reconnect();
};
websocket.onerror = function () {
console.log('WebSocket 连接出错');
reconnect();
};
websocket.onmessage = function (event) {
console.log('收到消息:', event.data);
};
} catch (e) {
console.log('WebSocket 连接异常:', e.message);
reconnect();
}
}
function reconnect() {
if (lockReconnect) {
return;
}
lockReconnect = true;
// 重连间隔递增
setTimeout(function () {
createWebSocket();
lockReconnect = false;
}, 5000);
}
createWebSocket();
```
以上代码中,`createWebSocket` 函数用于创建 WebSocket 连接,捕获连接成功、关闭、出错和收到消息的事件。如果连接关闭或出错,则调用 `reconnect` 函数进行重连。`reconnect` 函数会检查是否已经在重连中,如果是则不进行重连,否则等待一段时间后重新创建 WebSocket 连接。
需要注意的是,WebSocket 断线重连的实现也需要考虑到服务器的实现,例如服务器可能会限制客户端的连接频率或连接数量。因此,更复杂的实现方式可能需要考虑这些因素。