Broadcast Channel API

Baseline 已广泛支持

此特性已经十分成熟,可在许多设备和浏览器版本上使用。自 2022 年 3 月起,它已在各浏览器中可用。

注意:此功能在 Web Workers 中可用。

Broadcast Channel API 允许在同一 上的 浏览上下文(即 窗口标签页框架iframe)与 worker 之间进行基本通信。

注意: 确切地说,通信允许在使用相同 存储分区的浏览上下文之间进行。存储首先根据顶级站点进行分区——因此,例如,如果您有一个在 a.com 上打开的页面,其中嵌入了一个来自 b.com 的 iframe,而另一个页面打开到 b.com,则该 iframe 无法与第二个页面通信,尽管它们在技术上是同源的。但是,如果第一个页面也在 b.com 上,则 iframe 可以与第二个页面通信。

通过创建 BroadcastChannel 对象,您可以接收发布到该对象的任何消息。您不必维护与您希望通信的帧或 worker 的引用:它们可以通过使用相同的名称构造自己的 BroadcastChannel 来“订阅”特定的频道,并在它们之间实现双向通信。

The principle of the Broadcast Channel API

Broadcast Channel 接口

创建或加入频道

客户端通过创建 BroadcastChannel 对象来加入广播频道。其 构造函数接受一个参数:频道的 名称。如果它是第一个连接到该广播频道名称的客户端,则会创建底层频道。

js
// Connection to a broadcast channel
const bc = new BroadcastChannel("test_channel");

发送消息

在创建的 BroadcastChannel 对象上调用 postMessage() 方法就足够了,该方法接受任何对象作为参数。例如字符串消息

js
// Example of sending of a very simple message
bc.postMessage("This is a test message.");

发送到频道的数据使用 结构化克隆算法进行序列化。这意味着您可以安全地发送各种数据对象,而无需自己进行序列化。

API 不会为消息关联任何语义,因此代码需要知道要接收哪种消息以及如何处理它们。

接收消息

当发布消息时,会向连接到该频道的每个 BroadcastChannel 对象分派一个 message 事件。可以使用 onmessage 事件处理程序为该事件运行一个函数。

js
// A handler that only logs the event to the console:
bc.onmessage = (event) => {
  console.log(event);
};

断开频道连接

要离开频道,请在该对象上调用 close() 方法。这会将对象与底层频道断开连接,允许垃圾回收。

js
// Disconnect the channel
bc.close();

总结

Broadcast Channel API 的自包含接口允许跨上下文通信。它可以用来检测同一源下其他标签页中的用户操作,例如用户登录或注销。

消息协议未定义,不同的浏览上下文需要自己实现;规范中没有协商或要求。

接口

BroadcastChannel

表示任何给定 浏览上下文都可以订阅的命名频道。

规范

规范
HTML
# broadcasting-to-other-browsing-contexts

浏览器兼容性

另见