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的资料请关注本站其它相关文章！