🔥 重磅更新！easy-websocket-client v1 来袭，更灵活的 WebSocket 管理方案
之前分享的 easy-websocket-client 收到了很多同学的反馈，经过迭代优化，现在正式发布 v1 版本！这次更新带来了更灵活的事件处理模式、更智能的消息解析，以及对 Node.js 环境的完整支持，彻底解决了 v0 版本的使用痛点。
🚨 核心更新：为什么要升级到 v1？
🔥 破坏性更新（Breaking Changes）
（从 v0 升级必看！）
- 移除构造函数事件回调：不再支持
onOpen/onClose等配置项，改用更灵活的on()/once()/off()事件监听模式，更符合前端事件处理习惯。 - TypeScript 类型重构：全面优化类型定义，事件参数、消息类型提示更精准，减少类型断言。
✨ 新增核心功能
jsonAble自动解析：开启后自动将收到的 JSON 字符串解析为对象，省去手动JSON.parse()的重复工作。- Node.js 环境支持：通过
WebSocketImpl参数传入ws库的WebSocket实现，轻松在 Node 服务中使用。 - 一次性事件监听：
once()方法支持监听单次触发的事件（如首次连接成功），避免内存泄漏。 - 批量移除监听器：
offAll()方法一键清除所有事件监听，在组件卸载时更方便清理资源。
🛠️ v1 核心特性详解
1. 事件监听模式：更符合前端开发习惯
v1 彻底改用事件驱动模式，支持细粒度的事件管理：
// 监听事件（多次触发）
client.on('open', () => {
console.log('连接成功，可发送消息了');
});
// 监听单次事件（只触发一次）
client.once('message', (firstMsg) => {
console.log('收到第一条消息：', firstMsg);
});
// 移除特定监听器
const handleMessage = (msg) => console.log(msg);
client.on('message', handleMessage);
client.off('message', handleMessage); // 不再监听
// 清除所有监听器
client.offAll();
2. jsonAble：自动解析 JSON 消息
无需手动处理字符串转对象，开启后直接拿到解析后的 JSON 数据：
const client = new WebSocketClient('wss://example.com/ws', {
jsonAble: true, // 自动解析 JSON 消息
});
client.on('message', (data) => {
// data 直接是解析后的对象，无需 JSON.parse()
console.log('消息类型：', data.type);
console.log('消息内容：', data.content);
});
// 发送时也支持直接传对象（会自动 stringify）
client.send({ type: 'chat', content: 'Hello v1' });
3. 支持 Node.js 环境
通过 WebSocketImpl 参数适配 Node 环境，前后端统一 WebSocket 管理逻辑：
// Node.js 环境使用（需先安装 ws 库）
import WebSocketClient from 'easy-websocket-client';
import WebSocket from 'ws'; // 需单独安装：npm install ws
const client = new WebSocketClient('wss://example.com/ws', {
WebSocketImpl: WebSocket, // 传入 Node 版 WebSocket 实现
heartbeatInterval: 5000,
});
client.on('message', (data) => {
console.log('Node 端收到消息：', data);
});
4. 更完善的单例模式支持
保留装饰器和高阶函数两种单例方案，结合事件监听更灵活：
import WebSocketClient, { singleton } from 'easy-websocket-client';
@singleton
class AppWebSocket extends WebSocketClient {
constructor() {
super('wss://app.example.com/ws', {
jsonAble: true,
maxReconnectAttempts: 5,
connectResend: true, // 重连后自动补发未发送消息
});
// 初始化事件监听
this.initEvents();
this.connect();
}
private initEvents() {
// 连接成功后发送认证信息
this.on('open', () => {
this.send({ type: 'auth', token: localStorage.getItem('token') });
});
// 统一处理业务消息
this.on('message', (data) => {
switch(data.type) {
case 'notify':
this.handleNotify(data);
break;
case 'chat':
this.handleChat(data);
break;
}
});
}
private handleNotify(notify) {
// 处理通知逻辑
}
private handleChat(chat) {
// 处理聊天逻辑
}
}
// 全局唯一实例
const wsInstance = new AppWebSocket();
📦 快速上手 & 迁移指南
安装
# 安装最新版
npm install easy-websocket-client@latest
# 或指定 v1 版本
npm install easy-websocket-client@1
从 v0 迁移到 v1 只需 3 步：
- 移除构造函数中的事件回调：把
onOpen/onMessage等配置，改为client.on('open', ...)监听。 - 按需开启
jsonAble：如果消息是 JSON 格式，开启后省掉手动解析。 - Node 环境添加
WebSocketImpl：如果在 Node 中使用，传入ws库的WebSocket。
🎯 适用场景升级
除了 v0 支持的实时聊天、通知中心等场景，v1 新增适用场景：
- 跨端应用（同一套代码支持浏览器和 Node 服务）
- 需要频繁绑定/解绑事件的复杂交互场景（如组件化开发）
- 大量 JSON 消息交互的业务（减少解析代码）
📚 资源地址
- GitHub 仓库（含详细迁移文档）
- NPM 包
- v1 完整 API 文档
如果在升级或使用中遇到问题，欢迎提 Issue 或在评论区留言，我会第一时间回复！觉得有用的话，别忘了给个 Star ⭐ 支持下~
