html5中sharedWorker实现多页面通信的示例代码


Posted in Javascript onMay 07, 2021

是这样的,今天玩github,先是在没有登录浏览了一些页面,然后在某一页面进行了登录。这时再切换的其他页面时就看到了下面的提示:

html5中sharedWorker实现多页面通信的示例代码

那么这是怎么做到的呢?我们可以想到,一种办法是 localStorage,在某一个页面登录时,修改localStorage 状态,其他页面在显示的时候,读取最新的状态,然后显示提示:

// 登录的页面
localStorage.setItem('login', true);
 
// 其他页面
document.addEventListener("visibilitychange", function() {
    if (localStorage.setItem('login') === 'true') {
        alert('你已登录,请刷新页面');
    }
}

html5中sharedWorker实现多页面通信的示例代码

然而,github并没有这么做,localStorage里也找不到相关的字段,一番查找之后,发现他们是用 sharedWorker 实现的。那我们就来了解下sharedworker

什么是sharedWorker

sharedWorker 顾名思义,是 worker 的一种,可以由所有同源的页面共享。同Worker的api一样,传入js的url,就可以注册一个 sharedWorker 实例:

let myWorker = new SharedWorker('worker.js');

接下来,我们看一下具体是 worker 和页面之间是如何发送和接收消息的。但是与普通 Worker 不同的是:
1 同一个js url 只会创建一个 sharedWorker,其他页面再使用同样的url创建sharedWorker,会复用已创建的 worker,这个worker由那几个页面共享。
2 sharedWorker通过port来发送和接收消息

messagePort

假设我们有两个js,一个是跑在页面里的 page.js,另一个是跑在 worker里的 worker.js。那么我们要在 page.js 里注册一个 sharedWorker,代码如下:

// page.js
let myWorker = new SharedWorker('worker.js');
// page通过worker port发送消息
myWorker.port.postMessage('哼哼');
// page通过worker port接收消息
myWorker.port.onmessage = (e) => console.log(e.data);
 
// worker.js
onconnect= function(e) {
    const port = e.ports[0];
    port.postMessage('哈嘿');
    port.onmessage = (e) => {
        console.log(e.data);
    }
}

调试sharedWorker

在上面的例子中,我们在worker中使用了console.log来打印来自页面的message,那么到哪里可以看到打印的log呢?我们可以在浏览器地址栏里面输入 `chrome://inspect,然后在侧边栏选中shared workers了,就可以看到浏览器,目前在运行的所有worker。点击inspect会打开一个开发者工具,然后就可以看到输出的log了。

html5中sharedWorker实现多页面通信的示例代码

这里我们看到我们的worker名字是untitled,那是因为sharedworker 构造函数还支持传入第二个参数作为名字:

let myWorker = new SharedWorker('worker.js', 'awesome worker');

回到文章一开始的例子,我们前面实现了页面和worker之间的通信,那么该如何让worker向多个页面发送消息呢?一个思路就是我们把port缓存起来,作为一个port pool,这样当我们需要向所有页面广播消息的时候,就可以遍历port,然后发送消息:多页面发布消息

// worker js
const portPool = [];
onconnect= function(e) {
    const port = e.ports[0];
    // 在connect时将 port添加到 portPool中
    portPool.push(port);
    port.postMessage('哈嘿');
    port.onmessage = (e) => {
        console.log(e.data);
    }
}
 
function boardcast(message) {
    portPool.forEach(port => {
        port.portMessage(port);
    })
}

这样我们就基本实现了向多个页面广播消息的功能。

清除无效的port

上面的实现中有一个问题,就是在页面关闭后,workerPool中的port并不会自动清除,造成内存的白白浪费。我们可以在页面关闭前通知shared worker页面将要关闭,然后让worker将无效的 messagePort 从 portPool 中移除。

// 页面
window.onbeforeunload = () => {
  myWorker.port.postMessage('TO BE CLOSED');
};
 
// worker.js
const portPool = [];
onconnect = function(e) {
  var port = e.ports[0];
  portPool.push(port);
  port.onmessage = function(e) {
    console.log(e);
    if (e.data === 'TO BE CLOSED') {
      const index = ports.findIndex(p => p === port);
      portPool.splice(index, 1);
    }
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  }
}
 
function boardcast(message) {
    portPool.forEach(port => {
        port.portMessage(port);
    })
}

这样,我们就实现了一个简单的多页面广播的sharedWorker。我们可以用它来广播一下时间:

参考

https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/SharedWorker
https://github.com/mdn/simple-shared-worker

到此这篇关于html5中sharedWorker实现多页面通信的示例代码的文章就介绍到这了

Javascript 相关文章推荐
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
JS打印组合功能
Aug 04 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
对angular4子路由&辅助路由详解
Oct 09 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
详解如何使用Node.js实现热重载页面
May 06 #Javascript
关于Vue Router的10条高级技巧总结
May 06 #Vue.js
在JavaScript中如何使用宏详解
May 06 #Javascript
如何用JS实现简单的数据监听
May 06 #Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 #Javascript
JS中一些高效的魔法运算符总结
May 06 #Javascript
react国际化react-intl的使用
You might like
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
php5与php7的区别点总结
2019/10/11 PHP
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Python assert语句的简单使用示例
2019/07/28 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
如何理解Python中的变量
2020/06/01 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
Django框架请求生命周期实现原理
2020/11/13 Python
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
护士专业推荐信
2013/11/02 职场文书
初三物理教学反思
2014/01/21 职场文书
说明书范文
2014/05/07 职场文书
建筑学专业自荐书
2014/07/09 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
骨干教师考核评语
2014/12/31 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL