瀏覽器窗口間通訊

瀏覽器窗口間通訊

瀏覽器多個標籤頁窗口間通訊，主要是指的同源的多個頁面間的通訊，主要方法有本地存儲通訊、Web Worker通訊、Web Socket通訊。

本地存儲通訊

經過瀏覽器對於同源頁面本地存儲是共享的策略實現通訊，主要可使用localStorage、cookie、indexDB，注意對於sessionStroage是在同一會話有效的，在MDN中提到，經過點擊連接或者使用window.open打開的新標籤頁之間是屬於同一個session的，新的標籤頁會繼承上一級會話的sessionStroage，但新開一個標籤頁老是會初始化一個新的session，即便是同源的，它們也不屬於同一個session。

localStorage

// 頁面A
localStorage.setItem('msg', Math.random());

// 頁面B
window.addEventListener("storage", function (e) {
  console.log(e);
})
// onstorage事件
// 非當前頁面對localStorage進行修改時纔會觸發，當前頁面修改localStorage不會觸發監聽函數
// 在對原有的數據的值進行修改時纔會觸發監聽函數，當新設值與原有值相同時不會觸發。

cookie

// 頁面A
document.cookie = "msg=1;path=/";

// 頁面B
function getCookie(key){
    var cookies = {};
    document.cookie.replace(/\s*/g,"").split(";").forEach((v) => {
        let unit = v.split("=");
        cookies[unit[0]] = unit[1];
    })
    return cookies[key];
}
setInterval(() => {
    console.log(getCookie("msg"));
}, 1000);

IndexedDB

// 頁面A
var db = null;
var request = indexedDB.open("message");
request.onsuccess = (e) => db = e.target.result;
request.onupgradeneeded = function(event) {
    db = event.target.result;
    if (!db.objectStoreNames.contains('message')) {
        db.createObjectStore('message', { keyPath: 'key' });
    }
};

function setData(data){
    var transaction = db.transaction(['message'], 'readwrite');
    var store = transaction.objectStore(['message']);
    var requestData = store.put({ key: "msg", info: data});
    requestData.onsuccess = function(e) { 
        console.log(e.target.result);
    };
};

setTimeout(() => setData(1),1000);

// 頁面B
var db = null;
var request = indexedDB.open("message");
request.onsuccess = (e) => db = e.target.result;
function readMsg(){
    var transaction = db.transaction(['message']);
    var objectStore = transaction.objectStore('message');
    var requestResult = objectStore.get('msg');

    requestResult.onsuccess = function(event) {
        console.log(requestResult.result.info);
   };
}

setTimeout(readMsg, 3000);

Web Worker

HTML5中的Web Worker能夠分爲兩種不一樣線程類型，一個是專用線程Dedicated Worker，一個是共享線程Shared Worker。
Dedicated Worker直接使用new Worker()便可建立，這種webworker是當前頁面專有的。
SharedWorker能夠被多個window、標籤頁、iframe共同使用，但必須保證這些標籤頁都是同源的。

// 頁面A
var worker = new SharedWorker('worker.js');
worker.port.start();
worker.port.postMessage(1);

// 頁面B
var worker = new SharedWorker('worker.js');
worker.port.start();
worker.port.onmessage = function(event){
    console.log(event.data);
};

// worker.js
var portArr = [];
onconnect = function(e) {
  var port = e.ports[0];
  if(portArr.indexOf(port) === -1) portArr.push(port);
  port.onmessage = function(e) {
    portArr.forEach( v => {
        v.postMessage(e.data);
    })
  }
}

Web Socket

使用Web Socket將服務器做爲數據中轉站進行數據傳輸，能夠實現瀏覽器窗口間通訊，可是比較耗費服務器資源。WebSocket是HTML5開始提供的一種在單個TCP鏈接上進行全雙工通信的協議。WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，容許服務端主動向客戶端推送數據。在 WebSocket API中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。在WebSocket API中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道，二者之間就直接能夠數據互相傳送。

• 握手階段採用HTTP協議，在普通HTTP報文中包含了一些附加頭信息，其中附加頭信息Upgrade: WebSocket代表這是一個申請協議升級的HTTP請求。
• 創建在TCP協議基礎之上，和HTTP協議同屬於應用層。
• 能夠發送文本，也能夠發送二進制數據。
• 數據格式比較輕量，性能開銷小，通訊高效。
• 沒有同源限制，客戶端能夠與任意服務器通訊。
• 協議頭標識符是ws，若是加密傳輸則爲wss。

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://github.com/lmk123/blog/issues/66
https://www.cnblogs.com/cloud-/p/10713213.html
https://www.cnblogs.com/lalalagq/p/9921144.html