Broadcast Channel API

  • 可以实现同源下浏览器不同窗口、Tab 页或者 iframe 下的浏览器上下文之间的简单通讯。

  • 通过创建一个监听某个频道下的 BroadcastChannel 对象，你可以接收发送给该频道的所有消息

  • 可以发送内容

    • 字符串

    • Blob、

    • File、

    • ArrayBuffer、

    • Array 等对象。

  • 应用场景

    • 轻易地实现同源页面间一对多的通信

      • 实现同源页面间数据同步；

      • 在其它 Tab 页面中监测用户操作；

      • 指导 worker 执行一个后台任务；

      • 知道用户何时登录另一个 window/tab 中的帐户。

  • Broadcast Channel API vs postMessage API

    • 与 postMessage() 不同的是，你不再需要维护对 iframe 或 worker 的引用才能与其进行通信；

    • Broadcast Channel API 同源之间通信，postMessage API 实现不同源之间消息通信

// 创建或加入某个频道
// 通过创建一个 BroadcastChannel 对象，一个客户端就加入了某个指定的频道。
// 只需要向 构造函数 传入一个参数：频道名称。如果这是首次连接到该广播频道，相应资源会自动被创建。

    // 连接到广播频道
    var bc = new BroadcastChannel('test_channel’);


// 发送消息

    // 发送简单消息的示例
    bc.postMessage('This is a test message.’);


// 接收消息

    // 简单示例，用于将事件打印到控制台
    bc.onmessage = function (ev) { console.log(ev); }

// 断开连接

    // 断开频道连接
    bc.close()
// 父页面
var BroadcastChanne1 = new BroadcastChannel('load1');//创建一个名字是load1的BroadcastChannel对象。记住这个名字，下面会用到
BroadcastChanne1.postMessage({
    value: $("#msg").val()
})


// 子页面
var BroadcastChanne1 = new BroadcastChannel('load1');//要接收到数据，BroadcastChannel对象的名字必须相同
BroadcastChanne1.onmessage = function(e){
    debugger;
    console.log(e.data);//发送的数据
};
// 实现同源页面间数据同步

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h3 id="title">你好，</h3>
    <input id="userName" placeholder="请输入你的用户名" />
  </body>
</html>
<script>
  const bc = new BroadcastChannel('abao_channel');

  (() => {
    const title = document.querySelector('#title');
    const userName = document.querySelector('#userName');

    const setTitle = (userName) => {
      title.innerHTML = '你好，' + userName;
    };

    bc.onmessage = (messageEvent) => {
      console.log(messageEvent)
      if (messageEvent.data === 'update_title') {
        setTitle(localStorage.getItem('title'));
      }
    };

    if (localStorage.getItem('title')) {
      setTitle(localStorage.getItem('title'));
    } else {
      setTitle('请告诉我们你的用户名');
    }

    userName.onchange = (e) => {
      const inputValue = e.target.value;
      localStorage.setItem('title', inputValue);
      setTitle(inputValue);
      bc.postMessage('update_title');
    };
  })();
</script>
// 在其它 Tab 页面中监测用户操作
// 利用 Broadcast Channel API，除了可以实现同源页面间的数据同步之外，我们还可以利用它来实现在其它 Tab 页面中监测用户操作的功能。
// 比如，当用户在任何一个 Tab 中执行退出操作后，其它已打开的 Tab 页面也能够自动实现退出，从而保证系统的安全性。

    <h3 id="status">当前状态：已登录</h3>
    <button onclick="logout()">退出</button>


  const status = document.querySelector('#status');
  const logoutChannel = new BroadcastChannel('logout_channel');

  // 监听消息
  logoutChannel.onmessage = function (e) {
    if (e.data.cmd === 'logout') {
      doLogout();
    }
  };

  function logout() {
    doLogout();
    logoutChannel.postMessage({ cmd: 'logout', user: ’SeriousLose' });  // 发送消息
  }


  function doLogout() {
    status.innerText = '当前状态：已退出';
  }

https://serious-lose.notion.site/Broadcast-Channel-f82a85bd4cb64b6ca0e13c22abb18e66icon-default.png?t=LBL2https://serious-lose.notion.site/Broadcast-Channel-f82a85bd4cb64b6ca0e13c22abb18e66

参考地址

MDN Broadcast Channel API

Broadcast Channel API - Web API 接口参考 | MDN

JavaScript 如何实现同源通信?

JavaScript 如何实现同源通信?

MDN BroadcastChannel

BroadcastChannel() - Web API 接口参考 | MDN

# 前端 # javascript
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区