實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信

Enlightenment 發(fā)布于2019-08-30 15:56 / 2492人閱讀

摘要：實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信第一種方式協(xié)議首先我們得了解是什么它是一種網(wǎng)絡(luò)通信協(xié)議為什么會(huì)用到因?yàn)橛腥毕荩ㄐ胖豢梢杂煽蛻舳税l(fā)起，服務(wù)器無(wú)法主動(dòng)向客戶端發(fā)送消息。然后還有種共享，這種是可以多個(gè)標(biāo)簽頁(yè)共同使用的。

實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信

第一種方式：websocket協(xié)議.
1.首先我們得了解websocket是什么？
它是一種網(wǎng)絡(luò)通信協(xié)議
2.為什么會(huì)用到websocket?
因?yàn)閔ttp有缺陷，通信只可以由客戶端發(fā)起，服務(wù)器無(wú)法主動(dòng)向客戶端發(fā)送消息。
但如果這時(shí)，服務(wù)器有連續(xù)變化的狀態(tài)，那么就只能使用輪詢的方式來(lái)訪問(wèn)。
輪詢：每隔一段時(shí)間，就發(fā)出一個(gè)詢問(wèn).
因?yàn)閣ebsocket擁有全雙工(full-duplex)通信自然可以實(shí)現(xiàn)多個(gè)標(biāo)簽頁(yè)之間的通信.

第二種方式：localstorage
localstorage是瀏覽器多個(gè)標(biāo)簽共用的存儲(chǔ)空間，所以可以用來(lái)實(shí)現(xiàn)多標(biāo)簽之間的通信
這里補(bǔ)充一點(diǎn)其他的：session是會(huì)話級(jí)的存儲(chǔ)空間，每個(gè)標(biāo)簽頁(yè)都是多帶帶的
使用方式：直接在window對(duì)象上添加監(jiān)聽(tīng)，以下為例子：
標(biāo)簽頁(yè)1：

標(biāo)簽頁(yè)2：

storage事件，針對(duì)都是非當(dāng)前頁(yè)面對(duì)localStorage進(jìn)行修改時(shí)才會(huì)觸發(fā)，當(dāng)前頁(yè)面修改localStorage不會(huì)觸發(fā)監(jiān)聽(tīng)函數(shù)。

第三種方式：html5瀏覽器的新特性SharedWorker
關(guān)于SharedWorker
普通的webworker直接使用new Worker()即可創(chuàng)建，這種webworker是當(dāng)前頁(yè)面專(zhuān)有的。然后還有種共享worker(SharedWorker)，這種是可以多個(gè)標(biāo)簽頁(yè)、iframe共同使用的。
SharedWorker可以被多個(gè)window共同使用，但必須保證這些標(biāo)簽頁(yè)都是同源的(相同的協(xié)議，主機(jī)和端口號(hào))

使用方式
首先新建一個(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端(暫且這樣稱(chēng)呼)的代碼就如上，只需注冊(cè)一個(gè)onmessage監(jiān)聽(tīng)信息的事件，客戶端(即使用sharedWorker的標(biāo)簽頁(yè))發(fā)送message時(shí)就會(huì)觸發(fā).

注意點(diǎn)
1.webworker無(wú)法在本地使用，出于瀏覽器本身的安全機(jī)制，所以我這次的示例也是放在服務(wù)器上的，worker.js和index.html在同一目錄。
2.因?yàn)榭蛻舳撕蛍ebworker端的通信不像websocket那樣是全雙工的，所以客戶端發(fā)送數(shù)據(jù)和接收數(shù)據(jù)要分成兩步來(lái)處理。示例中會(huì)有兩個(gè)按鈕，分別對(duì)應(yīng)的向sharedWorker發(fā)送數(shù)據(jù)的請(qǐng)求以及獲取數(shù)據(jù)的請(qǐng)求，但他們本質(zhì)上都是相同的事件--發(fā)送消息。
3.webworker端會(huì)進(jìn)行判斷，傳遞的數(shù)據(jù)為"get"時(shí)，就把變量data的值回傳給客戶端，其他情況，則把客戶端傳遞過(guò)來(lái)的數(shù)據(jù)存儲(chǔ)到data變量中。下面是客戶端的代碼：

// 這段代碼是必須的，打開(kāi)頁(yè)面后注冊(cè)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("來(lái)自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.基于長(zhǎng)輪詢的 XHR

以上內(nèi)容的參考鏈接 - 多個(gè)標(biāo)簽實(shí)現(xiàn)通信
關(guān)于websocket原理的有趣解釋