应封装统一事件分发路由器，通过标准消息结构（type、payload）解耦逻辑，用WSEventRouter类管理订阅与派发，绑定WebSocket的onmessage，并支持通配符、错误隔离等增强特性。

为什么要封装统一事件分发路由器

在 WebSocket 场景里，如果把大量 if-else 或 switch 直接写进 onmessage，消息一多，逻辑就会迅速变得混乱。

这样不仅阅读困难，后续维护成本也会越来越高。更稳妥的做法，是把“收到消息 → 解析类型 → 派发给对应处理器”单独抽离出来。

这样一来，业务代码只需要专注“做什么”。至于“怎么接收、怎么分发”，交给路由器处理即可。

定义标准消息结构

路由器要可靠工作，前提是消息格式统一。建议约定一个最小但足够的结构。

• type：必填字符串，标识事件类型（如 "user:login"、"chat:message"）
• payload：任意数据（对象、字符串、数字等），承载具体业务内容
• 可选 id 或 timestamp，用于追踪或幂等处理

后端推送和前端发送都遵循该结构。例如：{ type: "order:updated", payload: { id: 123, status: "shipped" } }。

实现轻量级事件路由器类

可以用一个类统一管理订阅与派发，避免全局污染，同时支持多实例使用。

class WSEventRouter {
constructor() {
this.handlers = new Map(); // type → handler 数组
}

// 订阅某 type 的处理器
on(type, handler) {
if (!this.handlers.has(type)) {
this.handlers.set(type, []);
}
this.handlers.get(type).push(handler);
}

// 取消订阅（可选：支持取消单个或全部）
off(type, handler) {
if (!handler) {
this.handlers.delete(type);
return;
}
const list = this.handlers.get(type);
if (list) {
const index = list.indexOf(handler);
if (index > -1) list.splice(index, 1);
}
}

// 收到原始 message 后调用此方法分发
dispatch(message) {
try {
const data = typeof message === 'string' ? JSON.parse(message) : message;
const { type, payload } = data;
if (!type || typeof type !== 'string') return;

const handlers = this.handlers.get(type) || [];
handlers.forEach(fn => fn(payload, data));
} catch (e) {
console.warn('WSEventRouter: invalid message', message, e);
}
}
}

与 WebSocket 实例绑定

创建 WebSocket 后，可以直接把 onmessage 接入路由器的 dispatch 方法。

这样原生消息进入后，会统一经过解析、识别和派发流程。

const socket = new WebSocket('wss://api.example.com');
const router = new WSEventRouter();

// 绑定事件处理器
router.on('user:login', (payload) => {
console.log('用户登录成功', payload);
updateUI(payload.user);
});

router.on('chat:message', (payload) => {
renderMessage(payload);
});

// 关键：把原生 message 交给路由器
socket.onmessage = (event) => {
router.dispatch(event.data);
};

// 发送时也建议走统一格式
function send(type, payload) {
socket.send(JSON.stringify({ type, payload }));
}
send('chat:send', { text: 'Hello' });

增强实用性的处理方式

在基础分发能力之外，还可以补充一些增强特性，进一步提升可用性和健壮性。

• 支持通配符匹配：比如 router.on('user:*', handler) 捕获所有 user 相关事件，可用 type.startsWith('user:') 实现
• 错误隔离：每个 handler 执行加 try/catch，避免一个异常阻断后续处理器
• 一次执行：提供 once(type, handler) 方法，触发后自动移除
• 调试辅助：添加 debug(true) 开关，打印每次分发详情

落地时需要注意的前提

后端推送的消息结构必须稳定，这是路由器正常工作的基础。

同时，前端在解析消息之前，要先校验 type 字段是否存在且合法。这是路由正确分发的前提。

《夸克》非常好用的免费AI浏览器

下载APP查看