websocket不直接支持微前端广播通信,需主应用统一建连并中转消息,子应用通过主应用api订阅/发送事件,采用type/target/event/payload协议格式实现本地分发。

WebSocket 本身不直接支持“微前端主子通信广播”这种业务场景,它只是一个底层的全双工通信通道。真正实现主子应用间广播式通信,需要在 WebSocket 基础上设计合理的协议、消息路由和状态管理机制。核心思路是:主应用作为 WebSocket 客户端(或服务端代理)统一收发消息,子应用通过主应用暴露的通信接口间接参与广播,而非每个子应用独立连 WebSocket。
主应用统一连接 + 消息中转
避免多个子应用各自建立 WebSocket 连接(浪费资源、难以管理、易冲突)。主应用负责建立并维持唯一 WebSocket 连接,子应用通过主应用提供的 API 发送/接收消息。
- 主应用初始化 WebSocket:const ws = new WebSocket('wss://your-api.com/ws')
- 主应用暴露全局通信方法(如 window.__microAppBus 或通过 props 注入):
- send({ type: 'BROADCAST', target: '*', payload: { event: 'theme-change', data: 'dark' } })
- on('theme-change', handler) —— 子应用订阅特定事件
定义轻量广播协议(JSON 格式)
约定消息结构,让主子应用能识别广播意图与作用范围。推荐使用带 type、target、event、payload 的格式:
- type: 'BROADCAST' 表示广播类型(区别于点对点或响应)
- target: '*' 表示所有子应用;'app-a' 表示指定子应用;['app-a','app-b'] 表示白名单
- event: 'user-login' 是语义化事件名,子应用按需监听
- payload 放具体数据,保持轻量、可序列化
子应用接入:只订阅,不直连
子应用加载后,调用主应用提供的注册方法,绑定事件监听器。主应用收到 WebSocket 消息后,根据 target 字段做本地分发(不是再发一遍 WebSocket):
- 子应用 A 执行:microApp.on('config-update', cb)
- 主应用收到 { type: 'BROADCAST', target: '*', event: 'config-update', payload: {...} }
- 主应用遍历已注册的子应用监听器,触发对应 cb,传入 payload
- 若子应用卸载,需调用 microApp.off('config-update', cb) 清理监听器,防内存泄漏
服务端配合:支持广播指令(可选但推荐)
如果后端 WebSocket 服务支持广播能力(如基于 Socket.IO、ws 库自定义),主应用可发送指令让服务端向所有客户端广播——适用于通知类强一致性场景(如系统维护提醒):
- 主应用发:{ cmd: 'BROADCAST_TO_ALL', event: 'system-maintenance', payload: { startsAt: '2024-06-15T22:00Z' } }
- 服务端收到后,向所有在线连接推送该消息(含主应用自身)
- 主应用收到后,仍按前述逻辑分发给各子应用(保持调用链统一)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











