17370845950

BroadcastChannel API 可实现同源页面间高效通信，通过创建相同名称的频道实例并使用 postMessage 发送消息，addEventListener 或 onmessage 接收消息，需在 beforeunload 时调用 close 释放资源，适用于登录状态同步、主题切换等场景。

BroadcastChannel API 是浏览器提供的原生跨页面通信方案，只要页面同源（协议、域名、端口相同），就能通过广播机制交换数据。它比用 localStorage 监听 storage 事件更高效，也比 postMessage 不需要持有窗口引用，适合做多标签页之间的状态同步。

创建频道并收发消息

使用 BroadcastChannel 的第一步是创建一个指定名称的频道实例，所有想通信的页面都必须使用相同的频道名。

• 创建频道：const channel = new BroadcastChannel('chat-room');，这里的 'chat-room' 就是频道标识。
• 发送消息：调用 postMessage() 方法，可以传字符串、对象、数组等任何能被结构化克隆的数据。
  channel.postMessage({ type: 'NEW_MESSAGE', text: 'Hello!' });
• 接收消息：通过监听 message 事件来获取其他页面发来的信息。
  channel.addEventListener('message', (event) => { console.log(event.data); });
  也可以用 onmessage 属性赋值的方式：
  channel.onmessage = (event) => { /* 处理逻辑 */ };

处理消息来源与资源释放

在接收到消息时，可以通过 event.source 属性判断消息是从哪个浏览上下文发出的，比如是来自另一个 Window 还是 SharedWorker，这在复杂场景下有助于区分消息来源。

当某个页面或组件不再需要监听广播时，应当主动关闭频道以释放系统资源，避免内存泄漏。

• 关闭频道：channel.close();
• 最佳实践是在页面卸载前调用 close，例如：
  window.addEventListener('beforeunload', () => { channel.close(); });

典型应用场景

BroadcastChannel 特别适合那些需要在多个标签页间保持状态一致的功能。

• 用户登录状态同步：在一个标签页登录后，通知其他所有标签页更新 UI，无需刷新。
• 主题切换联动：用户在 A 标签页切换了深色模式，B 标签页立即响应并改变主题。
• 共享数据缓存失效：当一个页面修改了关键配置，通过广播通知其他页面清空本地缓存。
• 简易协作提示：如多标签页编辑同一内容时，提示“其他窗口正在操作”。