Broadcast Channel简介

在前端,我们经常会用postMessage来实现页面间的点对点通信,对于一些需要广播(让所有页面知道)的消息,用postMessage无法满足需求。Broadcast Channel就用来解决这个问题

架构

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 创建广播
const channel = new BroadcastChannel('channel')

// 监听广播
channel.onmessage = e => {
console.log(e.data)
}

// 广播事件
channel.postMessage('hello message')

// 关闭广播
channel.close()

兼容性

当前firefox和google chrome已经支持, IE 和safari还不支持

兼容性

polyfill支持

可以参考 github polyfill

polyfill原理: 所有页面都可以监听storage的事件变化

1
2
3
window.addEventListener('storage', e => {
console.log(`storage key changed: ${e.key}, oldValue is ${e.oldValue}, newValue is ${e.newValue}`)
})