浏览器通信：Broadcast Channel和PostMessage

发布于 2024-05-03  1312 次阅读

Broadcast Channel 是什么？

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

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

下面就来速览一下它的使用方法。

如何使用？

Broadcast Channel 的 API 非常简单易用。

创建

首先我们会使用构造函数创建一个实例：

const bc = new BroadcastChannel('demo');

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

There is one single channel with this name for all browsing contexts with the same origin.

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

console.log(bc.name);
// demo

监听消息

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

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

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

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

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

发送消息

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

bc.postMessage('hello')

关闭

可以看到，上述短短几行代码就可以实现多个页面间的广播通信，非常方便。而有时我们希望取消当前页面的广播监听：

  • 一种方式是取消或者修改相应的'message'事件监听
  • 另一种简单的方式就是使用 Broadcast Channel 实例为我们提供的close方法。
bc.close();

两者是有区别的：

取消'message'监听只是让页面不对广播消息进行响应，Broadcast Channel 仍然存在；而调用close方法这会切断与 Broadcast Channel 的连接，浏览器才能够尝试回收该对象，因为此时浏览器才会知道用户已经不需要使用广播频道了。

window.postMessage

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件。传递给 window.postMessage() 的参数（比如 message）将通过消息事件对象暴露给接收消息的窗口。

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow

其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。message

将要发送到其他 window 的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。targetOrigin

通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用 postMessage 传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的 origin 属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的 targetOrigin，而不是 *。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。transfer 可选

是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

The dispatched event

执行如下代码，其他 window 可以监听分发的 message:

JSCopy to Clipboard

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  // For Chrome, the origin property is in the event.originalEvent
  // object.
  // 这里不准确，chrome 没有这个属性
  // var origin = event.origin || event.originalEvent.origin;
  var origin = event.origin;
  if (origin !== "http://example.org:8080") return;

  // ...
}

message 的属性有：data

从其他 window 中传递过来的对象。origin

调用 postMessage 时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如“https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。请注意，这个 origin 不能保证是该窗口的当前或未来 origin，因为 postMessage 被调用后可能被导航到不同的位置。source

对发送消息的窗口对象的引用; 你可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。

欢迎欢迎~热烈欢迎~