关于前端:重学-JavaScript-API-Broadcast-Channel-API

8次阅读

共计 3583 个字符，预计需要花费 9 分钟才能阅读完成。

当咱们网页须要在不同的浏览器窗口之间共享数据时，可能须要应用 WebSocket 或 WebRTC 等技术。然而，这些技术会过于简单。而浏览器自带的 Broadcast Channel API 能够让咱们轻松地在不同浏览器窗口之间共享数据，而无需应用简单的技术。

本文将介绍 Broadcast Channel API 的根本和高级应用办法，并提供示例代码来帮忙读者更好地了解和应用该 API。

Broadcast Channel API 是一个浏览器 Web API，它容许咱们创立一个 可能将数据播送给多个文档或浏览器窗口的通道。通过该通道实现不同浏览器窗口之间的数据共享。咱们能够向该频道发送音讯，其余窗口则能够监听该频道以接管音讯。

应用 Broadcast Channel API 的根本办法非常简单。咱们只须要创立一个 BroadcastChannel 实例，并应用 postMessage() 办法向该频道发送音讯。以下是一个简略的例子：

// 创立一个名为 "my_channel" 的播送频道
const myChannel = new BroadcastChannel("my_channel");

// 向该频道发送音讯
myChannel.postMessage("Hello world!");

而后在其余窗口中监听该频道，以接管来自该频道的音讯。以下是一个简略的例子：

// 监听名为 "my_channel" 的播送频道
const myChannel = new BroadcastChannel("my_channel");

// 监听该频道并解决音讯
myChannel.onmessage = function (event) {console.log(event.data);
};

BroadcastChannel 实例还提供了一些其余的办法和事件，例如 close() 办法和 close 事件。具体介绍能够在 MDN Web Docs 上查看残缺文档。

Broadcast Channel API 还提供了一些高级应用办法，例如应用 ArrayBuffer 和 Transferable Objects 传递大型数据，应用 MessageEvent.source 属性来辨认音讯的起源，以及应用 MessageEvent.ports 属性通过 postMessage() 办法传递通信通道。
以下是一个应用 ArrayBuffer 和 Transferable Objects 传递数据的例子：

// 创立一个名为 "my_channel" 的播送频道
const myChannel = new BroadcastChannel("my_channel");

// 创立一个 ArrayBuffer，其中蕴含您要发送的数据
const buffer = new ArrayBuffer(1024);

// 向该频道发送蕴含 ArrayBuffer 的音讯
myChannel.postMessage(buffer, [buffer]);

而后在其余窗口中接管该音讯，并从 MessageEvent.data 属性中获取 ArrayBuffer：

// 监听名为 "my_channel" 的播送频道
const myChannel = new BroadcastChannel("my_channel");

// 监听该频道并解决音讯
myChannel.onmessage = function (event) {
  const buffer = event.data;
  // ...
};

Broadcast Channel API 还提供了其余高级用法，具体请查看文档。

Broadcast Channel API 兼容性良好，能够在大多数古代浏览器中应用。具体如下：

Chrome 54+ ✅
Firefox 38+ ✅
Safari 10+ ✅
Opera 41+ ✅
Edge 16+ ✅
iOS Safari 10.0-10.2+ ✅
Android Browser 67+ ✅
Chrome for Android 59+ ✅

⚠️ 须要留神的是，Broadcast Channel API 目前还不反对 Internet Explorer 浏览器。如果你的网站须要反对 IE 浏览器，可能须要应用其余技术或库来实现数据共享。

具体兼容性状况能够在 Can I Use 网站上查看。

其长处有以下几个 🍇：

传递数据：提供了一种牢靠的办法，使独立的 JavaScript 应用程序在同一浏览器同一站点内传递数据。
传输速度快：以高速连贯，提供更快的数据传输速度。
实时性：提供了实时，低提早的数据传输。
可靠性：可能在小的数据包失落或意外失落时进行复原。

不过，Broadcast Channel API 也存在以下毛病：

仅限同源：Broadcast Channel API 只能在同一浏览器同一站点内进行通信。这意味着，尽管不同的站点能够在同一浏览器内关上，但无奈应用 Broadcast Channel API 进行通信。
受浏览器反对限度：与大多数 Web API 一样，Broadcast Channel API 受到不同浏览器和平台的反对和兼容性限度。
须要共性的 API 应用：不同的 JavaScript 应用程序须要晓得如何应用 Broadcast Channel API 来共享数据。如果开发人员没有必要的常识，那么 API 就可能不如预期地应用。

接下来举一个理论开发案例。
案例需要 ：应用了 Broadcast Channel API 将雷同起源的不同浏览器选项卡之间的音讯播送到其余选项卡。所有选项卡都将显示同样的后果，并且如果有任何一种选项卡更改了后果，则其余选项卡也会显示更改后的后果。
实现代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Broadcast Channel Example</title>
  </head>
  <body>
    <h2>Broadcast Channel Example</h2>
    <div id="result">Result: <span></span></div>

    <script>
      // Create a new Broadcast Channel with name
      const channel = new BroadcastChannel("resultChannel");
      const resultEl = document.querySelector("#result span");

      // Option 1 Base
      // Listen for messages from the channel
      channel.onmessage = (e) => {resultEl.innerText = e.data;};

      // Option 2 - Using addEventListener
      // channel.addEventListener('message', e => {
      //    resultEl.innerText = e.data;
      // });

      // Listen for changes on the input
      const inputEl = document.createElement("input");
      inputEl.type = "text";

      inputEl.addEventListener("input", (e) => {
        const val = e.target.value;

        // Broadcast the change to other tabs
        channel.postMessage(val);
        resultEl.innerText = val;
      });

      // Insert the input element
      document.body.appendChild(inputEl);
    </script>
  </body>
</html>

在下面示例代码中，咱们创立了一个名为 resultChannel 的 Broadcast Channel，并应用 channel.postMessage() 函数向所有浏览器选项卡播送输入框更改的值。当有一种选项卡更改后果时，所有选项卡都会显示更改后的后果。
此外，咱们还演示了两种不同的监听音讯的办法（onmessage和addEventListener）以及如何将音讯发送到 Broadcast Channel 中。

举荐几个基于 Broadcast Channel API 封装的 Github 开源我的项目：

broadcast-channel – 该我的项目是一个简略易用的 Broadcast Channel API 封装，领有 1500+ ⭐️。
react-broadcast-channel – 该我的项目是一个 React 应用程序的 Broadcast Channel API 封装，领有 1300+ ⭐️。

Broadcast Channel API 是一种 Web API，可能 不便地在不同浏览器窗口之间共享数据。心愿本文可能帮忙读者更好地应用该 API。

正文完