前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 如何实现同源通信?

JavaScript 如何实现同源通信?

作者头像
皮卡苏
发布2021-08-12 10:59:20
1.1K0
发布2021-08-12 10:59:20
举报
文章被收录于专栏:用户1343320的专栏

在日常工作中,你可能会遇到同源页面间通信的场景。针对这种场景,我们可以使用 localStorage 和 storage 事件来解决同源页面间通信的问题。除此之外,我们还可以使用 Broadcast Channel API 来解决该问题。接下来,阿宝哥将带大家一起来认识一下 Broadcast Channel API

一、Broadcast Channel API 简介

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

了解完 Broadcast Channel API 的作用之后,我们来看一下如何使用它:

代码语言:javascript
复制
// 创建一个用于广播的通信通道
const channel = new BroadcastChannel('my_bus');

// 在my_bus上发送消息
channel.postMessage('大家好,我是阿宝哥');

// 监听my_bus通道上的消息
channel.onmessage = function(e) {
  console.log('已收到的消息:', e.data);
};

// 关闭通道
channel.close();

通过观察以上示例,我们可以发现 Broadcast Channel API 使用起来还是很简单的。该 API 除了支持发送字符串之外,我们还可以发送其它对象,比如 Blob、File、ArrayBuffer、Array 等对象。另外,需要注意的是,在实际项目中,我们还要考虑它的兼容性:

由上图可知,在 IE 11 及以下的版本,是不支持 Broadcast Channel API,这时你就可以考虑使用现成的 broadcast-channel-polyfill 或者基于 localStorage 和 storage 事件来实现。

二、Broadcast Channel API 应用场景

利用 Broadcast Channel API,我们可以轻易地实现同源页面间一对多的通信。该 API 的一些使用场景如下:

  • 实现同源页面间 数据同步;
  • 在其它 Tab 页面中监测用户操作;
  • 指导 worker 执行一个后台任务;
  • 知道用户何时登录另一个 window/tab 中的帐户。

为了让大家能够更好地掌握 Broadcast Channel API,阿宝哥以前面 2 个使用场景为例,来介绍一下该 API 的具体应用。

2.1 实现同源页面间数据同步
html
代码语言:javascript
复制
<h3 id="title">你好,</h3>
<input id="userName" placeholder="请输入你的用户名" />
js
代码语言:javascript
复制
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) => {
    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");
  };
})();

在以上示例中,我们实现了同源页面间的数据同步。当任何一个已打开的页面中,输入框的数据发生变化时,页面中的 h3#title 元素的内容将会自动实现同步更新。

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

利用 Broadcast Channel API,除了可以实现同源页面间的数据同步之外,我们还可以利用它来实现在其它 Tab 页面中监测用户操作的功能。比如,当用户在任何一个 Tab 中执行退出操作后,其它已打开的 Tab 页面也能够自动实现退出,从而保证系统的安全性。

html
代码语言:javascript
复制
<h3 id="status">当前状态:已登录</h3>
<button onclick="logout()">退出</button>
js
代码语言:javascript
复制
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: "阿宝哥" });
}

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

在以上示例中,当用户点击退出按钮后,当前页面会执行退出操作,同时会通过 logoutChannel 通知其它已打开的页面执行退出操作。

三、Broadcast Channel API vs postMessage API

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

代码语言:javascript
复制
const popup = window.open('https://another-origin.com', ...);
popup.postMessage('Sup popup!', 'https://another-origin.com');

Broadcast Channel API 只能用于实现同源下浏览器不同窗口、Tab 页或者 iframe 下的浏览器上下文之间的简单通讯。而 postMessage API 却可用于实现不同源之间消息通信。由于保证消息来自同一来源,因此无需像以前那样使用以下方法来验证消息:

代码语言:javascript
复制
const iframe = document.querySelector('iframe');
iframe.contentWindow.onmessage = function(e) {
  if (e.origin !== 'https://expected-origin.com') {
    return;
  }
  e.source.postMessage('Ack!', e.origin);
};

四、总结

Broadcast Channel API 是一个非常简单的 API,内部包含了跨上下文通讯的接口。在支持该 API 的浏览器中,我们可以利用该 API 轻松地实现同源页面间的通信。而对于不支持该 API 的浏览器来说,我们就可以考虑使用 localStorage 和 storage 事件来解决同源页面间通信的问题。

五、参考资源

  • MDN – Broadcast Channel API
  • BroadcastChannel API: A Message Bus for the Web

原文链接:https://mp.weixin.qq.com/s/hw_IUf7cs7YpCKvphz18Zg

转载自:www.fly63.com

声明:版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、Broadcast Channel API 简介
  • 二、Broadcast Channel API 应用场景
    • 2.1 实现同源页面间数据同步
      • html
      • js
    • 2.2 在其它 Tab 页面中监测用户操作
      • html
      • js
  • 三、Broadcast Channel API vs postMessage API
  • 四、总结
  • 五、参考资源
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档