HTML5通訊

跨文檔消息傳輸

HTML5中提供了在網頁文檔之間互相接收與發送信息的功能。使用這個功能只要獲取到網頁所在窗口對象的實例，不管是否同源均可以實現跨域通訊。常常用於不一樣frame之間的通訊。

• 當咱們想要接受從其餘的窗口發過來的消息，就必須對窗口對象的message事件進行監視，代碼以下

window.addEventListener("message", function () { ... }, false);

• 使用window對象的postMessage方法向其餘窗口發送消息，該方法定義以下：

otherWindow.postMessage(message, targetOrigin)
<!--
   該方法使用兩個參數：第一個參數爲所發送的消息文本
   ，可是也能夠是任何javascript對象（經過JSON轉換爲
   文本對象）；第二個參數爲接受消息的對象窗口的URL地
   址。能夠在URL地址字符串中使用通配符「*」指定所有地
   址，otherWindow爲要發送窗口的對象引用，能夠用
   window.open返回該對象，或者經過對window.frames數
   組指定序號（index）或名字的方式來返回單個frame所
   屬的窗口對象。
-->

• 經過訪問message事件的origin屬性能夠獲取消息的發送源，在使用中最好對發送源進行檢測
• 經過訪問message事件的data屬性，能夠獲取消息內容（能夠是任何javascript對象）
• 使用postMessage方法發送消息，經過訪問message事件的source屬性能夠獲取消息發送源的窗口對象。

window.addEventListener("message", function (e) {
    if (e.origin != "http://XXX") {
       return false;
    }
    alert(e.data);
    e.source.postMessage("您好，我已經收到",e.origin)
})

通訊通道

通道通訊的基本概念

通訊通道機制提供了一種在多個源之間通訊的方法，這些源之間經過端口（port）進行通訊，從一個端口中發出的數據將被另外一個端口接收。消息通道提供了一個直接，雙向瀏覽上下文之間的通訊手段。跟跨文檔通訊同樣，DOM不直接暴露。取而代之，管道每端爲端口，數據從一個端口發送，另外一個變成輸入（反之亦然）。

MessageChannel對象與MessagePort對象

當須要在iframe元素中的子頁面中實現通訊機制時，咱們要建立一個MessageChannel對象，咱們實際上創造了兩個相互關聯的端口。一個端口保持開放，爲發送端。另一個被轉發到其餘瀏覽上下文（另外一個iframe元素的子頁面中）。每個端口就是一個MessagePort對象，包含3個可用方法：

• postMessage：用於向通道發送信息
• start：用於激活端口，開始監聽端口是否接收到消息
• close：用於關閉和停用
• 每一個Message對象都具備一個onmessage事件，當端口收到消息時觸發該事件。

WebSockets

webSockets 是HTML5提供的在web應用程序中客戶端與服務器端之間進行非HTTP請求的通訊機制。它實現了用HTTP不容易實現的服務端數據推送等智能通訊技術。瀏覽器經過 JavaScript向服務器發出創建WebSocket鏈接的請求，創建一個非HTTP的雙向連接，這個連接是實時的，也是永久的，除非被顯示關閉，鏈接創建之後，客戶端和服務器經過TCP鏈接直接交換數據。WebSocket鏈接本質上是一個TCP鏈接。另外，在WebSockets中一樣可使用跨域通訊技術。在使用跨域技術的時候應該確保客戶端與服務器是互相信任的。另外：WebSocket在數據傳輸的穩定性和數據傳輸量的大小方面，具備很大的性能優點。

webSockts API

• 創建通訊連接

var webSockets = new WebSockets("ws://localhost:8005/socket");
  <!--
    url 字符串必須以"ws"或者"wss"(加密通訊)文字做爲開頭。這個url唄設定好以後，在javascript中能夠經過訪問webSockets對象的url屬性來獲取
  -->

• 發送數據

webSockets.send("data")；
<!--
    這個方法只能發送文本數據，可是咱們能夠將任何類型的數據轉換爲JSON對象再進行發送
-->

• 處理事件

// 經過獲取onmessage事件句柄來接收服務器傳過來的數據
    webSocket.onmessage = function (e) {
        var data = event.data;
    }
    
    // 經過onopen事件句柄監聽socket打開事件
    webSocket.onopen = function () {
        // 開始通訊時的處理
    }
    
    // 經過onclose事件句柄來監聽socket的關閉事件
    webSocket.onclose = function (event) {
        // 通訊結束時的處理 
    }

Server-Sent Events API

從字面意思來看，是隻由服務器發送一些事件，由客戶端接收。從「服務端主動發送」這一點上來看該API與WebSockets API有些類似之處，可是該API與WebSockets API不一樣的是，該API實現的是一種從服務器端發送到客戶端的單項通訊機制，而WebSockets API實現的是雙向通訊機制。在Sever-Sent Event API 中，服務端主動發送的事件有些相似於Javascript腳本代碼中的事件，可是不一樣的是，在客戶端不能控制服務端什麼時候發送這些事件，以及服務端在這些事件中攜帶哪些數據。