前端｜Vue｜WebSocket 超详细使用ReconnectingWebSocket实现无缝实时通信

2024-06-04 5852阅读

背景：

在现代 web 应用中，实时通信是不可或缺的一部分，它为用户带来了无缝、动态的交互体验。从在线游戏到社交媒体的即时消息，再到股票交易平台的实时数据更新，实时通信正在成为用户期望的标准功能。这种需求催生了各种技术的发展，其中 WebSocket 协议在实时通信领域里扮演了重要角色。

什么是 WebSocket？

WebSocket 是一种网络通信协议，提供了一个全双工通信渠道，允许数据在客户端和服务器之间以极低的延迟双向传输。与传统的 HTTP 请求不同，WebSocket 在建立连接后可以保持该连接开放，使得数据可以随时在两端传送，而无需重新建立连接。WebSocket 通信由一个握手过程开始，客户端通过 HTTP 请求与服务器建立连接，并升级到 WebSocket 连接。一旦握手成功，WebSocket 连接就会保持开放状态，直到客户端或服务器主动关闭。

ReconnectingWebSocket 和 WebSocket 的关系

尽管 WebSocket 提供了高效的实时通信能力，但它自身并不处理网络不稳定导致的连接中断。这就意味着当 WebSocket 连接因为网络波动或其他原因断开时，需要手动或通过代码逻辑来重新建立连接。这是一项不仅耗时而且容易出错的任务，对于开发者和最终用户来说都不是一个理想的体验。

这时，ReconnectingWebSocket 库就发挥了作用。ReconnectingWebSocket 是对原生 WebSocket 的一个封装，它在保持原有 WebSocket API 不变的情况下，增加了自动重新连接的功能。当使用 ReconnectingWebSocket 时，如果连接意外断开，它会自动尝试重新连接，无需开发者手动干预，大大简化了实现逻辑。

ReconnectingWebSocket 的优势

自动重连：它会在连接断开时自动尝试重新连接，减轻了开发者处理重连逻辑的负担。
可配置性：你可以自定义重连策略，比如重连尝试的次数、重连的时间间隔等。
简单的API：它提供与原生 WebSocket 相同的 API，让你可以轻松切换而无需大量更改代码。
调试支持：在开发过程中，你可以启用调试模式以监控连接状态和重连行为，帮助快速定位问题。

一、安装

npm install reconnecting-websocket
or
yarn add reconnecting-websocket

二、引入

在你的 JavaScript 文件中，你需要引入这个库：
import ReconnectingWebSocket from 'reconnecting-websocket';
如果你使用的是不支持模块的环境，你可以通过一个  标签来引入它：

三、创建 WebSocket 实例

const url = 'wss://example.com/socket'; // WebSocket 服务端的 URL
const protocols = []; // 可选的子协议数组
const options = {
  // 自动重新连接的选项（可选）
  connectionTimeout: 1000,
  maxRetries: 10,
};
const rws = new ReconnectingWebSocket(url, protocols, options);

四、添加事件监听器

与原生的 WebSocket 类似，ReconnectingWebSocket 也提供了一系列事件监听器：

// 当连接成功建立时
rws.addEventListener('open', function(event) {
  console.log('Connected to the WebSocket server');
});
// 当接收到消息时
rws.addEventListener('message', function(event) {
  console.log('Received message:', event.data);
});
// 当连接关闭时
rws.addEventListener('close', function(event) {
  console.log('Disconnected from the WebSocket server');
});
// 当发生错误时
rws.addEventListener('error', function(event) {
  console.error('WebSocket encountered error:', event.error);
});

五、发送消息

要通过 ReconnectingWebSocket 发送消息，使用 send 方法：

rws.send('Your message here');

六、关闭连接

如果你需要主动关闭 WebSocket 连接，可以使用 close 方法：

rws.close(code, reason); // `code` 和 `reason` 是可选参数

七、监听连接状态变化

为了跟踪连接的状态变化，你可以通过 readyState 属性获取当前的状态，这与原生的 WebSocket 对象一致：

console.log(rws.readyState); // 输出当前的连接状态

readyState 属性的可能值如下：

0 (WebSocket.CONNECTING): 正在连接。
1 (WebSocket.OPEN): 已经连接并且可以通信。
2 (WebSocket.CLOSING): 正在关闭连接。

3 (WebSocket.CLOSED): 连接已关闭或无法打开。

八、手动控制重连

虽然 ReconnectingWebSocket 旨在自动处理重连，但有时你可能需要手动控制这个过程。例如，如果用户暂时离开应用，你可能想要暂停重连尝试，以节省资源

// 手动断开连接，并阻止自动重连
rws.close();
// 之后，如果你又想重新启用自动重连
rws.reconnect();

九、使用事件监听器的替代方法

除了使用 addEventListener 方法外，ReconnectingWebSocket 也允许你直接设置事件处理函数：

rws.onopen = function(event) {
  console.log('Connected to the WebSocket server');
};
rws.onmessage = function(event) {
  console.log('Received message:', event.data);
};
rws.onclose = function(event) {
  console.log('Disconnected from the WebSocket server');
};
rws.onerror = function(event) {
  console.error('WebSocket encountered error:', event.error);
};

十、调试信息

如果你启用了调试模式，ReconnectingWebSocket 将会输出有关连接尝试和状态变化的信息到控制台。这对于开发和诊断问题非常有用：

const rws = new ReconnectingWebSocket('wss://example.com/socket', null, {
  debug: true, // 开启调试模式
});

十一、配置选项

ReconnectingWebSocket 提供了一些配置选项，允许你自定义重连行为：

debug: 是否启用调试模式，默认为 false。
automaticOpen: 是否在实例化时自动打开连接，默认为 true。
reconnectInterval: 重新连接尝试之间的间隔时间（毫秒），默认为 1000。
maxReconnectInterval: 重新连接尝试之间的最大间隔时间（毫秒），默认为 30000。
reconnectDecay: 用于增加 reconnectInterval 的乘数，每次尝试重连后会递增，默认为 1.5。
timeoutInterval: 关闭连接前等待服务器响应的最大时长（毫秒），默认为 2000。
maxRetries: 最大重连尝试次数，设为 null 代表无限尝试，默认为 null。

binaryType: 发送和接收二进制数据的类型，可以是 'blob' 或 'arraybuffer'，默认为 'blob'。

十二、注意事项

### 注意事项
1. **重连策略**: `ReconnectingWebSocket` 将自动处理重连逻辑。如果你希望自定义重连间隔或重连次数等行为，可以在实例化时传入相应的选项。
2. **事件处理**: 在处理 WebSocket 事件时（如 `open`、`message`、`error` 和 `close`），你的逻辑应该与处理原生 `WebSocket` 事件时相同。记得在适当的时候移除监听器，以避免内存泄漏。
3. **发送数据**: 使用 `send()` 方法发送数据时，确保连接已经打开。你可以在 `open` 事件发生后发送数据，或者检查 `rws.readyState` 属性来判断当前的连接状态。
4. **关闭连接**: 调用 `close()` 方法时，可以传入一个状态码和原因字符串来关闭连接。这些参数是可选的，状态码应符合 WebSocket 协议。
5. **错误处理**: 在 `error` 事件中，你可以获得错误信息并进行相应的处理。注意，WebSocket 出错并不总是意味着连接已关闭，所以错误处理逻辑应该与关闭逻辑分开。
6. **二进制数据**: 如果你打算发送或接收二进制数据，请确保设置了正确的 `binaryType`。
7. **环境兼容性**: `ReconnectingWebSocket` 依赖原生的 `WebSocket` 支持。如果你的环境（如某些旧版浏览器）不支持 `WebSocket`，则这个库无法使用。
8. **安全性考虑**: 当使用 WebSocket（尤其是 WSS，即加密的 WebSocket）时，确保你的服务端证书有效并且是由受信任的证书颁发机构签发的，以防止中间人攻击。
9. **资源管理**: 由于重连机制可能导致连接持续尝试打开，你可能需要在某些场景下（如用户离开页面）关闭连接并清理资源。
通过使用 `ReconnectingWebSocket`，你的应用可以更加健壮地处理网络波动和临时中断，提供更好的用户体验。确保根据你的应用需求调整配置选项，以获得最佳的重连行为。

结论

WebSocket 已经成为实时 web 应用的标配，而 ReconnectingWebSocket 又在此基础上提供了额外的稳定性和便利性。对于那些寻求无缝、稳定且高效实时通信体验的应用来说，结合使用 WebSocket 和 ReconnectingWebSocket 库将是一个明智的选择。

不要让网络不稳定影响了你的用户体验。选择 ReconnectingWebSocket，让你的应用更加健壮，让用户即使在网络波动的情况下也能享受到流畅的实时通信服务。