BroadcastChannel API 教程

像素行者

于 2025-05-08 14:18:53 发布

阅读量690

点赞数 14

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/wscfan/article/details/147788367

版权

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

BroadcastChannel API 教程

简介

BroadcastChannel API 是一个强大的 Web API，允许同源的浏览器上下文（如窗口、标签页、iframe、worker 等）之间进行通信。这个 API 提供了一种简单的方式来在不同的浏览上下文中广播消息，而无需复杂的配置或中间件。

基本概念

BroadcastChannel 通过频道名称（channel name）工作。具有相同名称的所有 BroadcastChannel 实例可以相互通信。当一个上下文通过特定频道发送消息时，同一频道的所有其他监听者都会接收到该消息。

兼容性

BroadcastChannel API 在所有现代浏览器中都得到了良好支持：

Chrome 54+
Firefox 38+
Edge 79+
Safari 15.4+
Opera 41+

基本用法

创建 BroadcastChannel

// 创建或连接到一个名为 "my_channel" 的频道
const channel = new BroadcastChannel('my_channel');

发送消息

// 发送一个简单的文本消息
channel.postMessage('Hello from this page!');

// 发送一个复杂的对象
channel.postMessage({
  type: 'update',
  data: {
    id: 123,
    name: 'Product Name',
    price: 99.99
  },
  timestamp: Date.now()
});

接收消息

// 监听消息
channel.onmessage = (event) => {
  console.log('收到消息:', event.data);
  // 处理接收到的消息
};

关闭频道

// 当不再需要时关闭频道
channel.close();

高级用法

错误处理

// 处理错误
channel.onmessageerror = (event) => {
  console.error('消息错误:', event);
};

结构化克隆算法

BroadcastChannel 使用结构化克隆算法来传输数据，这意味着您可以发送:

基本数据类型（字符串、数字、布尔值等）
对象字面量
数组
日期对象
Blob 和 File 对象
ArrayBuffer 和 TypedArray
Map 和 Set 对象

但不能传输:

函数
DOM 节点
包含循环引用的对象

实际案例：页面间同步

// 在所有页面上
const syncChannel = new BroadcastChannel('sync_channel');

// 在第一个页面上发送更新
function updateData(newData) {
  // 更新本地数据
  localStorage.setItem('appData', JSON.stringify(newData));
  
  // 通知其他页面
  syncChannel.postMessage({
    type: 'data_updated',
    data: newData
  });
}

// 在所有页面上监听更新
syncChannel.onmessage = (event) => {
  if (event.data.type === 'data_updated') {
    // 更新界面
    updateUI(event.data.data);
  }
};

完整示例

页面 A (page_a.html)

<!DOCTYPE html>
<html>
<head>
  <title>页面 A</title>
</head>
<body>
  <h1>页面 A</h1>
  <input id="messageInput" type="text" placeholder="输入消息">
  <button id="sendButton">发送</button>
  <div>
    <h3>接收到的消息:</h3>
    <ul id="messages"></ul>
  </div>
  
  <script>
    const channel = new BroadcastChannel('example_channel');
    const messageInput = document.getElementById('messageInput');
    const sendButton = document.getElementById('sendButton');
    const messagesList = document.getElementById('messages');
    
    // 发送消息
    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      if (message) {
        channel.postMessage({
          sender: 'Page A',
          text: message,
          time: new Date().toLocaleTimeString()
        });
        messageInput.value = '';
      }
    });
    
    // 接收消息
    channel.onmessage = (event) => {
      const li = document.createElement('li');
      const data = event.data;
      li.textContent = `[${data.time}] ${data.sender}: ${data.text}`;
      messagesList.appendChild(li);
    };
    
    // 页面关闭时
    window.addEventListener('beforeunload', () => {
      channel.close();
    });
  </script>
</body>
</html>

页面 B (page_b.html)

<!DOCTYPE html>
<html>
<head>
  <title>页面 B</title>
</head>
<body>
  <h1>页面 B</h1>
  <input id="messageInput" type="text" placeholder="输入消息">
  <button id="sendButton">发送</button>
  <div>
    <h3>接收到的消息:</h3>
    <ul id="messages"></ul>
  </div>
  
  <script>
    const channel = new BroadcastChannel('example_channel');
    const messageInput = document.getElementById('messageInput');
    const sendButton = document.getElementById('sendButton');
    const messagesList = document.getElementById('messages');
    
    // 发送消息
    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      if (message) {
        channel.postMessage({
          sender: 'Page B',
          text: message,
          time: new Date().toLocaleTimeString()
        });
        messageInput.value = '';
      }
    });
    
    // 接收消息
    channel.onmessage = (event) => {
      const li = document.createElement('li');
      const data = event.data;
      li.textContent = `[${data.time}] ${data.sender}: ${data.text}`;
      messagesList.appendChild(li);
    };
    
    // 页面关闭时
    window.addEventListener('beforeunload', () => {
      channel.close();
    });
  </script>
</body>
</html>

使用场景

BroadcastChannel API 特别适合以下场景：

多标签页应用：当用户在多个标签页中打开同一应用时，保持数据同步
协作编辑：多个用户或标签页编辑同一文档时的状态同步
通知系统：在一个标签页中收到通知时，同步到所有开启的标签页
登录/登出同步：一个标签页登出时，同步登出所有标签页
主题切换：在一个标签页更改主题时，同步更改其他标签页的主题

注意事项和限制

同源策略：BroadcastChannel 仅适用于来自相同源（相同协议、主机和端口）的页面或脚本
不适用于跨域通信：如果需要跨域通信，请考虑使用 postMessage() 方法
资源管理：不再需要时，请务必调用 channel.close() 来释放资源
消息大小：虽然规范中没有明确限制，但发送过大的消息可能会影响性能
调试：在调试时，请记住同一频道的所有监听者都会收到消息，包括发送者自己

与其他通信方法的比较

方法	优点	缺点
BroadcastChannel	简单易用、专为广播设计	仅限同源通信
localStorage 事件	兼容性好	只能传输字符串，需要序列化/反序列化
SharedWorker	可共享资源和状态	设置复杂，API 复杂
postMessage	支持跨域通信	需要引用目标窗口，配置复杂
WebSocket	支持客户端-服务器实时通信	需要服务器支持，配置复杂