BroadcastChannel方法跨浏览器窗口通信

1. 描述

同源 的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间可以通过 BroadcastChannel 相互通信。

2. 构造函数

通过 BroadcastChannel 类传入的参数创建实例，传入的参数将指定通道名称，在同源环境下该通道可以相互通信，一个名称只对应一个通道。

//	将创建的实例挂载到window上，可以在浏览器全局访问该方法
//	channelName即为指定的通道名称, 为字符串类型
window.broadcastChannel = new BroadcastChannel(channelName);
1
2
3

3. 通道名称

创建后的BroadcastChannel实例可以通过name属性来访问创建的通道名称。

//	broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
console.log(broadcastChannel.name);
1
2

4. 方法使用

1. postMessage 发送信息，以 message 事件的形式发送给每一个绑定到同一个通道名称的广播频道。

//	broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
//	message为Object类型的消息
broadcastChannel.postMessage(message);
1
2
3

2. onmessage 监听通道信息，当频道收到信息时，将触发message事件，在事件的data属性中获取同一通道发送的信息数据。

//	broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
//	可以通过增加监听事件，在event.data中获取到监听的广播信息。
broadcastChannel.addEventListener('message', (event) => {
	console.log(event.data);
});

//	broadcastChannel.onmessage = (event) => {};
1
2
3
4
5
6
7

3. close 关闭通道通信，让其被垃圾回收（必要的步骤，浏览器浏览器没有其他方式知道频道不再被需要）。

//	broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// 当完成后，断开与频道的连接
broadcastChannel.close();
1
2
3

4. messageerror 一条无法反序列化的消息时将会触发该事件。

//	broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
//	可以通过增加监听事件，在event.data中获取到监听的无法反序列化的广播信息。
broadcastChannel.addEventListener('messageerror', (event) => {
	console.log(event.data);
});

//	broadcastChannel.onmessageerror = (event) => {};
1
2
3
4
5
6
7

5. 题外话

在vue项目使用时，可以在根组件上通过BroadcastChannel创建的对象监听message和播报postMessage同源同信道的广播信息，组件销毁时通过close关闭通信并垃圾回收。项目内部通过eventBus、父子事件触发、注入方式等其他方式处理信息传递和监听，这样收口在一处，形成逻辑闭环。