「代码分享」探索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();