使用sharedWorker在web頁面之間通信

BetaRabbit 發(fā)布于2019-08-23 18:33 / 2205人閱讀

摘要：參考目標在不使用和輪詢的情況下，實現(xiàn)頁面之間的實時通信如何使用使用可以創(chuàng)建一個多頁面共享的進程，通過這種方式來實現(xiàn)多頁面之間的消息互通先創(chuàng)建文件，寫入代碼不發(fā)給自己發(fā)給自己這個文件在頁面中會被引用，用來創(chuàng)建一個共享進程對象。

參考

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

目標

在不使用webSocket和輪詢的情況下，實現(xiàn)頁面之間的實時通信

SharedWorked如何使用

使用SharedWorked可以創(chuàng)建一個多頁面共享的進程，通過這種方式來實現(xiàn)多頁面之間的消息互通

先創(chuàng)建"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);  /**不發(fā)給自己 */
                item.postMessage(workerResult);                 /**發(fā)給自己 */
            });        
        }
    
    }

這個文件在頁面中會被引用，用來創(chuàng)建一個共享進程對象。代碼中維護了一個連接對象池，定義了簡單的事件和方法。

新建一個web頁面引用"worker.js"，定義一些簡單的事件和方法

    


    
    
    
    Document

重復步驟2,可以再創(chuàng)建一個或多個頁面

由于SharedWorker遵循同源策略，所以你要啟動一個簡單的web服務才可以正常運行

另外我還畫了一個簡單的模型圖，希望能幫助你加深理解

GPU云服務器云服務器 webrtc如何在web中使用頁面之間傳值組件之間通信 App之間通信

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/105433.html

相關(guān)文章

實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信

摘要：實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信第一種方式協(xié)議首先我們得了解是什么它是一種網(wǎng)絡通信協(xié)議為什么會用到因為有缺陷，通信只可以由客戶端發(fā)起，服務器無法主動向客戶端發(fā)送消息。然后還有種共享，這種是可以多個標簽頁共同使用的。實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信第一種方式：websocket協(xié)議.1.首先我們得了解websocket是什么？它是一種網(wǎng)絡通信協(xié)議2.為什么會用到websocket?因...

Freeman 2019-08-23 15:35 評論0 收藏0
實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信

摘要：實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信第一種方式協(xié)議首先我們得了解是什么它是一種網(wǎng)絡通信協(xié)議為什么會用到因為有缺陷，通信只可以由客戶端發(fā)起，服務器無法主動向客戶端發(fā)送消息。然后還有種共享，這種是可以多個標簽頁共同使用的。實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信第一種方式：websocket協(xié)議.1.首先我們得了解websocket是什么？它是一種網(wǎng)絡通信協(xié)議2.為什么會用到websocket?因...

Enlightenment 2019-08-30 15:56 評論0 收藏0
實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信

摘要：實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信第一種方式協(xié)議首先我們得了解是什么它是一種網(wǎng)絡通信協(xié)議為什么會用到因為有缺陷，通信只可以由客戶端發(fā)起，服務器無法主動向客戶端發(fā)送消息。然后還有種共享，這種是可以多個標簽頁共同使用的。實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信第一種方式：websocket協(xié)議.1.首先我們得了解websocket是什么？它是一種網(wǎng)絡通信協(xié)議2.為什么會用到websocket?因...

lcodecorex 2019-08-02 14:24 評論0 收藏0
Web Worker 詳細介紹

摘要：專用線程不僅僅支持傳輸二進制數(shù)據(jù)，也支持結(jié)構(gòu)化的數(shù)據(jù)格式。但是我們所開啟的新的也就是子線程，并不支持操作頁面的。共享線程共享線程是為了避免線程的重復創(chuàng)建和銷毀過程，降低了系統(tǒng)性能的消耗，共享線程可以同時有多個頁面的線程鏈接。原文鏈接 Web Worker 詳細介紹 - 原文鏈接 [TOC] 1、簡介我們都知道JavaScript這個語言在執(zhí)行的時候是采用單線程進行執(zhí)行的，也就是說在...

fuyi501 2019-08-21 18:19 評論0 收藏0
淺談HTML5 Web Worker

摘要：事實上，瀏覽器內(nèi)部的運行機制是，先將通信內(nèi)容串行化，然后把串行化后的字符串發(fā)給子線程，后者再將它還原。當一個的文檔列表中的任何一個對象都是處于完全活動狀態(tài)的時候，這個會被稱之為需要激活線程。瀏覽器中的Web Worker 背景介紹我們都知道JavaScript這個語言在執(zhí)行的時候是采用單線程進行執(zhí)行的，也就是說在同一時間只能做一件事，這也和這門語言有很大的關(guān)系，采用同步執(zhí)行的方式進...

Tecode 2019-08-23 15:54 評論0 收藏0