基本用法
port1.postMessage向port2.onmessage发送消息,反过来同理
const { port1, port2 } = new MessageChannel();
port1.onmessage = function (event) {
console.log('收到port2的消息:', event.data); // 收到来自port2的消息: pong
};
port2.onmessage = function (event) {
console.log('收到port1的消息:', event.data); // 收到来自port1的消息: ping
port2.postMessage('pong');
};
port1.postMessage('ping');
worker应用
// worker1.js
let port1;
// 监听来自主线程的消息
self.onmessage = function (event) {
switch (event.data.command) {
case 'connect':
// MessageChannel的port1
port1 = event.ports[0];
// 监听来自port2的消息
port1.onmessage = function (event) {
console.log('worker1收到来自worker2的消息: ', event.data); // pong
};
break;
case 'forward':
// 消息转发给port2
port1.postMessage(event.data.message);
break;
default:
console.log('worker1收到来自主线程的消息:', event.data);
}
};
// worker2.js
let port2;
// 监听来自主线程的消息
self.onmessage = function (event) {
switch (event.data.command) {
case 'connect':
// MessageChannel的port2
port2 = event.ports[0];
// 监听来自port1的消息
port2.onmessage = function (event) {
console.log('worker2收到来自worker1的消息: ', event.data); // ping
};
port2.postMessage('pong');
break;
case 'forward':
// 消息转发给port1
port2.postMessage(event.data.message);
break;
default:
console.log('worker2收到来自主线程的消息:', event.data);
}
};
// index.js
const { port1, port2 } = new MessageChannel();
const worker1 = new Worker('worker1.js');
const worker2 = new Worker('worker2.js');
port1.onmessage = function (e) {
console.log('port1在主线程收到消息:', e.data); // 不会打印
};
// 向worker1发送connect的信息
worker1.postMessage(
{
command: 'connect',
},
[port1]
);
// 向worker2发送connect的信息
worker2.postMessage(
{
command: 'connect',
},
[port2]
);
// 向worker1发送forward的消息
worker1.postMessage({
command: 'forward',
message: 'ping',
});
此文章属转发内容,更多详情请看链接具体内容,如有侵权,私信联系删除。