轻松管理 WebSocket 连接!easy-websocket-client

在前端开发中,WebSocket 是实现实时通信的核心技术,但原生 WebSocket 的连接管理(如断连重连、心跳维护、事件监听)往往需要编写大量重复代码。今天给大家分享一个好用的 WebSocket 连接管理库 ------ easy-websocket-client,功能都已经封装好,配置一下就好了。

主要功能特性

1. 自动重连机制

reconnectInterval:重连间隔

maxReconnectAttempts:最大重连次数

断连后自动发起重连,达到最大次数后停止尝试

适用于网络不稳定场景,减少手动处理重连的繁琐代码

2. 可定制化心跳

heartbeatMessage:自定义心跳消息内容(支持字符串或对象)

heartbeatInterval:心跳发送间隔

自动检测服务端响应,心跳失败时触发重连

3. 全生命周期事件回调

onOpen:连接成功时触发

onClose:连接关闭时触发(携带 CloseEvent 参数)

onMessage:接收消息时触发(自动解析文本 / 二进制数据)

onError:连接报错时触发(捕获网络错误等异常)

快速上手

安装

复制代码
# npm
npm install easy-websocket-client

# yarn
yarn add easy-websocket-client

# pnpm
pnpm add easy-websocket-client

基本使用

复制代码
import WebSocketClient from 'easy-websocket-client';

// 创建连接实例
const client = new WebSocketClient('wss://example.com/socket', {
  showLog: true,                  // 开启控制台日志
  reconnectInterval: 2000,        // 重连间隔 2 秒
  heartbeatInterval: 10000,       // 心跳间隔 10 秒
  heartbeatMessage: 'ping',       // 心跳消息
  maxReconnectAttempts: 5,        // 最大重连次数
  onOpen: () => console.log('连接已打开'),
  onClose: (e) => console.log('连接关闭', e),
  onMessage: (message) => console.log('收到消息', message),
  onError: (error) => console.error('连接错误', error),
});

// 发起连接
client.connect();

// 发送消息
client.send('Hello WebSocket!');

// 关闭连接
client.close();

单例模式实现(装饰器方式)

复制代码
import { singleton } from 'easy-websocket-client';

interface Message {
  type: string;
  data: any;
}

@singleton
class MyWebSocketClient extends WebSocketClient<Message> {
  constructor() {
    // 动态生成连接地址(支持开发/生产环境区分)
    const baseURL = import.meta.env.DEV
      ? `ws://${import.meta.env.VITE_WS_HOST}:${import.meta.env.VITE_PORT}/ws`
      : import.meta.env.VITE_API_URL;

    super(baseURL, {
      heartbeatMessage: { type: 'HEARTBEAT', textMsg: 'ping' }, // 对象类型心跳消息
      heartbeatInterval: 10000,
      maxReconnectAttempts: 3,
      connectResend: true, // 重连后自动重发未完成的消息
      onMessage(data) {
        console.log('业务消息处理:', data);
      },
    });

    this.connect();
  }

  // 支持手动关闭并重置单例
  public close = () => {
    super.close();
    MyWebSocketClient.reset(); // 重置单例实例
  };
}

// 全局唯一实例
const clientInstance = new MyWebSocketClient();

适用场景

实时聊天系统(如客服对话、直播间弹幕)

通知中心(如新消息提醒、系统公告推送)

实时数据监控(如仪表盘数据实时更新)

协同编辑工具(多人协作场景下的状态同步)

游戏实时交互(低延迟的游戏状态同步)

相关推荐
漂流瓶jz20 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码21 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v21 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
webYin21 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip1 天前
结合Worker通知应用更新
前端·javascript
叶玳言1 天前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳1 天前
HTML 基本结构
前端
Gazer_S1 天前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
一只小阿乐1 天前
Html重绘和重排
前端·html
_Rookie._1 天前
vue3 使用css变量
前端·javascript·html