资讯专栏INFORMATION COLUMN

使用sharedWorker在web页面之间通信

BetaRabbit / 1818人阅读

摘要:参考目标在不使用和轮询的情况下,实现页面之间的实时通信如何使用使用可以创建一个多页面共享的进程,通过这种方式来实现多页面之间的消息互通先创建文件,写入代码不发给自己发给自己这个文件在页面中会被引用,用来创建一个共享进程对象。

参考

https://developer.mozilla.org...

目标

在不使用webSocket和轮询的情况下,实现页面之间的实时通信

SharedWorked如何使用

使用SharedWorked可以创建一个多页面共享的进程,通过这种方式来实现多页面之间的消息互通

先创建"worker.js"文件,写入代码

    var portList = [];
    onconnect = function(e) {
        var port = e.ports[0];  
        portList.push(port); 
        console.log(port)    
        port.onmessage = function(e) {
            var workerResult = e.data;
            portList.map(item=>{            
                // item!=port&&item.postMessage(workerResult);  /**不发给自己 */
                item.postMessage(workerResult);                 /**发给自己 */
            });        
        }
    
    }

这个文件在页面中会被引用,用来创建一个共享进程对象。代码中维护了一个连接对象池,定义了简单的事件和方法。

新建一个web页面引用"worker.js",定义一些简单的事件和方法

    


    
    
    
    Document


    

重复步骤2,可以再创建一个或多个页面

由于SharedWorker遵循同源策略,所以你要启动一个简单的web服务才可以正常运行

另外我还画了一个简单的模型图,希望能帮助你加深理解

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105433.html

相关文章

  • 实现浏览器内多个标签页之间通信

    摘要:实现浏览器内多个标签页之间的通信第一种方式协议首先我们得了解是什么它是一种网络通信协议为什么会用到因为有缺陷,通信只可以由客户端发起,服务器无法主动向客户端发送消息。然后还有种共享,这种是可以多个标签页共同使用的。 实现浏览器内多个标签页之间的通信 第一种方式:websocket协议.1.首先我们得了解websocket是什么?它是一种网络通信协议2.为什么会用到websocket?因...

    Freeman 评论0 收藏0
  • 实现浏览器内多个标签页之间通信

    摘要:实现浏览器内多个标签页之间的通信第一种方式协议首先我们得了解是什么它是一种网络通信协议为什么会用到因为有缺陷,通信只可以由客户端发起,服务器无法主动向客户端发送消息。然后还有种共享,这种是可以多个标签页共同使用的。 实现浏览器内多个标签页之间的通信 第一种方式:websocket协议.1.首先我们得了解websocket是什么?它是一种网络通信协议2.为什么会用到websocket?因...

    Enlightenment 评论0 收藏0
  • 实现浏览器内多个标签页之间通信

    摘要:实现浏览器内多个标签页之间的通信第一种方式协议首先我们得了解是什么它是一种网络通信协议为什么会用到因为有缺陷,通信只可以由客户端发起,服务器无法主动向客户端发送消息。然后还有种共享,这种是可以多个标签页共同使用的。 实现浏览器内多个标签页之间的通信 第一种方式:websocket协议.1.首先我们得了解websocket是什么?它是一种网络通信协议2.为什么会用到websocket?因...

    lcodecorex 评论0 收藏0
  • Web Worker 详细介绍

    摘要:专用线程不仅仅支持传输二进制数据,也支持结构化的数据格式。但是我们所开启的新的也就是子线程,并不支持操作页面的。共享线程共享线程是为了避免线程的重复创建和销毁过程,降低了系统性能的消耗,共享线程可以同时有多个页面的线程链接。 原文链接 Web Worker 详细介绍 - 原文链接 [TOC] 1、简介 我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的,也就是说在...

    fuyi501 评论0 收藏0
  • 浅谈HTML5 Web Worker

    摘要:事实上,浏览器内部的运行机制是,先将通信内容串行化,然后把串行化后的字符串发给子线程,后者再将它还原。当一个的文档列表中的任何一个对象都是处于完全活动状态的时候,这个会被称之为需要激活线程。 浏览器中的Web Worker 背景介绍 我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的,也就是说在同一时间只能做一件事,这也和这门语言有很大的关系,采用同步执行的方式进...

    Tecode 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<