SharedWorker 是实现多页面共享单个 WebSocket 连接的最优方案，因其可被同源多页面共用、仅维持一个 TCP 连接、支持消息广播与状态同步，且兼容性好、职责清晰。
用共享线程（Web Worker）管理多页面共享的单个 WebSocket 连接，核心思路是：把 WebSocket 实例从页面主线程中抽离，放到一个独立、持久、可跨页面通信的 Worker 中统一维护；各页面通过 postMessage 与该 Worker 交互，实现连接复用、消息分发和状态同步。
为什么不能直接在页面间共享 WebSocket 实例
WebSocket 对象是绑定在特定执行上下文（即页面/iframe）中的 DOM 对象，无法被序列化或跨 window/worker 直接传递。多个页面各自 new WebSocket() 会建立多个 TCP 连接，违背“单连接”目标，也增加服务端压力和状态管理复杂度。
用 SharedWorker 实现真正的跨页面共享
SharedWorker 是浏览器原生支持的、可被同源下多个页面（包括不同 tab、iframe）同时访问的 Worker，天然适合做连接中枢：
- 所有页面通过
new SharedWorker('ws-manager.js')获取同一个 Worker 实例引用 - Worker 内部只创建一次
new WebSocket(url)，并监听onmessage处理来自各页面的指令（如 connect/disconnect/send） - 收到 WebSocket 消息（
onmessage）后，Worker 主动调用port.postMessage()广播给所有已连接的页面端口 - 每个页面需调用
worker.port.start()并监听port.onmessage接收广播
关键细节处理
实际落地需解决几个典型问题：
-
连接生命周期管理：Worker 需记录活跃页面数（通过
connect/disconnect事件），当最后一页关闭时自动关闭 WebSocket，避免资源泄漏 -
消息路由与标识：页面发送消息时附带唯一
id或pageId，Worker 在广播消息时带上来源页标识，便于页面区分响应归属 - 重连逻辑下沉：断线重连策略（指数退避、心跳保活）全部放在 Worker 内实现，页面无感知；重连成功后自动恢复订阅状态
-
避免竞态：Worker 使用
self.addEventListener('connect', ...)统一管理端口，对每个 port 做独立 message handler，不共用闭包变量
替代方案：Service Worker + Background Sync（进阶场景）
若需支持离线消息缓存、后台唤醒或 PWA 场景，可用 Service Worker 替代 SharedWorker：
- 利用
clients.matchAll()向所有前台页面广播消息 - 配合
Cache API缓存待发消息，网络恢复后重发 - 注意：Service Worker 生命周期更不可控（可能被终止），需用
skipWaiting()和clients.claim()确保及时激活
SharedWorker 方案轻量、兼容性好（Chrome/Firefox/Safari 均支持），是当前最实用的多页面 WebSocket 共享方式。关键是把连接逻辑彻底隔离到 Worker，页面只做协议封装和 UI 响应，职责清晰，不易出错。
