JS `BroadcastChannel` API：同源不同标签页间的实时通信

各位观众老爷，晚上好！我是你们的老朋友，BUG终结者，今天给大家带来一场关于BroadcastChannel的“相亲相爱一家人”技术讲座。

主题：JS BroadcastChannel API：同源不同标签页间的实时通信

咱们程序员，最头疼的事情之一就是不同标签页之间的通信了。想象一下，用户在一个标签页登录了，你还得想办法让其他标签页也知道，这可不是件容易的事情。传统的解决方案，比如localStorage、cookies、SharedWorker，各有各的缺点，用起来都像是在钢丝上跳舞，一不小心就摔个狗啃泥。

但是！今天我们有了新玩具——BroadcastChannel！它就像一个广播站，只要在同源的不同标签页注册了频道，就可以互相发送消息，就像在同一个微信群里聊天一样方便。

什么是BroadcastChannel？

BroadcastChannel API 提供了一种非常简单的方式来实现同源（相同协议、域名和端口）的浏览器上下文（例如，标签页、窗口、iframe）之间的基本单向通信。

你可以把它想象成一个电台，一个标签页负责广播，其他标签页负责接收。

BroadcastChannel的优点

简单易用: API 简洁明了，上手容易。
实时性好: 消息几乎是实时传递的，延迟非常低。
同源限制: 确保了安全性，避免了跨域攻击。
垃圾回收友好: 当所有连接到频道的BroadcastChannel对象都被垃圾回收时，频道也会被自动关闭。

BroadcastChannel的基本用法

BroadcastChannel 只有两个核心方法：

postMessage(message): 发送消息。 message 可以是任何可以被序列化的 JavaScript 对象。
onmessage: 接收消息的事件处理函数。

还有个构造函数：new BroadcastChannel(channelName)，channelName是频道名称，相当于微信群的名称。

代码示例：一个简单的聊天室

我们来做一个最简单的聊天室，让大家感受一下BroadcastChannel的魅力。

页面1 (sender.html):

<!DOCTYPE html>
<html>
<head>
  <title>发送者</title>
</head>
<body>
  <h1>发送消息</h1>
  <input type="text" id="messageInput">
  <button id="sendButton">发送</button>

  <script>
    const channel = new BroadcastChannel('my-channel'); // 创建频道
    const messageInput = document.getElementById('messageInput');
    const sendButton = document.getElementById('sendButton');

    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      channel.postMessage(message); // 发送消息
      messageInput.value = ''; // 清空输入框
    });

    channel.onmessage = (event) => {
      console.log('发送者收到消息：', event.data); // 发送者也可以收到自己发送的消息
    };
  </script>
</body>
</html>

页面2 (receiver.html):

<!DOCTYPE html>
<html>
<head>
  <title>接收者</title>
</head>
<body>
  <h1>接收消息</h1>
  <div id="messageArea"></div>

  <script>
    const channel = new BroadcastChannel('my-channel'); // 创建频道，必须和发送者频道名称一致
    const messageArea = document.getElementById('messageArea');

    channel.onmessage = (event) => {
      const message = event.data;
      const messageElement = document.createElement('p');
      messageElement.textContent = message;
      messageArea.appendChild(messageElement);
    };
  </script>
</body>
</html>

打开两个页面（sender.html 和 receiver.html），在 sender.html 的输入框中输入消息，点击发送按钮，你会发现 receiver.html 页面会实时显示你发送的消息！

是不是很简单？简直比发微信还方便！

进阶用法：发送复杂对象

BroadcastChannel不仅可以发送字符串，还可以发送任何可以被序列化的 JavaScript 对象，比如数组、对象等等。

修改 sender.html：

<!DOCTYPE html>
<html>
<head>
  <title>发送者</title>
</head>
<body>
  <h1>发送消息</h1>
  <input type="text" id="messageInput">
  <button id="sendButton">发送</button>

  <script>
    const channel = new BroadcastChannel('my-channel'); // 创建频道
    const messageInput = document.getElementById('messageInput');
    const sendButton = document.getElementById('sendButton');

    sendButton.addEventListener('click', () => {
      const message = {
        text: messageInput.value,
        timestamp: Date.now(),
        sender: 'Sender'
      };
      channel.postMessage(message); // 发送对象
      messageInput.value = ''; // 清空输入框
    });

    channel.onmessage = (event) => {
      console.log('发送者收到消息：', event.data); // 发送者也可以收到自己发送的消息
    };
  </script>
</body>
</html>

修改 receiver.html：

<!DOCTYPE html>
<html>
<head>
  <title>接收者</title>
</head>
<body>
  <h1>接收消息</h1>
  <div id="messageArea"></div>

  <script>
    const channel = new BroadcastChannel('my-channel'); // 创建频道，必须和发送者频道名称一致
    const messageArea = document.getElementById('messageArea');

    channel.onmessage = (event) => {
      const message = event.data;
      const messageElement = document.createElement('p');
      messageElement.textContent = `${message.sender} at ${new Date(message.timestamp).toLocaleTimeString()}: ${message.text}`;
      messageArea.appendChild(messageElement);
    };
  </script>
</body>
</html>

现在发送的消息会包含发送时间戳和发送者信息，接收者页面也会显示这些信息。

实际应用场景

BroadcastChannel 在实际开发中有很多用途：

登录状态同步: 用户在一个标签页登录后，其他标签页自动更新登录状态。
购物车同步: 用户在一个标签页修改了购物车，其他标签页实时更新购物车信息。
实时通知: 服务器推送消息到某个标签页，然后通过BroadcastChannel广播到所有标签页。
多人协作应用: 例如，在线文档编辑，多人实时同步编辑内容。
监控和调试: 一个标签页可以监控其他标签页的状态。

BroadcastChannel的局限性

同源限制: 只能在同源的标签页之间通信。
单向通信: 虽然可以互相接收消息，但消息总是从发送者广播出去的，接收者不能直接回复发送者。
不支持持久化: 当浏览器关闭时，BroadcastChannel连接也会断开，消息不会被保存。
不支持跨浏览器: 虽然BroadcastChannel是一个标准API，但是不同浏览器实现细节上可能存在差异，特别是在一些老版本浏览器上。

如何选择合适的通信方式

在选择不同标签页之间的通信方式时，需要考虑以下因素：

特性	`BroadcastChannel`	`localStorage`	`cookies`	`SharedWorker`	`ServiceWorker`
同源限制	是	是	有域名限制	是	是
实时性	高	中	低	高	高
数据大小限制	浏览器限制	约5MB	约4KB	浏览器限制	浏览器限制
持久化	否	是	可配置	是 (需要手动管理)	是 (需要手动管理)
复杂数据类型	支持	仅字符串	仅字符串	支持	支持
用途	实时广播通信	简单数据存储	用户身份验证等	后台任务处理	离线缓存、推送等

如果需要实时性高的广播通信，BroadcastChannel是最佳选择。
如果需要存储少量数据，并且不需要实时性，可以使用localStorage。
如果需要进行用户身份验证，可以使用cookies。
如果需要在后台执行任务，可以使用SharedWorker或ServiceWorker。

BroadcastChannel的替代方案

如果BroadcastChannel不能满足你的需求，可以考虑以下替代方案：

localStorage + window.postMessage: localStorage 用于存储数据，window.postMessage 用于通知其他标签页数据已更新。
SharedWorker: SharedWorker 可以在多个标签页之间共享，可以用来进行复杂的通信和数据共享。
ServiceWorker: ServiceWorker 可以拦截网络请求，并提供离线缓存和推送等功能，也可以用来进行跨标签页通信。
WebSocket: WebSocket 是一种全双工通信协议，可以在客户端和服务器之间建立持久连接，实现实时通信。
Pub/Sub 模式 (例如使用 Redis 或 RabbitMQ): 这种方式可以实现更复杂的跨域、跨设备的通信。

BroadcastChannel的兼容性

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

浏览器	支持版本
Chrome	54+
Firefox	38+
Safari	10.1+
Edge	79+
Opera	41+
iOS Safari	10.3+
Android浏览器	54+

如果需要兼容老版本浏览器，可以使用polyfill。

BroadcastChannel的调试技巧

在调试BroadcastChannel时，可以使用浏览器的开发者工具。

Chrome: 在开发者工具的 "Application" -> "Broadcast Channels" 面板中，可以查看当前所有的频道和消息。
Firefox: 在开发者工具的 "Storage" -> "Broadcast Channels" 面板中，可以查看当前所有的频道和消息。

最佳实践

选择合适的频道名称: 频道名称应该具有一定的意义，避免与其他应用冲突。
对消息进行序列化和反序列化: 确保消息可以被正确地序列化和反序列化。
处理异常情况: 例如，当频道连接断开时，应该进行相应的处理。
避免发送过大的消息: 发送过大的消息可能会导致性能问题。
注意安全问题: 避免在消息中包含敏感信息。
及时关闭频道: 当不再需要使用频道时，应该及时关闭，释放资源。可以通过调用channel.close()来关闭一个频道。

总结

BroadcastChannel API 提供了一种简单、高效的方式来实现同源不同标签页之间的实时通信。虽然它有一些局限性，但在很多场景下都是一个非常实用的工具。希望今天的讲座能帮助大家更好地理解和使用BroadcastChannel。

今天的讲座就到这里，谢谢大家！如果大家还有什么问题，可以在评论区留言，我会尽力解答。祝大家编程愉快，BUG 永远远离你们！

发表回复 取消回复

发表回复取消回复