前端使用BroadcastChannel API实现浏览器标签页通信

今天介绍一个api, 他允许同源的不同浏览器窗口或者标签页, iframe下的不同文档之间相互通信, 在我们开发过程中, 有没有这样一种需求, 就是需要填写的资料很多, 产品经理想要将其做成落地列的形式打开一个标签页进行资料填写?
既然是标签页, 我们如何保证数据填写完, 列表或者哪些部分需要及时更新呢?
市场上针对这种需求有很多种方案去实现
比如:Service Worker, 定时器轮询, postMessage, websocket等等, 都可以实现上述需求, 今天我们单独针对BroadCast Channel API简单实现下通信
首先, 我们准备下列表页和添加数据的标签页

用户点击新增, 我们使用open打开一个新的标签页
const handleAdd = () => {
window.open(‘/new’)
};

新的标签页就显示一个输入框, 点击新增, 我们去更新列表页数据
大致页面画完了, 我们实现下标签页的通信功能
现在我们新建一个js文件, 在里面创建一个频道对象
const channel = new BroadcastChannel(‘lzr-add-channel’)
随后, 我们创建一个发送消息的函数
export function sendMsg(msg) {
channel.postMessage({
msg
})
}
我们接收一个参数, 就是我们发送的消息, 该消息可以是任意类型的数据
等数据填写完整, 我们调用一下该方法, 向相同频道发一条消息, 表示我已经新增完成了
const handleAddObj = () => {
sendMsg({
name: name.value
})
}
现在点击发送是没有任何效果的, 我们列表页如何监听到消息呢?
随后我们监听message, 如果有消息, 就执行callback回调
export function listenMsg(callback) {
channel.addEventListener(‘message’, (event) => {
callback && callback(event.data)
})
}
我们在列表页侦听下
listenMsg((data) => {
console.log(‘消息’, data)
})
打印结果如下

列表页这个时候, 就可以更新数据了
dataList.value.unshift(data.msg)

这样, 我们的功能就实现了
今天就讲解到这里, 我们下期见