JavaScript Broadcast Channel API 教程：基础用法、高级特性与兼容性分析

正文

在网页开发中，若需在不同浏览器窗口间共享数据，开发者常考虑 WebSocket 或 WebRTC 等技术。然而，这些方案实现复杂度较高。相比之下，浏览器原生提供的 Broadcast Channel API 能够简化这一过程，无需引入复杂技术即可实现跨窗口数据共享。

本文将深入解析 Broadcast Channel API 的基础与高级用法，并辅以示例代码，协助读者掌握该 API 的实际应用。

🏝 什么是 Broadcast Channel API？

Broadcast Channel API 是一项浏览器 Web API，允许创建广播通道，将数据分发给多个文档或浏览器窗口。通过此通道，不同窗口可实现数据共享：一个窗口发送消息，其他窗口监听该频道以接收信息。

🎨 如何使用 Broadcast Channel 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 网站查询。

📋 Broadcast Channel API 优缺点

其优点包括以下方面 🍇：

数据传递：提供了一种可靠机制，使同一浏览器、同一站点内的独立 JavaScript 应用能够传递数据。
传输速度：通过高速连接提供更快的数据传输体验。
实时性：支持实时、低延迟的数据传输。
可靠性：具备在少量数据包丢失或意外中断时恢复的能力。

然而，Broadcast Channel API 也存在以下局限性：

同源限制：Broadcast Channel API 仅允许在同一浏览器、同一站点内进行通信。这意味着，即使不同站点在同一浏览器中打开，也无法使用该 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。

以上就是 JavaScript Broadcast Channel API使用学习的详细内容，更多关于 JavaScript Broadcast Channel API的资料请关注本站其它相关文章！

JavaScript Broadcast Channel API 使用指南：跨窗口通信实战

正文