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

Freeman 發布于2019-08-23 15:35 / 522人閱讀

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

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

第一種方式：websocket協議.
1.首先我們得了解websocket是什么？
它是一種網絡通信協議
2.為什么會用到websocket?
因為http有缺陷，通信只可以由客戶端發起，服務器無法主動向客戶端發送消息。
但如果這時，服務器有連續變化的狀態，那么就只能使用輪詢的方式來訪問。
輪詢：每隔一段時間，就發出一個詢問.
因為websocket擁有全雙工(full-duplex)通信自然可以實現多個標簽頁之間的通信.

第二種方式：localstorage
localstorage是瀏覽器多個標簽共用的存儲空間，所以可以用來實現多標簽之間的通信
這里補充一點其他的：session是會話級的存儲空間，每個標簽頁都是多帶帶的
使用方式：直接在window對象上添加監聽，以下為例子：
標簽頁1：

標簽頁2：

storage事件，針對都是非當前頁面對localStorage進行修改時才會觸發，當前頁面修改localStorage不會觸發監聽函數。

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

使用方式
首先新建一個js文件worker.js，具體代碼如下：

// sharedWorker所要用到的js文件，不必打包到項目中，直接放到服務器即可
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端(暫且這樣稱呼)的代碼就如上，只需注冊一個onmessage監聽信息的事件，客戶端(即使用sharedWorker的標簽頁)發送message時就會觸發.

注意點
1.webworker無法在本地使用，出于瀏覽器本身的安全機制，所以我這次的示例也是放在服務器上的，worker.js和index.html在同一目錄。
2.因為客戶端和webworker端的通信不像websocket那樣是全雙工的，所以客戶端發送數據和接收數據要分成兩步來處理。示例中會有兩個按鈕，分別對應的向sharedWorker發送數據的請求以及獲取數據的請求，但他們本質上都是相同的事件--發送消息。
3.webworker端會進行判斷，傳遞的數據為"get"時，就把變量data的值回傳給客戶端，其他情況，則把客戶端傳遞過來的數據存儲到data變量中。下面是客戶端的代碼：

// 這段代碼是必須的，打開頁面后注冊SharedWorker
//顯示指定worker.port.start()方法建立與worker間的連接
    if (typeof Worker === "undefined") {
      alert("當前瀏覽器不支持webworker")
    } else {
      let worker = new SharedWorker("worker.js")
      worker.port.addEventListener("message", (e) => {
        console.log("來自worker的數據：", e.data)
      }, false)
      worker.port.start()
      window.worker = worker
    }
// 獲取和發送消息都是調用postMessage方法，我這里約定的是傳遞"get"表示獲取數據。
window.worker.port.postMessage("get")
window.worker.port.postMessage("發送信息給worker")

webSocket如何兼容低瀏覽器？

1.Adobe Flash Socket
2.ActiveX HTMLFile (IE)
3.基于 multipart 編碼發送 XHR
4.基于長輪詢的 XHR

以上內容的參考鏈接 - 多個標簽實現通信
關于websocket原理的有趣解釋

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

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

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

摘要：實現瀏覽器內多個標簽頁之間的通信第一種方式協議首先我們得了解是什么它是一種網絡通信協議為什么會用到因為有缺陷，通信只可以由客戶端發起，服務器無法主動向客戶端發送消息。然后還有種共享，這種是可以多個標簽頁共同使用的。實現瀏覽器內多個標簽頁之間的通信第一種方式：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應用無關的通用接口，而在底層使用操作系統的用戶...

jzman 2019-08-02 12:00 評論0 收藏0
瀏覽器的工作原理整理

摘要：渲染引擎渲染引擎也稱為瀏覽器內核，主要時在瀏覽器窗口中顯示所請求的內容，這是每個瀏覽器的核心部分。瀏覽器的結構瀏覽器的主要組件包括：用戶界面——包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其他顯示的各個部分都屬于用戶界面。用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應用無關的通用接口，而在底層使用操作系統的用戶...

DrizzleX 2019-08-29 17:15 評論0 收藏0
瀏覽器的工作原理整理

摘要：渲染引擎渲染引擎也稱為瀏覽器內核，主要時在瀏覽器窗口中顯示所請求的內容，這是每個瀏覽器的核心部分。瀏覽器的結構瀏覽器的主要組件包括：用戶界面——包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其他顯示的各個部分都屬于用戶界面。用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應用無關的通用接口，而在底層使用操作系統的用戶...

lijinke666 2019-08-26 12:22 評論0 收藏0