MessageChannel和BroadcastChannel

·  阅读 1963

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'}
复制代码

因为是广播,自然也不存在缓冲区的概念了,你错过了就没了,所以上面那个例子,先postMessage再绑定onmessage就接收不到消息了。

BroadcaChannel用在多个子页面监听父页面的情况下还是很好用的。

分类:
前端
标签: