BroadcastChannel API（广播频道接口）

BroadcastChannel API(广播频道接口)是一种允许同一源下的多个浏览上下文相互通信的浏览器接口。任意标签页、内嵌框架或 Worker 只要创建同名频道对象,即可像收听同一个广播一样收发消息。

概述

用户常在多个标签页打开同一网站,这些页面之间默认相互隔离。过去要同步它们的状态,开发者往往借助本地存储的变化事件或轮询,写法繁琐且语义不清。BroadcastChannel 提供了一条专门的通信通道:创建时传入一个频道名,所有同源、同名的上下文便加入该频道,通过发送消息即可广播给除自己之外的全部成员。

核心原理

• 通过频道名建立逻辑分组,同源同名的上下文自动互联,无需知道彼此的引用。
• 调用发送方法即可把结构化数据广播出去,数据经由结构化克隆算法复制,支持对象、数组等复杂类型。
• 接收方监听消息事件获取内容,发送者自身不会收到自己发出的消息。
• 使用完毕后可关闭频道,断开与广播网络的连接以释放资源。

应用场景

最典型的场景是登录态同步:用户在一个标签页退出登录,其他标签页收到广播后立即清理界面并跳转。它也用于多标签页共享的主题切换、购物车更新、通知去重(多标签只弹一次),以及在主线程与 Worker 之间协调状态。相比本地存储事件方案,它语义更清晰,且不必写入磁盘。

常见问题

问:它能跨不同网站通信吗?答:不能。BroadcastChannel 严格受同源策略约束,只有协议、域名、端口完全一致的上下文才能加入同一频道,这也是其安全边界。

问:与 postMessage 有何区别?答:窗口间的 postMessage 需要持有目标窗口的引用并逐一发送,适合点对点通信;BroadcastChannel 则是一对多广播,发送方无需知道有哪些接收者,更适合多标签页的状态同步。