JavaScript 中怎么在 WebSocket 中封装统一的事件分发路由器-js教程-PHP中文网

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

javascript 中怎么在 websocket 中封装统一的事件分发路由器

在 WebSocket 应用中，直接在 onmessage 里写一堆 if-else 或 switch 判断消息类型，容易导致逻辑耦合、难以维护。封装一个统一的事件分发路由器，核心是把“收到消息 → 解析类型 → 派发给对应处理器”这一流程抽象出来，让业务代码只关注“做什么”，不关心“怎么收、怎么分”。

定义标准消息结构

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

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

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

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

实现轻量级事件路由器类

用一个类管理订阅与派发，避免全局污染，支持多实例：

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) 开关，打印每次分发详情