Broadcast Channel API - 允许浏览上下文与相同源的工作线程之间的基本通信

Broadcast Channel API（广播频道 API）允许浏览上下文（即窗口，选项卡，框架或 iframe）与相同源的工作线程之间的基本通信。

通过创建 BroadcastChannel 对象，您可以接收发布到该对象的任何消息。您不必维护对要与之通信的框架或工作线程的引用：他们可以通过构造自己的同名 BroadcastChannel 来“订阅”特定的频道，并且在通道之间进行双向通信。

Broadcast Channel 接口

建立或加入频道

客户端通过创建 BroadcastChannel 对象来加入广播频道。它的 constructor 接收一个参数：通道的名称。如果它是第一个连接到该广播频道名称的用户，则将创建基础频道。

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

发送消息

只要在创建的 BroadcastChannel 对象上调用 postMessage() 方法就可以了，这个方法可以接受任何对象作为参数。一个字符串消息的例子：

// 发送非常简单的消息的实例
bc.postMessage('This is a test message.');

可以发送任何类型的对象，而不仅仅是 DOMString。

API 并没有将任何语义关联到消息上，所以要由代码来知道要期待什么样的消息以及如何处理它们。

接收消息

发布消息后，会向与该通道连接的每个 BroadcastChannel 对象分派一个 message 事件。可以使用 onmessage 事件处理程序为该事件运行一个函数：

// 仅将事件记录到控制台的处理程序：
bc.onmessage = function (ev) { console.log(ev); }

断开频道

要离开频道，请在对象上调用 close() 方法。这将使对象与底层通道断开连接，从而可以进行垃圾回收。

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

结论

广播频道 API 的独立接口允许跨上下文通信。它可用于检测同一来源内其他选项卡中的用户操作，例如用户登录或注销时。

规范没有定义消息传递的协议，不同的浏览上下文需要自己实现，规范中对此没有要求。

规范

规范	状态	备注
HTML Living Standard The Broadcast Channel API 的定义	现行的标准	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• BroadcastChannel，实现该 API 的接口。