「代码分享」探索WebSocket的乐趣 | 打造个性化的封装体验

寻觅WebSocket的契机

一直以来，我都对WebSocket心生向往，但遗憾的是一直没有机会尝试。借着这次的代码优化，我决定封装一个原生的WebSocket处理类。本来我打算使用Socket.io，但它只能与特定的服务器端搭配使用。对于一些没有封装的服务器端，直接使用它变得不可行，于是我只能自己动手封装。

功能一览

在这个封装中，我注入了一些强大的功能，使得WebSocket的使用更加便捷：

• 支持失败重连： 在网络波动或其他问题导致连接失败时，WebSocket将自动尝试重新连接。
• 心跳保活： 添加了心跳机制，确保连接的持久性。
• 重新初始化支持： 允许手动断开连接并重新初始化，满足一些特殊场景的需求。
• 事件订阅： 引入了事件订阅机制，方便对特定事件进行监听和处理。
• 愉悦的类型推断： TypeScript的强大类型推断，让传入事件名和回调函数时能够自动推断出结果类型。

为何需要重新初始化？

在我们的SPA项目中，用户退出登录时需要断开WebSocket连接，而用户登录后需要重新建立连接。因此，重新初始化的功能便应运而生，专门负责处理用户切换时的重连需求。

事件订阅的重要性

WebSocket消息的传递依赖于原生的onmessage事件。通过该事件的event对象的一些属性区分具体的事件，因此我们需要一个事件分发机制，用于通知对应事件的发生。

有些事件是长期的，比如在app.vue中的处理，订阅一次后可能无法重新订阅。为了解决这个问题，我设计的事件订阅会一直持有所有订阅，除非你手动解除订阅。这样一来，即使重新初始化连接WebSocket，相应的事件通知也不会遗失。

在这个WebSocket的封装之旅中，我体验到了不少挑战，但也因为这些功能的实现，让我更加深刻地理解了WebSocket的强大之处。希望这个封装能为其他开发者提供一些便利，让WebSocket的使用变得更加愉快。

尝试代码

import WebSocketManager from 'WebSocketManager';

// 创建WebSocketManager实例
const wsManager = new WebSocketManager('ws://example.com');

// 支持失败重连
wsManager.enableReconnection();

// 支持心跳
wsManager.enableHeartbeat();

// 支持重新初始化
wsManager.reinitialize();

// 事件订阅
wsManager.subscribe('message', (data: string) => {
  console.log(`Received message: ${data}`);
});

// 愉悦的类型推断
wsManager.subscribe('userLoggedIn', (userInfo: UserInfo) => {
  console.log(`User logged in: ${userInfo.username}`);
});

// 手动断开连接，重新初始化即可重新连接
wsManager.disconnect();
wsManager.reinitialize();