html5中跨标签页共享websocket连接需通过sharedworker代理或broadcastchannel主从选举实现，配合clientid路由、状态广播及多级降级策略保障兼容性。
在HTML5中，WebSocket本身不能直接跨标签页共享连接，因为每个页面有独立的JavaScript上下文。要实现跨标签页的消息中转与实时状态共享，关键不是让每个页面都连一次WebSocket，而是让所有页面共用同一个连接实例，并通过协调机制统一收发、路由和隔离数据。
用SharedWorker做统一WebSocket代理
SharedWorker是目前最接近“真正共享连接”的方案——它运行在独立线程中，同源所有标签页均可与其通信，WebSocket连接就维持在这里。
- 所有页面通过
new SharedWorker('ws-worker.js')连接到同一个Worker - Worker内部创建并维护唯一WebSocket连接，负责重连、心跳、错误恢复
- 页面发送消息时，只向Worker传
{action: 'send', data: ...}；Worker转发至服务端，并将收到的响应按来源端口（port）回传 - Worker可用
self.clients.matchAll()获取当前活跃页面列表，支持广播（如登录态变更通知）或定向推送（如A页请求的响应只发回A页）
用BroadcastChannel + 主从选举协调连接
当SharedWorker不可用（如Safari旧版本），可退回到BroadcastChannel配合localStorage实现轻量级主控页机制。
- 首个打开的页面尝试写入
localStorage.setItem('ws_owner', Date.now().toString())，成功即成为主控页，启动WebSocket - 其他页面监听
storage事件，发现owner已存在，就不再建连，只注册本地消息处理器 - 主控页定期刷新owner时间戳（如每20秒），从属页检测超时（如>30秒无更新）则重新竞拍
- 主控页关闭前广播
{type: 'disconnect'}，触发其余页面重选新主控
消息路由与上下文隔离设计
即使连接共享，不同标签页的业务逻辑必须互不干扰。不能让A页订阅的订单更新，误推送给B页的聊天窗口。
- 每个页面初始化时生成唯一
clientId，随首次消息一起发给Worker或主控页 - 服务端返回数据时带上
targetId，Worker或主控页据此精准投递 - 前端接收消息后，校验
event.data.clientId === ownClientId再更新UI，避免错乱 - 对于全局状态（如用户登录态、未读数），由Worker或主控页统一维护并主动广播，各页面只做响应，不自行修改
兜底与兼容性处理
不是所有环境都支持SharedWorker或BroadcastChannel，需准备降级链路。
- iOS Safari 16.4以下、部分安卓WebView可能不支持SharedWorker → 回退到BroadcastChannel方案
- BroadcastChannel在某些隐私模式下被禁用 → 改用localStorage + 定时轮询（如每3秒检查一次时间戳）
- 极端情况（如所有API均不可用）→ 各页面独立连接，但服务端启用连接合并策略（如相同用户token只分配一个会话通道）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
