HTML5多标签页下WebSocket需用BroadcastChannel协调主从连接、SharedWorker统一代理或localStorage时间戳选举主控页，并通过clientId实现消息路由与上下文隔离。
在HTML5多标签页场景下，WebSocket单例连接不能简单靠全局变量（如window.ws）实现跨页共享——因为每个标签页拥有独立的JavaScript执行上下文和内存空间。真正可行的方案是利用浏览器提供的跨上下文通信机制，结合连接状态协调，避免重复建连、消息错乱或资源浪费。
使用BroadcastChannel协调多页连接生命周期
BroadcastChannel 是现代浏览器原生支持的轻量级跨标签页通信API，适合用于通知连接状态变更（如“已连接”“准备关闭”）。主页面负责创建并维护WebSocket实例，其他页面通过频道监听状态，按需复用或退订。
- 主页面（首个打开的标签页）初始化WebSocket，并通过
bc.postMessage({type: 'connected', id: wsId})广播连接就绪 - 其他页面监听
message事件，收到后不再新建连接，转而注册本地消息处理器（如转发业务数据到自身UI） - 当主页面关闭时，发送
{type: 'disconnect'}，其余页面可触发重选主页面逻辑（例如用localStorage时间戳+竞态检测）
借助SharedWorker实现真正的连接共享
SharedWorker 提供独立于页面的共享脚本环境，所有同源标签页均可与其通信，天然适合作为WebSocket的统一代理层。页面只与Worker交互，由Worker负责连接管理、重连、广播消息。
- 页面通过
new SharedWorker('ws-worker.js')连接Worker，发送port.postMessage({action: 'send', data: msg}) - Worker内部维持唯一WebSocket连接，监听
onmessage分发消息，收到message事件后用port.postMessage()回传给对应页面 - 注意兼容性：Safari对SharedWorker支持较晚（iOS 16.4+/macOS 13.3+），需降级兜底（如fallback到BroadcastChannel + 页面自建）
用localStorage + 时间戳实现简易主控选举
在不依赖高级API的场景下，可用localStorage模拟分布式锁：各页面尝试写入带时间戳的“owner”键，以最新者为准，失败者转为从属角色。
立即学习“前端免费学习笔记（深入）”；
- 页面加载时读取
localStorage.getItem('ws_owner')，若为空或过期（如>30秒），尝试setItem('ws_owner', Date.now().toString()) - 写入成功即成为主控页，启动WebSocket；失败则监听
storage事件，等待主控页广播连接信息 - 主控页需定期刷新
ws_owner值（如每20秒），防止假死；从属页检测超时则重新竞拍
消息路由与上下文隔离设计
即使连接共享，不同标签页的业务逻辑仍需独立处理响应。不能让A页发起的请求收到B页订阅的数据。
- 每个页面建立连接时生成唯一
clientId（如crypto.randomUUID()），首次通信时向服务端注册 - 前端发送消息时携带
clientId，服务端按需路由；服务端推送消息也附带targetClientId，前端根据当前页ID过滤 - 页面卸载前调用
ws.send(JSON.stringify({action: 'unregister', clientId}))，服务端清理会话映射
