前端 reconnecting-websocket 包

版本："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）
浏览器兼容性	现代浏览器	✅ 处理降级和兼容性问题

5. 替代方案​

• ​Socket.IO​：功能更全面的实时通信库（含心跳检测、多路复用等）。
• ​ws (Node.js)​​：适用于服务端的 WebSocket 实现，需自行处理重连。
• ​Autobahn|JS​：支持 WAMP 协议的库，含重连机制。

6. 常见问题​

• ​Q：如何禁用自动重连？​​
  A：设置 maxRetries: 0。

• ​Q：如何手动触发重连？​​
  A：调用 rws.reconnect()（需先关闭当前连接）。

• ​Q：如何检测重连成功？​​
  A：监听 open 事件，或使用自定义逻辑标记重连状态。