兩個瀏覽器窗口間通信

兩個瀏覽器窗口間通信

補充一下，這里的通訊指遵守同源策略情況下。

---

為了吸引讀者的興趣，先把demo放到前面：
下面有幾個我自己寫的演示多頁面通訊的demo, 為了正常運行，請用最新的chrome瀏覽器打開。
demo的源碼地址https://github.com/xiangwenhu/page-communication/tree/master/docs

• 首頁
• setInterval + sessionStorage
• localStorage
• BroadcastChannel
• SharedWorker

---

為什么會扯到這個話題，最初是源於聽 https://y.qq.com/ QQ音樂，

• 播放器處於單獨的一個頁面
• 當你在另外的一個頁面搜索到你滿意的歌曲的時候，點擊播放或添加到播放隊列
• 你會發現，播放器頁面做出了響應的響應

這里我又聯想到了商城的購物車的場景，體驗確實有提升。
剛開始，我懷疑的是Web Socket作妖，結果通過分析網絡請求和看源碼，並沒有。 最后發現是localStore的storage事件作妖，哈哈。

---

回歸正題，其實在一般正常的知識儲備的情況下，我們會想到哪些方案呢？

1. WebSocket

這個沒有太多解釋，WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。當然是有代價的，需要服務器來支持。
js語言，現在比較成熟穩定當然是 socket.io和ws. 也還有輕量級的ClusterWS。

你可以在The WebSocket API (WebSockets)
看到更多的關於Web Socket的信息。

2. 定時器 + 客戶端存儲

定時器：setTimeout/setInterval/requestAnimationFrame
客戶端存儲： cookie/localStorage/sessionStorage/indexDB/chrome的FileSystem

定時器沒啥好說的，關於客戶端存儲。

• cookie: 每次會帶到服務端，並且能存的並不大，4kb?，記得不太清楚
• localStorage/sessionStorage 應該是5MB, sessionStorage關閉瀏覽器就和你說拜拜。
• indexDB 這玩意就強大了，不過讀取都是異步的，還能存 Blob文件，真的是很high。
• chrome的FileSystem ,Filesystem & FileWriter API,主要是chrome和opera支持。這玩意就是文件系統。

3. postMessage

Cross-document messaging 這玩意的支持率98.9%。 好像還能發送文件，哈哈，強大。
不過仔細一看 window.postMessage()，就注定了你首先得拿到window這個對象。 也注定他使用的限制， 兩個窗體必須建立起聯系。 常見建立聯系的方式：

• window.open
• window.opener
• iframe

提到上面的window.open, open后你能獲得被打開窗體的句柄，當然也可以直接操作窗體了。

---

到這里，我覺得一般的前端人員能想到的比較正經的方案應該是上面三種啦。
當然，我們接下來說說可能不是那么常見的另外三種方式。

1. StorageEvent

Page 1

localStorage.setItem('message',JSON.stringify({
    message: '消息'，
    from: 'Page 1',
    date: Date.now()
}))

Page 2

window.addEventListener("storage", function(e) {
    console.log(e.key, e.newValue, e.oldValue)
});

如上， Page 1設置消息， Page 2注冊storage事件，就能監聽到數據的變化啦。

上面的e就是StorageEvent,有下面特有的屬性（都是只讀）：

• key ：代表屬性名發生變化.當被clear()方法清除之后所有屬性名變為null
• newValue：新添加進的值.當被clear()方法執行過或者鍵名已被刪除時值為null
• oldValue：原始值.而被clear()方法執行過，或在設置新值之前並沒有設置初始值時則返回null
• storageArea：被操作的storage對象
• url：key發生改變的對象所在文檔的URL地址

5. Broadcast Channel

這玩意主要就是給多窗口用的，Service Woker也可以使用。 firefox,chrome, Opera均支持，有時候真的是很討厭Safari，瀏覽器支持75%左右。

使用起來也很簡單, 創建BroadcastChannel, 然后監聽事件。 只需要注意一點，渠道名稱一致就可以。
Page 1

    var channel = new BroadcastChannel("channel-BroadcastChannel");
    channel.postMessage('Hello, BroadcastChannel!')

Page 2

    var channel = new BroadcastChannel("channel-BroadcastChannel");
    channel.addEventListener("message", function(ev) {
        console.log(ev.data)
    });

6. SharedWorker

這是Web Worker之后出來的共享的Worker，不通頁面可以共享這個Worker。
MDN這里給了一個比較完整的例子simple-shared-worker。

這里來個插曲，Safari有幾個版本支持這個特性，后來又不支持啦，還是你Safari，真是6。

雖然，SharedWorker本身的資源是共享的，但是要想達到多頁面的互相通訊，那還是要做一些手腳的。
先看看MDN給出的例子的ShareWoker本身的代碼：

onconnect = function(e) {
  var port = e.ports[0];

  port.onmessage = function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  }

}

上面的代碼其實很簡單，port是關鍵，這個port就是和各個頁面通訊的主宰者，既然SharedWorker資源是共享的，那好辦，把port存起來就是啦。
看一下，如下改造的代碼：
SharedWorker就成為一個純粹的訂閱發布者啦，哈哈。

var portList = [];

onconnect = function(e) {
  var port = e.ports[0];
  ensurePorts(port);
  port.onmessage = function(e) {
    var data = e.data;
    disptach(port, data);
  };
  port.start();
};

function ensurePorts(port) {
  if (portList.indexOf(port) < 0) {
    portList.push(port);
  }
}

function disptach(selfPort, data) {
  portList
    .filter(port => selfPort !== port)
    .forEach(port => port.postMessage(data));
}

Broadcast

MDN Web Docs - Broadcast Channel
BroadcastChannel | Can I Use
broadcast-channel
BroadcastChannel that works in New Browsers, Old Browsers, WebWorkers and NodeJ

---

StorageEvent

StorageEvent

---

SharedWorker

SharedWorker
simple-shared-worker
SharedWorker | Can I Use
共享線程 SharedWorker
feature-shared-web-workers

---

其他

兩個瀏覽器窗口間通信總結