摘要:實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信第一種方式協(xié)議首先我們得了解是什么它是一種網(wǎng)絡(luò)通信協(xié)議為什么會(huì)用到因?yàn)橛腥毕荩ㄐ胖豢梢杂煽蛻舳税l(fā)起,服務(wù)器無法主動(dòng)向客戶端發(fā)送消息。然后還有種共享,這種是可以多個(gè)標(biāo)簽頁共同使用的。
實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信
第一種方式:websocket協(xié)議.
1.首先我們得了解websocket是什么?
它是一種網(wǎng)絡(luò)通信協(xié)議
2.為什么會(huì)用到websocket?
因?yàn)閔ttp有缺陷,通信只可以由客戶端發(fā)起,服務(wù)器無法主動(dòng)向客戶端發(fā)送消息。
但如果這時(shí),服務(wù)器有連續(xù)變化的狀態(tài),那么就只能使用輪詢的方式來訪問。
輪詢:每隔一段時(shí)間,就發(fā)出一個(gè)詢問.
因?yàn)閣ebsocket擁有全雙工(full-duplex)通信自然可以實(shí)現(xiàn)多個(gè)標(biāo)簽頁之間的通信.
第二種方式:localstorage
localstorage是瀏覽器多個(gè)標(biāo)簽共用的存儲(chǔ)空間,所以可以用來實(shí)現(xiàn)多標(biāo)簽之間的通信
這里補(bǔ)充一點(diǎn)其他的:session是會(huì)話級的存儲(chǔ)空間,每個(gè)標(biāo)簽頁都是多帶帶的
使用方式:直接在window對象上添加監(jiān)聽,以下為例子:
標(biāo)簽頁1:
標(biāo)簽頁2:
storage事件,針對都是非當(dāng)前頁面對localStorage進(jìn)行修改時(shí)才會(huì)觸發(fā),當(dāng)前頁面修改localStorage不會(huì)觸發(fā)監(jiān)聽函數(shù)。
第三種方式:html5瀏覽器的新特性SharedWorker
關(guān)于SharedWorker
普通的webworker直接使用new Worker()即可創(chuàng)建,這種webworker是當(dāng)前頁面專有的。然后還有種共享worker(SharedWorker),這種是可以多個(gè)標(biāo)簽頁、iframe共同使用的。
SharedWorker可以被多個(gè)window共同使用,但必須保證這些標(biāo)簽頁都是同源的(相同的協(xié)議,主機(jī)和端口號)
使用方式
首先新建一個(gè)js文件worker.js,具體代碼如下:
// sharedWorker所要用到的js文件,不必打包到項(xiàng)目中,直接放到服務(wù)器即可 let data = "" onconnect = function (e) { let port = e.ports[0] port.onmessage = function (e) { if (e.data === "get") { port.postMessage(data) } else { data = e.data } } }
webworker端(暫且這樣稱呼)的代碼就如上,只需注冊一個(gè)onmessage監(jiān)聽信息的事件,客戶端(即使用sharedWorker的標(biāo)簽頁)發(fā)送message時(shí)就會(huì)觸發(fā).
注意點(diǎn)
1.webworker無法在本地使用,出于瀏覽器本身的安全機(jī)制,所以我這次的示例也是放在服務(wù)器上的,worker.js和index.html在同一目錄。
2.因?yàn)榭蛻舳撕蛍ebworker端的通信不像websocket那樣是全雙工的,所以客戶端發(fā)送數(shù)據(jù)和接收數(shù)據(jù)要分成兩步來處理。示例中會(huì)有兩個(gè)按鈕,分別對應(yīng)的向sharedWorker發(fā)送數(shù)據(jù)的請求以及獲取數(shù)據(jù)的請求,但他們本質(zhì)上都是相同的事件--發(fā)送消息。
3.webworker端會(huì)進(jìn)行判斷,傳遞的數(shù)據(jù)為"get"時(shí),就把變量data的值回傳給客戶端,其他情況,則把客戶端傳遞過來的數(shù)據(jù)存儲(chǔ)到data變量中。下面是客戶端的代碼:
// 這段代碼是必須的,打開頁面后注冊SharedWorker //顯示指定worker.port.start()方法建立與worker間的連接 if (typeof Worker === "undefined") { alert("當(dāng)前瀏覽器不支持webworker") } else { let worker = new SharedWorker("worker.js") worker.port.addEventListener("message", (e) => { console.log("來自worker的數(shù)據(jù):", e.data) }, false) worker.port.start() window.worker = worker } // 獲取和發(fā)送消息都是調(diào)用postMessage方法,我這里約定的是傳遞"get"表示獲取數(shù)據(jù)。 window.worker.port.postMessage("get") window.worker.port.postMessage("發(fā)送信息給worker")webSocket如何兼容低瀏覽器?
1.Adobe Flash Socket
2.ActiveX HTMLFile (IE)
3.基于 multipart 編碼發(fā)送 XHR
4.基于長輪詢的 XHR
以上內(nèi)容的參考鏈接 - 多個(gè)標(biāo)簽實(shí)現(xiàn)通信
關(guān)于websocket原理的有趣解釋
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/102276.html
摘要:實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信第一種方式協(xié)議首先我們得了解是什么它是一種網(wǎng)絡(luò)通信協(xié)議為什么會(huì)用到因?yàn)橛腥毕荩ㄐ胖豢梢杂煽蛻舳税l(fā)起,服務(wù)器無法主動(dòng)向客戶端發(fā)送消息。然后還有種共享,這種是可以多個(gè)標(biāo)簽頁共同使用的。 實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信 第一種方式:websocket協(xié)議.1.首先我們得了解websocket是什么?它是一種網(wǎng)絡(luò)通信協(xié)議2.為什么會(huì)用到websocket?因...
摘要:實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信第一種方式協(xié)議首先我們得了解是什么它是一種網(wǎng)絡(luò)通信協(xié)議為什么會(huì)用到因?yàn)橛腥毕荩ㄐ胖豢梢杂煽蛻舳税l(fā)起,服務(wù)器無法主動(dòng)向客戶端發(fā)送消息。然后還有種共享,這種是可以多個(gè)標(biāo)簽頁共同使用的。 實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信 第一種方式:websocket協(xié)議.1.首先我們得了解websocket是什么?它是一種網(wǎng)絡(luò)通信協(xié)議2.為什么會(huì)用到websocket?因...
摘要:渲染引擎渲染引擎也稱為瀏覽器內(nèi)核,主要時(shí)在瀏覽器窗口中顯示所請求的內(nèi)容,這是每個(gè)瀏覽器的核心部分。 瀏覽器的結(jié)構(gòu) 瀏覽器的主要組件包括: 用戶界面——包括地址欄、前進(jìn)/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外,其他顯示的各個(gè)部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件,比如組合框和窗口。其公開了與web應(yīng)用無關(guān)的通用接口,而在底層使用操作系統(tǒng)的用戶...
摘要:渲染引擎渲染引擎也稱為瀏覽器內(nèi)核,主要時(shí)在瀏覽器窗口中顯示所請求的內(nèi)容,這是每個(gè)瀏覽器的核心部分。 瀏覽器的結(jié)構(gòu) 瀏覽器的主要組件包括: 用戶界面——包括地址欄、前進(jìn)/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外,其他顯示的各個(gè)部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件,比如組合框和窗口。其公開了與web應(yīng)用無關(guān)的通用接口,而在底層使用操作系統(tǒng)的用戶...
摘要:渲染引擎渲染引擎也稱為瀏覽器內(nèi)核,主要時(shí)在瀏覽器窗口中顯示所請求的內(nèi)容,這是每個(gè)瀏覽器的核心部分。 瀏覽器的結(jié)構(gòu) 瀏覽器的主要組件包括: 用戶界面——包括地址欄、前進(jìn)/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外,其他顯示的各個(gè)部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件,比如組合框和窗口。其公開了與web應(yīng)用無關(guān)的通用接口,而在底層使用操作系統(tǒng)的用戶...
閱讀 3403·2023-04-26 02:41
閱讀 2445·2023-04-26 00:14
閱讀 2823·2021-08-11 10:22
閱讀 1275·2019-12-27 11:38
閱讀 3571·2019-08-29 18:34
閱讀 2375·2019-08-29 12:13
閱讀 2951·2019-08-26 18:26
閱讀 1834·2019-08-26 16:49