首页 > 作文

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

更新时间:2023-04-07 19:08:56 阅读: 评论:0

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

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

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

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

什么是sharedworker

sharedworker 顾名思义,是 wor幼儿心理健康教育ker 的一种,可以由所有同源的页面共享。同worker的api一样,传入js的url,就可以注册一个 sharedworker 实例:

let myworker = new sharedworker('worker.js');

但是与普通 worker 不同的是:
1 同一个js url 只会创建一个 sharedworker,其他页面再使用同样的url创建sharedworker,会复用已创建的 worker,这个worker由那几个页面共享。
2 sharedworker通过port来发送和接收消息

接下来,我们看一下具体是 worker 和页面之间是如何发送和接收消息的。

messageport

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

// page.jslet myworker = new sharedworker('worker.js');// page通过worker port发送消息myworker.port.postmessage('哼哼');// page通过worker port接收消息myworker.port.onmessage = (e) => console.log(e.data);// worker.jsonconnect= 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了。

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

let myworker = new sharedworker('worker.js', 'awesome worker');

多页面发布消息

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

// worker jsconst 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(por魏三妈妈今天来看我t);})}

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

清除无效的port

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

// 页面window.onbeforeu压迫性荨麻疹nload = () => {  myworker.port.postmessage('to be clod');};// worker.jsconst portpool = [];onconnect = function(e) {  var port = e.ports[0];  portpool.push(port);  port.onmessage = function(e) {    console.log(e);    if (e.data === 'to be clod') {      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。我们可以用它来广播一下时间:

tinterval(() => boardcast(date.now()), 1000);

参考

https://developer.mozilla.org/en-us/docs/web/api/sharedworke百年华诞的祝福语r/sharedworker
https://github.com/mdn/simple-shared-worker

到此这篇关于html5中sharedworker实现多页面通信的示例代码的文章就介绍到这了,更多相关html5 sharedworker多页面通信内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!

本文发布于:2023-04-07 19:08:54,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/8226f53b08ddaa81b70256293bbaf740.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:html5中sharedWorker实现多页面通信的示例代码.doc

本文 PDF 下载地址:html5中sharedWorker实现多页面通信的示例代码.pdf

标签:页面   消息   我们可以   多页
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图