阐述 BroadcastChannel API 如何在不同浏览器标签页、窗口、iframes 或 Web Workers 之间进行实时通信。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！我是今天的主讲人，咱们今天聊聊 BroadcastChannel API，这玩意儿就像个浏览器内部的广播电台，能让你的网页在不同的标签页、窗口、iframe 甚至 Web Workers 之间实时聊天，简直是居家旅行、开发神器。

一、啥是 BroadcastChannel API？

想象一下，你打开了同一个网站的两个标签页，一个标签页更新了数据，你希望另一个标签页也能马上知道，并同步更新，怎么办？以前可能要靠 localStorage、cookies、或者服务器推送，但这些都比较麻烦。

BroadcastChannel API 就为此而生，它提供了一种简单的方式，让同一个源（协议、域名、端口都相同）下的不同浏览上下文（浏览上下文就是标签页、窗口、iframe 和 Web Workers 这些能运行 JavaScript 的地方）之间进行单向通信。

你可以把它想象成一个公共频道，所有加入这个频道的人都能听到别人说的话，但只能听到，不能指定对谁说。

二、BroadcastChannel 的基本用法

使用 BroadcastChannel API 非常简单，只需要三个步骤：

创建频道： 使用 new BroadcastChannel(channelName) 创建一个频道，channelName 是频道的名称，同一个名称的频道才能互相通信。
发送消息： 使用 channel.postMessage(message) 发送消息，message 可以是任何 JavaScript 对象，会被自动序列化。
接收消息： 使用 channel.onmessage 监听消息，当收到消息时，会触发 onmessage 事件，事件对象 event.data 包含了接收到的消息。
关闭频道（可选）： 使用 channel.close() 关闭频道，关闭后就不能再发送和接收消息了。

下面我们用代码来演示一下：

示例代码：

// 创建频道
const channel = new BroadcastChannel('my-channel');

// 发送消息
document.getElementById('sendButton').addEventListener('click', () => {
  const message = document.getElementById('messageInput').value;
  channel.postMessage(message);
  console.log('发送消息:', message);
});

// 接收消息
channel.onmessage = (event) => {
  const message = event.data;
  document.getElementById('receivedMessages').innerHTML += `<p>收到消息: ${message}</p>`;
  console.log('收到消息:', message);
};

// 关闭频道 (一般不需要手动关闭，页面关闭时会自动关闭)
// channel.close();

//HTML部分
// <input type="text" id="messageInput">
// <button id="sendButton">发送消息</button>
// <div id="receivedMessages"></div>

代码解释：

new BroadcastChannel('my-channel') 创建了一个名为 my-channel 的频道。
channel.postMessage(message) 发送了消息 message 到频道。
channel.onmessage = (event) => { ... } 监听了 message 事件，当收到消息时，会将消息显示在页面上。

三、BroadcastChannel 的应用场景

BroadcastChannel API 有很多应用场景，下面列举一些常见的：

实时同步数据： 当一个标签页更新了数据（例如购物车数量、用户状态），可以立即通知其他标签页同步更新。
跨标签页的登录状态同步： 用户在一个标签页登录后，可以通知其他标签页自动登录，避免用户重复登录。
页面间的命令通信： 一个标签页可以发送命令给其他标签页，例如刷新页面、播放音乐等。
Web Worker 与页面间的通信： Web Worker 可以通过 BroadcastChannel 与页面进行通信，实现更复杂的后台任务。
多窗口应用： 在一些需要多窗口协同工作的应用中，可以使用 BroadcastChannel 实现窗口间的通信。

四、BroadcastChannel 的优缺点

优点：

简单易用： API 非常简单，容易上手。
实时性好： 消息几乎是实时发送和接收的。
无需服务器： 通信完全在浏览器内部进行，无需服务器参与。
支持多种浏览上下文： 支持标签页、窗口、iframe 和 Web Workers。

缺点：

单向通信： 只能单向发送消息，不能回复消息。
不支持跨域： 只能在同一个源下进行通信。
可靠性不高： 消息可能会丢失，没有确认机制。
不支持持久化： 页面关闭后，频道也会关闭，消息不会保存。
广播风暴： 如果频道内有大量的参与者，可能会导致广播风暴，影响性能。

五、BroadcastChannel 的高级用法

发送复杂对象： postMessage 方法可以发送任何 JavaScript 对象，包括数组、对象、甚至函数（虽然不建议发送函数）。

const channel = new BroadcastChannel('my-channel');
const data = {
  name: '张三',
  age: 18,
  skills: ['JavaScript', 'HTML', 'CSS']
};
channel.postMessage(data);

channel.onmessage = (event) => {
  const receivedData = event.data;
  console.log('收到复杂对象:', receivedData);
  console.log('姓名:', receivedData.name);
  console.log('年龄:', receivedData.age);
  console.log('技能:', receivedData.skills);
};

结合 Web Worker 使用： Web Worker 是在后台运行的 JavaScript 脚本，可以执行一些耗时的任务，而不会阻塞主线程。可以使用 BroadcastChannel 实现 Web Worker 与页面之间的通信。

页面代码 (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>Web Worker 和 BroadcastChannel</title>
</head>
<body>
  <button id="startWorker">启动 Web Worker</button>
  <div id="messages"></div>

  <script>
    const channel = new BroadcastChannel('worker-channel');
    const messagesDiv = document.getElementById('messages');
    const startWorkerButton = document.getElementById('startWorker');
    let worker;

    startWorkerButton.addEventListener('click', () => {
      if (!worker) {
        worker = new Worker('worker.js'); // 假设 worker.js 存在
        console.log('Web Worker 启动');
      }
    });

    channel.onmessage = (event) => {
      const message = event.data;
      messagesDiv.innerHTML += `<p>来自 Web Worker: ${message}</p>`;
    };
  </script>
</body>
</html>

Web Worker 代码 (worker.js):

const channel = new BroadcastChannel('worker-channel');

setInterval(() => {
  const randomNumber = Math.random();
  channel.postMessage(`随机数: ${randomNumber}`);
}, 1000);

代码解释：

页面和 Web Worker 都创建了一个名为 worker-channel 的频道。
Web Worker 每隔 1 秒生成一个随机数，并将其发送到频道。
页面监听频道的消息，并将收到的随机数显示在页面上。

使用 structuredClone 处理复杂数据: 有时候，你可能需要传递一些无法直接通过 postMessage 传递的数据，例如包含循环引用的对象。这时可以使用 structuredClone 克隆数据，然后再传递。

const channel = new BroadcastChannel('my-channel');

// 创建一个包含循环引用的对象
const obj = {
  name: 'Example',
  self: null
};
obj.self = obj; // 循环引用

try {
  // 尝试直接发送对象 (这通常会失败)
  channel.postMessage(obj);
} catch (error) {
  console.error('发送对象失败:', error);

  // 使用 structuredClone 克隆对象
  const clonedObj = structuredClone(obj);
  channel.postMessage(clonedObj);
  console.log('使用 structuredClone 发送对象');
}

channel.onmessage = (event) => {
  console.log('收到克隆的对象:', event.data);
};

使用 MessageChannel 进行双向通信 (虽然不是 BroadcastChannel 的直接用法): 虽然 BroadcastChannel 本身是单向的，但你可以结合 MessageChannel 实现更复杂的双向通信模式。 MessageChannel 创建了一个通信管道，包含两个端口，每个端口都可以发送和接收消息。你可以使用 BroadcastChannel 将 MessageChannel 的端口传递给其他浏览上下文。

页面 1 代码:

const channel = new BroadcastChannel('my-channel');
const messageChannel = new MessageChannel();

// 监听 MessageChannel 的端口
messageChannel.port1.onmessage = (event) => {
  console.log('页面 1 收到消息:', event.data);
};

// 将 MessageChannel 的 port2 发送给其他页面
channel.postMessage({ type: 'port', port: messageChannel.port2 }, [messageChannel.port2]); // 注意 transferList 的用法

// 发送消息给页面 2
document.getElementById('sendToPage2').addEventListener('click', () => {
  messageChannel.port1.postMessage('来自页面 1 的消息');
});

页面 2 代码:

const channel = new BroadcastChannel('my-channel');
let myPort;

channel.onmessage = (event) => {
  if (event.data.type === 'port') {
    myPort = event.data.port;

    // 监听 MessageChannel 的端口
    myPort.onmessage = (e) => {
      console.log('页面 2 收到消息:', e.data);
    };

    // 发送消息给页面 1
    document.getElementById('sendToPage1').addEventListener('click', () => {
      myPort.postMessage('来自页面 2 的消息');
    });

    // 启动端口 (必须调用)
    myPort.start();
  }
};

关键点:

transferList 参数: postMessage 的第二个参数 transferList 用于指定要转移所有权的对象的数组。在上面的例子中，我们将 messageChannel.port2 的所有权转移给了接收方。转移所有权意味着发送方将无法再使用该对象。这对于某些类型的对象（例如 MessagePort）是必需的。
port.start(): MessagePort 默认是不活动的，需要调用 start() 方法才能开始接收消息。

六、BroadcastChannel 的兼容性

BroadcastChannel API 的兼容性还是不错的，主流浏览器都支持：

浏览器	支持版本
Chrome	54+
Firefox	50+
Safari	10.1+
Edge	79+
Opera	41+

对于不支持 BroadcastChannel API 的浏览器，可以使用一些 polyfill 来提供兼容性支持，但这些 polyfill 通常会使用 localStorage 或 cookies 来模拟 BroadcastChannel 的行为，性能和实时性可能会受到影响。

七、BroadcastChannel 的注意事项

安全性： 由于 BroadcastChannel 是广播式的，任何加入频道的人都能收到消息，因此不要在频道中发送敏感信息，例如密码、token 等。
性能： 如果频道内有大量的参与者，可能会导致广播风暴，影响性能。可以使用一些策略来减少广播的范围，例如只广播必要的信息，或者使用多个频道来隔离不同的业务。
错误处理： BroadcastChannel API 没有提供错误处理机制，如果发送消息失败，或者接收消息出错，不会有任何提示。需要在代码中进行适当的错误处理。
消息丢失： BroadcastChannel API 不能保证消息一定会被成功发送和接收，消息可能会丢失。如果需要可靠的通信，可以使用其他方案，例如 WebSocket。
避免循环引用: 在传递复杂对象时，要特别注意避免循环引用，否则可能导致 postMessage 失败。使用 structuredClone 可以解决这个问题。

八、BroadcastChannel 与其他通信方式的比较

通信方式	优点	缺点	适用场景
BroadcastChannel	简单易用，实时性好，无需服务器	单向通信，不支持跨域，可靠性不高，不支持持久化，可能导致广播风暴	实时同步数据，跨标签页的登录状态同步，页面间的命令通信
localStorage	简单易用，支持持久化	需要轮询检测，实时性差，不支持复杂对象，有大小限制，可能导致竞争条件	少量数据的持久化存储，简单的跨标签页通信
cookies	简单易用，支持持久化，可以设置过期时间	有大小限制，安全性较差，每次 HTTP 请求都会携带，影响性能	少量数据的持久化存储，用户身份验证
WebSocket	双向通信，实时性好，可靠性高	需要服务器支持，实现复杂	需要实时双向通信的应用，例如在线聊天、实时游戏
MessageChannel	可以进行双向通信，允许在不同域之间安全地传递消息和对象（通过 postMessage 的 transfer 参数）	需要更复杂的设置，不如 BroadcastChannel 简单，主要用于更精细的通信控制和数据转移	用于更复杂的组件之间的通信，特别是需要传递对象所有权的场景，例如 Web Components 之间的通信
postMessage (window.postMessage)	允许跨域通信，简单易用	需要手动管理消息的发送和接收，容易出错	跨域 iframe 通信，父窗口和子窗口之间的通信
SharedWorker	允许多个标签页共享同一个 Worker 实例，可以用于共享状态和数据	实现相对复杂，需要注意线程安全问题	需要在多个标签页之间共享数据和状态，例如在线协作应用

九、总结

BroadcastChannel API 是一个简单而强大的工具，可以方便地实现同一个源下的不同浏览上下文之间的实时通信。虽然它有一些缺点，但在很多场景下仍然是一个不错的选择。希望今天的讲解能帮助你更好地理解和使用 BroadcastChannel API。

记住，选择哪种通信方式，取决于你的具体需求和场景。没有银弹，只有最适合的工具。

今天的讲座就到这里，谢谢大家！如果有什么问题，欢迎随时提问。

发表回复 取消回复

发表回复取消回复