MessageChannel和BroadcastChannel-CSDN博客

MessageChannel

是一种点对点的通信方式，可以理解为管道，消息从一端进入另一端输出，最基本的使用方式如下：

const mc = new MessageChannel()

mc.port1.onmessage = function(eve){
    console.log(eve.data)
}
mc.port2.postMessage('hi jack')

// 'hi jack'
复制代码

基本使用方式了解了，那使用场景是什么呢？

最常见的就是iframes之间通信了，比如我有一个页面，里面嵌入了iframeA和iframeB，两个iframe之间通信我们可以通过top window来传送port，然后两个子页面就可以直接对话了。

// frameA
const mc = new MessageChannel()
window.parent.postMessage(1, 'http://localhost:8080', [mc.port1])

// top window
window.addEventListener('message', (eve) => {
    window.frames[1].postMessage(1, 'http://localhost:8081', [eve.ports[0]])
})

// frameB
var port

window.addEventListener('message', (eve) => {
    port = eve.ports[0]
})

btn.onclick = () => {
    port.postMessage({message: 'hi b, i am a'})
}
复制代码

MessageChannel最厉害地方在于居然可以被postMessage传输，因为它实现了transferable接口。同理top window再将这个port下方到iframeB，那么他们两个子页面就可以直接通信了。

deepClone

除了用作通信，MessageChannel还有一些hack的用法，比如有人用它来做deepClone

function deepClone(target) {
    return new Promise(resolve => {
        const channel = new MessageChannel()
        channel.port2.postMessage(target)
        channel.port1.onmessage = eve => {
            resolve(eve.data)
        }
    })
}

const obj = {
    name: '123',
    b: {
        c: 456
    },
    d: undefined
}

deepClone(obj).then(d => console.log(d))
复制代码

这个方法比较优秀的地方在于undefined的不会丢失，循环引用的对象也不会报错，循环点会被置为undefined，不过不能复制函数。

不知你们有没有注意到一个小细节，上面的代码里面我们是先执行了postMessage，在去添加onmessage监听，为什么还能接受到消息呢？我们再激进一点

const mc = new MessageChannel()
const { port1, port2 } = mc

port1.postMessage(123)
setTimeout(() => {
    port2.onmessage = (eve) => {
        console.log('received message: ', eve.data);
    }
}, 1000);

// 123
复制代码

数据依然可以被显示。我没有去查证，推测这里应该有一个缓冲区的概念，当数据被post以后，先存在缓冲区，当onmessage监听器一旦绑定就消费这些数据。

event loop

还有一个黑科技的用法就是，鉴于postMessage数据然后onmessage消费数据，这是一个异步任务，vue等框架用它来模拟nextTick的行为

// 用MessageChannel去做setImmediate的polyfill
// 原理是将新的message事件加入到原有的dom events之后
if (typeof MessageChannel === 'function') {
    var channel = new MessageChannel();
    var port = channel.port2;
    channel.port1.onmessage = nextHandler;
    port.postMessage(1);
}
复制代码

除了MessageChannel，其他还有setTimeout、setImmediate、MutationObsever、Promise.then等等可以实现类似效果。

BroastcastChannel

从名字可以看出来，这是一个广播形式的通道，所以就不是点对点了，而是类似于发布订阅的一种形式，只要有人订阅了我的消息，就可以接收到消息

const bc = new BroadcastChannel('channel1')
const bc2 = new BroadcastChannel('channel1')

bc2.onmessage = (eve) => {
    console.log('bc:', eve.data);
}

setTimeout(() => {
    bc.postMessage({message: 'hello'})
}, 1000);

// {message: 'hello'}
复制代码