使用sharedWorker在web頁面之間通信

BetaRabbit 發布于2019-08-23 18:33 / 2004人閱讀

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

參考

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服務才可以正常運行

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105433.html

實現瀏覽器內多個標簽頁之間的通信

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

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

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

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

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

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

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

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

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

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