Channel Messaging API - 允许两个独立的脚本直接进行通信

Channel Messaging API 允许两个独立的脚本在不同的浏览上下文中运行，并连接到同一个文档上（例如，两个 IFrame，或主文档和一个 IFrame，两个文档通过一个 SharedWorker，或两个工作线程），直接进行通信，通过双向通道（或管道）在两端的端口相互传递消息。

通道消息传递概念和用法

消息通道是使用 MessageChannel() 构造函数创建的。一旦创建，通道的两个端口可以通过 MessageChannel.port1 和 MessageChannel.port2 属性进行访问（这两个属性都返回 MessagePort 对象）。创建通道的应用程序使用 port1，而端口另一端的应用程序使用 port2 - 你向 port2 发送消息，并使 window.postMessage 以及两个参数（要发送的消息和要转移所有权的对象，在本例中是端口本身）将端口转移到其他浏览上下文。

当这些可转移的对象被转移时， 它们在原来所属的上下文上就不能再使用了。一个端口在被发送之后，就不能再被原来的上下文使用了。

另一个浏览上下文可以使用 MessagePort.onmessage 监听消息，并使用事件的 data 属性抓取消息的内容。然后你可以使用 MessagePort.postMessage 向原始文档发送消息来响应。

当你想停止向通道发送消息时，你可以调用 MessagePort.close 来关闭端口。

在使用通道消息传递中找到有关如何使用此 API 的更多信息。

通道消息传递接口

MessageChannel

创建一个新的消息通道以发送消息。

MessagePort

控制消息通道上的端口，允许从一个端口发送消息，并侦听它们到达另一个端口的情况。

PortCollection

一个包含 MessagePort 的数组；这是一种实验性解决方案，允许将消息同时广播到多个端口。

实例

• 我们在 Github 上发布了一个通道消息传递的基本演示（也可以在线运行），它展示了一个非常简单的页面和嵌入式 <iframe> 之间的单一消息传输。

• 你也可以看到一个多消息演示（在线运行），它的设置稍微复杂一些，可以在主页面和 IFrame 之间发送多个消息。

规范

规范	状态	备注
HTML Living Standard Channel messaging 的定义	现行的标准	-

MessageChannel

桌面浏览器兼容性

移动浏览器兼容性

1. 必须从 worker_threads 模块导入。

MessagePort

桌面浏览器兼容性

移动浏览器兼容性

1. 是一个 Node EventEmitter 而不是 DOM EventTarget。

相关链接

• 使用频道消息
• Web Workers API
• Broadcast Channel API