BroadcastChannel

BroadcastChannel界面表示给定来源的任何浏览上下文都可以订阅的命名通道。它允许在相同来源的不同文档 (在不同的窗口、选项卡、框架或 iframes 中) 之间进行通信。消息通过向侦听BroadcastChannel对象触发的message事件广播。

创建或加入频道

BroadcastChannel接口非常简单。客户端通过创建BroadcastChannel对象加入特定的广播频道。构造函数采用一个参数, 即通道的名称, 用于标识它。如果它是第一个连接到广播频道的, 则创建基础资源。

// Connection to a broadcast channel
var bc = new BroadcastChannel('test_channel');

发送消息

发布消息现在是微不足道的。在BroadcastChannel对象上调用 postMessage() 方法就足够了。此方法将任何对象作为参数。一个非常简单的例子是 DOMString 文本消息:

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

任何类型的对象都可以发送, 而不仅仅是DOMString。API 不会将任何语义与消息相关联, 因此应由通道的参与者了解预期的消息类型以及如何处理这些消息。

接收消息

发布消息后, 将message连接到此通道的每个BroadcastChannel对象发送消息事件。默认情况下没有任何操作, 但可以使用 onmessage 事件处理程序实现新函数。

bc.onmessage = function (ev) { console.log(ev); }

断开通道的连接

若要离开通道, 需要调用对象上的 close() 方法。这将断开对象和基础通道之间的链接, 并允许发生垃圾收集。

bc.close()

结论

广播通道 API 是一个非常简单的 API, 独立的接口允许跨上下文通信。它可用于检测同一站点源环境中其他选项卡中的用户操作, 例如当用户登录到帐户时。消息协议没有定义, 不同上下文中的不同文档需要自己实现它: 没有协商, 也没有规范中的要求。

浏览器兼容

浏览器兼容性