浅谈 MessageChannel
MessageChannel
是一个用于在两个线程之间传递消息的接口。它允许两个线程之间进行通信,而不需要使用任何同步机制。换句话说,就是可以让两个不同的脚本运行在同一个文档的不同浏览器上下文中,(例如两个 iframe
,文档主体和一个 iframe
、使用 sharedWorker
的两个文档或两个 worker
)来直接通讯,在每端使用一个端口 port
通过双向频道 channel
向彼此传递消息。
MessageChannel
是以DOM Event
的形式发送消息,因此它属于异步的宏任务。
MessageChannel
如果使用addEventListener
方式监听message
事件,那么message
事件会在DOM Event
之后触发,并且在此之前需要手动调用start()
方法才能使消息流动,而onmessage
方式监听则会在DOM Event
之前触发,且自动调用start()
方法。
具体使用步骤如下
- 创建
MessageChannel
实例(通讯通道),new MessageChannel()
会返回两个端口 MessagePort 对象port1
、port1
port1
、port2
分别用于postMessage
发送消息和onmessage
接收消息MessageChannel
实现消息传递是深拷贝,因此消息需要是可以进行反序列化的大多数原始对象,像Symbole
、Function
则不能用作消息- 调用
close
方法关闭端口,将不能向该端口发送消息
示例
var channel = new MessageChannel();
console.log("🚀 ~ channel:", channel);
var port1 = channel.port1;
console.log("🚀 ~ port1:", port1);
var port2 = channel.port2;
console.log("🚀 ~ port2:", port2);
port1.onmessage = function (event) {
console.log("port1:" + event.data);
};
port2.onmessage = function (event) {
console.log("port2:" + event.data);
};
port1.postMessage("我是port1,发送给port2");
port2.postMessage("我是port2,发送给port1");
port1.close();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
编辑 (opens new window)
上次更新: 2024/08/26, 07:08:58