Shared Worker 比 localStorage + StorageEvent 更合适，因其提供零延迟双向消息通道、支持结构化数据传输、可维护全局状态并自动管理连接生命周期。
shared worker 可以让多个浏览器标签页共享同一个后台线程，天然适合实现跨标签页通信——不需要后端、不依赖本地存储轮询，就能做出一个真正实时的本地聊天室。
为什么 Shared Worker 比 localStorage + StorageEvent 更合适
很多人用 localStorage 配合 window.addEventListener('storage') 实现跨标签通信，但这种方式有明显缺陷：只能传递字符串、无法直接传对象或函数、事件触发有延迟、且无法主动响应。Shared Worker 提供的是真正的双向消息通道，每个标签页通过 port 与之连接，可随时 send() 和 onmessage，延迟接近零。
- 消息可携带结构化数据（如 {type: 'msg', user: 'A', text: 'hello'}）
- Worker 内可维护全局状态（比如在线用户列表、消息历史）
- 一个标签页关闭时，可通过 port.onclose 清理资源，避免内存泄漏
核心三步：注册、通信、广播
整个实现只需三个关键环节，无第三方依赖：
- 注册 SharedWorker：在页面脚本中 new SharedWorker('./chat-worker.js')，注意路径需同源且为绝对路径（如 /worker/chat-worker.js）
- 建立连接：调用 worker.port.start() 后，所有标签页都可通过该 port 发送和接收消息
- Worker 内广播逻辑：Worker 收到某端口发来的消息后，遍历所有已连接的 port（存入数组），逐个 postMessage 广播，跳过发送方本身
简易但健壮的 Worker 实现
chat-worker.js 内容可以非常轻量：
let ports = [];
self.onconnect = e => {
const port = e.ports[0];
ports.push(port);
port.onmessage = ({ data }) => {
// 广播给其他所有端口（不含自己）
ports.forEach(p => {
if (p !== port) p.postMessage(data);
});
};
port.onclose = () => {
ports = ports.filter(p => p !== port);
};
};
前端页面只需监听 port.message，并在发送前校验输入即可。无需心跳、无需重连——浏览器自动管理连接生命周期。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
小优化：支持昵称与时间戳
想让体验更完整？在发消息前由页面生成基础元数据：
- 用 sessionStorage 记住用户上次输入的昵称（关掉标签也不丢）
- 消息体统一包装为 {user, text, time: Date.now()}，Worker 不解析、只透传
- 前端收到后格式化 time 为 HH:mm，避免 Worker 做 UI 相关逻辑
这样职责清晰：Worker 只做路由，页面负责呈现和交互。整个聊天室代码加起来不到 100 行，却能真实跨标签收发消息。
