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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
Validform表单验证总结篇
Oct 31 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
php下实现农历日历的代码
2007/03/07 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
javascript实现拖放效果
2015/12/16 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
python中bisect模块用法实例
2014/09/25 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
python实现扫雷小游戏
2020/04/24 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
会计主管岗位职责范文
2013/11/08 职场文书
物业工作计划书
2014/01/10 职场文书
小学班主任培训方案
2014/06/04 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
中秋节随笔
2015/08/15 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
Redis批量生成数据的实现
2022/06/05 Redis