Web Broadcast Channel

最新推荐文章于 2023-04-17 14:45:36 发布

SeriousLose

最新推荐文章于 2023-04-17 14:45:36 发布

阅读量705

点赞数 1

分类专栏： Web Javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/SeriousLose/article/details/121272435

版权

Javascript 同时被 2 个专栏收录

98 篇文章 1 订阅

订阅专栏

Web

13 篇文章 0 订阅

订阅专栏

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-f82a85bd4cb64b6ca0e13c22abb18e66https://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

SeriousLose

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web Broadcast Channel

Broadcast Channel API 可以实现同源下浏览器不同窗口、Tab 页或者 iframe 下的浏览器上下文之间的简单通讯。通过创建一个监听某个频道下的 BroadcastChannel 对象，你可以接收发送给该频道的所有消息可以发送内容字符串 Blob、 ...
复制链接

扫一扫