当前位置：首页 > web >正文

前端 reconnecting-websocket 包

web 2025/7/27 15:07:53

版本："reconnecting-websocket": "^4.4.0",

镜像："https://registry.npmmirror.com/reconnecting-websocket/download/reconnecting-websocket-4.4.0.tgz"

reconnecting-websocket 是一个用于增强 WebSocket 连接的 JavaScript 库，主要解决网络不稳定时的自动重连问题。以下是关于该包的详细说明和使用指南：

1. 主要功能

自动重连：当 WebSocket 连接意外断开时，自动尝试重新连接。
可配置策略：允许自定义重连间隔时间、最大重试次数、重连退避策略等。
事件扩展：提供更丰富的事件监听（如 reconnect、maxretries 等）。
轻量级：基于原生 WebSocket API 封装，无额外依赖。

2. 适用场景

需要稳定长连接的实时应用（如聊天、实时数据监控、在线游戏等）。
网络环境不稳定时确保连接恢复的可靠性。

我这边是项目中有无人机网页控制端和服务端需要通过WebSocket交互，我看前端项目中使用到了reconnecting-websocket包

基本用法

import ReconnectingWebSocket from 'reconnecting-websocket';// 创建实例
const rws = new ReconnectingWebSocket('ws://your-websocket-url', [], {// 可选配置connectionTimeout: 1000, // 连接超时时间（毫秒）maxRetries: 10,         // 最大重试次数（Infinity表示无限重试）maxReconnectionDelay: 5000, // 最大重连间隔（毫秒）minReconnectionDelay: 1000, // 最小重连间隔（毫秒）reconnectionDelayGrowFactor: 1.3, // 重连间隔增长因子（指数退避）
});// 事件监听
rws.addEventListener('open', () => {console.log('连接成功');
});rws.addEventListener('message', (event) => {console.log('收到消息:', event.data);
});rws.addEventListener('close', (event) => {console.log('连接关闭', event.code);
});rws.addEventListener('error', (error) => {console.error('连接错误:', error);
});// 手动关闭连接（不再重连）
// rws.close();

3. 关键配置选项

配置项	默认值	说明
`maxRetries`	`Infinity`	最大重试次数（设置为 `0` 禁用自动重连）。
`maxReconnectionDelay`	`5000`	最大重连间隔时间（毫秒）。
`minReconnectionDelay`	`1000`	最小重连间隔时间（毫秒）。
`reconnectionDelayGrowFactor`	`1.3`	每次重连失败后，重连间隔时间的增长倍数（指数退避策略）。
`connectionTimeout`	`4000`	连接超时时间（毫秒）。

4. 与原生 WebSocket 的区别

特性	原生 WebSocket	reconnecting-websocket
自动重连	❌ 需手动实现	✅ 自动处理
重连策略	无	✅ 可配置退避策略
事件扩展	基础事件（open/close/message/error）	✅ 额外事件（如 `reconnect`）
浏览器兼容性	现代浏览器	✅ 处理降级和兼容性问题