BroadcastChannel学习笔记

1.Broadcast Channel

在前端，我们经常会用postMessage来实现页面间的通信，但这种方式更像是点对点的通信。对于一些需要广播（让所有页面知道）的消息，用postMessage不是非常自然。Broadcast Channel 就是用来弥补这个缺陷的。

顾名思义，Broadcast Channel 会创建一个所有同源页面都可以共享的（广播）频道，因此其中某一个页面发送的消息可以被其他页面监听到。

Broadcast Channel 是一个非常好用的多页面消息同步 API，然而兼容性却不是很乐观。

1.1 使用构造函数创建一个实例

const bc = new BroadcastChannel('BroadcastChannel1');
1

可以接受一个DOMString作为 name，用以标识这个 channel。在其他页面，可以通过传入相同的 name 来使用同一个广播频道。

该 name 值可以通过实例的.name属性获得

console.log(bc.name);
1

1.2 监听消息

BroadcastChannel 创建完成后，就可以在页面监听广播的消息：

bc.onmessage = function(e) {
    console.log('receive:', e.data);
};
1
2
3

对于错误也可以绑定监听：

bc.onmessageerror = function(e) {
    console.warn('error:', e);
};
1
2
3

除了为.onmessage赋值这种方式，也可以使用addEventListener来添加message监听。

1.3 发送消息

BroadcastChannel 实例也有一个对应的postMessage用于发送消息：

bc.postMessage('hello')
1

1.4 关闭

bc.close();
1

2 window.postMessage

window.postMessage() 方法可以在不同源的情况下，任意页面之间进行通信，它提供了一种受控机制来规避跨域的限制。

2.1 发起通信

// 发起通信，约定好唯一标识，以及能够被监听到的页面源
window.opener.postMessage("updateLiveList", location.origin);
1
2

2.2 监听通信

// 监听message事件，如果有监听到消息内容就执行以下内容
window.addEventListener("message", (e) => {
  // 判断是否同源
  if (e.origin === location.origin) {
  
    // 接收到的消息是否为约定好的唯一标识
    if(e.data === "updateList") {
      // 刷新列表操作
      ...
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12

3. 总结

• Broadcast Channel 与 window.postMessage 都能进行跨页面通信
• Broadcast Channel 只能用于同源页面之间进行通信，而window.postMessage可以任何页面之间通信
• 基于 Broadcast Channel 的同源策略，它无法完成跨域的数据传输；跨域的情况，我们只能使用window.postMessage 来处理
• Broadcast Channel 更加安全，一般推荐使用 Broadcast Channel 来进行跨页面通信