shared worker 是构建跨前端多子系统全局事件总线的唯一可行底层载体，需同源部署、配合 indexeddb 持久化与端口管理，支持广播、点对点、订阅发布及自愈同步等生产级协同能力。
Shared Worker 本身不是事件总线，但它是构建跨前端多子系统（如多个 React 应用、Vue 子应用、iframe 页面或独立 SPA 标签页）全局事件总线的**唯一可行底层载体**。关键不在于“挂个 mitt 实例”，而在于用 Shared Worker 承载状态协调逻辑、消息路由与生命周期兜底，再配合 IndexedDB 持久化和端口管理，才能真正支撑生产级的多子系统协同。
必须满足的同源与部署前提
所有子系统页面必须严格同源：协议、域名、端口完全一致。例如：
✅ https://app.example.com/dashboard
✅ https://app.example.com/settings
❌ http://app.example.com（协议不一致）
❌ https://admin.example.com（域名不一致）
脚本路径需为可 fetch 的独立文件，如 /workers/event-bus.js，不能是内联 script 或 data URL。
生产环境必须启用 HTTPS；Safari 16.4+ 支持，iOS 16.5+ 起较稳定，低于此版本建议降级为 BroadcastChannel + localStorage 组合。
事件总线的核心结构设计
把 Shared Worker 当作一个轻量“服务端”来建模：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
入口统一：所有子系统调用
new SharedWorker('/workers/event-bus.js', { name: 'global-event-bus' })，浏览器自动复用同一实例 -
端口即会话：每个子系统连接后获得独立
MessagePort，Worker 在onconnect中缓存 port 并分配唯一clientId（推荐crypto.randomUUID()） -
路由即类型分发：Worker 解析每条消息的
type字段（如'ui:theme-change'、'auth:login'），执行对应动作——写入 IndexedDB、广播给其他 port、或转发至 WebSocket 后端 - 状态即事实源：所有共享状态（如当前用户、深色模式开关、未读消息数）不存内存，而是通过 IndexedDB 事务读写，确保刷新/重启后不丢
支持多子系统的关键通信模式
仅靠 postMessage 广播远远不够，需分场景处理：
-
全局广播事件（如主题切换）：Worker 写入 DB 后，遍历所有活跃 port，调用
port.postMessage({ type: 'broadcast', event: 'theme:changed', payload: 'dark' }) -
点对点响应事件（如子应用 A 查询购物车数量）：消息带
replyTo: clientId，Worker 处理完后只向该 port 回传{ type: 'cart:count', replyTo: 'app-a-123', data: 5 } -
订阅-发布事件（如监听订单更新）：子系统先发
{ type: 'subscribe', topic: 'order:updated' }，Worker 记录映射关系；后续服务端推送命中 topic 时，只推给已订阅的 port -
自愈式重同步：新子系统连接时主动发
{ type: 'sync-request' }，Worker 从 IndexedDB 读取全量状态快照，一次性推送{ type: 'synced', data: { theme: 'light', user: {...}, cart: [...] } }
避免踩坑的关键细节
很多“总线失效”问题其实出在基础操作遗漏：
- 每个子系统脚本中，必须在绑定
onmessage后立即调用port.start()，否则收不到任何消息 - Worker 内部不要用
let state = {}存共享数据——页面刷新、Worker 重启、休眠唤醒都会清空，且state.count++非原子，高并发必丢 - 页面卸载前应主动发送
{ type: 'disconnect', clientId: 'xxx' }，Worker 清理 port 引用，否则残留端口会导致postMessage报错 - 不要尝试把 WebSocket、EventSource 或 DOM 元素传进 Worker——它们不可序列化，
postMessage会静默失败
不复杂但容易忽略。Shared Worker 是浏览器给前端留下的、少有的能真正跨上下文“共用一个大脑”的机制。用好它，不是为了炫技，而是让多个子系统在用户无感时，像一个应用那样呼吸、同步、自愈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
