Broadcast Channel API

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Broadcast Channel API 可以实现同源下浏览器不同窗口，Tab 页，frame 或者 iframe 下的浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。

备注： 此特性在 Web Worker 中可用。

广播频道会被命名和绑定到指定的源。

通过创建一个监听某个频道下的 BroadcastChannel 对象，你可以接收发送给该频道的所有消息。一个有意思的点是，你不需要再维护需要通信的 iframe 或 worker 的索引。它们可以通过构造 BroadcastChannel 来简单地“订阅”特定频道，并在它们之间进行全双工（双向）通信。

The principle of the Broadcast Channel API

Broadcast Channel 接口

创建或加入某个频道

BroadcastChannel 接口非常简单。通过创建一个 BroadcastChannel 对象，一个客户端就加入了某个指定的频道。只需要向构造函数传入一个参数：频道名称。如果这是首次连接到该广播频道，相应资源会自动被创建。

// 连接到广播频道
var bc = new BroadcastChannel("test_channel");

发送消息

现在发送消息就很简单了，只需要调用 BroadcastChannel 对象上的postMessage() 方法即可。该方法的参数可以是任意对象。最简单的例子就是发送 DOMString 文本消息：

// 发送简单消息的示例
bc.postMessage("This is a test message.");

不只是 DOMString，任意类型的对象都可以被发送。此 API 不会将消息与任何的语义相关联，因此通道的参与者有必要知道预期的消息类型和消息的消费方式。

接收消息

当消息被发送之后，所有连接到该频道的 BroadcastChannel 对象上都会触发 message 事件。该事件没有默认的行为，但是可以使用 onmessage 事件处理程序来定义一个函数来处理消息。

// 简单示例，用于将事件打印到控制台
bc.onmessage = function (ev) {
  console.log(ev);
};

与频道断开连接

通过调用 BroadcastChannel 对象的 close() 方法，可以离开频道。这将断开该对象和其关联的频道之间的联系，并允许它被垃圾回收。

// 断开频道连接
bc.close();

总结

Broadcast Channel API 是一个非常简单的 API，内部包含了跨上下文通讯的接口。它可用于检测同源网站环境中其他浏览器选项卡下的用户操作，例如当用户登录到帐户时。没有定义消息传输协议，故不同上下文中的不同文档需要自己实现它：规范没有对此提出协议或要求。

规范

Specification
HTML Standard # broadcasting-to-other-browsing-contexts

浏览器兼容性

BCD tables only load in the browser

参见

接口实现：BroadcastChannel。