每日兩道前端面試題20190228

實現瀏覽器內多個標籤頁之間的通訊

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

第二種方式：localstorage
localstorage是瀏覽器多個標籤共用的存儲空間，因此能夠用來實現多標籤之間的通訊
這裏補充一點其餘的：session是會話級的存儲空間，每一個標籤頁都是單獨的
使用方式：直接在window對象上添加監聽，如下爲例子：
標籤頁1：

<input id="name">  
<input type="button" id="btn" value="提交">  
<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
            var name=$("#name").val();    
            localStorage.setItem("name", name);   
        });    
    });    
</script>

標籤頁2：

<script type="text/javascript">  
    $(function(){   
        window.addEventListener("storage", function(event){    
            console.log(event.key + "=" + event.newValue);    
        });     
    });  
</script>

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原理的有趣解釋