JavaScript之web通訊

本文同步自個人博客園：http://hustskyking.cnblogs.com
P.S: 各個平臺中就 segmentFault 寫博客體驗最好了！

web通訊，一個特別大的topic，涉及面也是很廣的。因最近學習了 javascript 中一些 web 通訊知識，在這裏總結下。文中應該會有理解錯誤或者表述不清晰的地方，還望斧正！

1、前言

1. comet技術

瀏覽器做爲 Web 應用的前臺，自身的處理功能比較有限。瀏覽器的發展須要客戶端升級軟件，同時因爲客戶端瀏覽器軟件的多樣性，在某種意義上，也影響了瀏覽器新技術的推廣。在 Web 應用中，瀏覽器的主要工做是發送請求、解析服務器返回的信息以不一樣的風格顯示。AJAX 是瀏覽器技術發展的成果，經過在瀏覽器端發送異步請求，提升了單用戶操做的響應性。但 Web 本質上是一個多用戶的系統，對任何用戶來講，能夠認爲服務器是另一個用戶。現有 AJAX 技術的發展並不能解決在一個多用戶的 Web 應用中，將更新的信息實時傳送給客戶端，從而用戶可能在「過期」的信息下進行操做。而 AJAX 的應用又使後臺數據更新更加頻繁成爲可能。

隨着互聯網的發展，web 應用層出不窮，也不乏各類網站監控、即時報價、即時通信系統，爲了讓用戶獲得更好的體驗，服務器須要頻繁的向客戶端推送信息。開發者通常會採用基於 AJAX 的長輪詢方式或者基於 iframe 及 htmlfile 的流方式處理。固然有些程序須要在客戶端安裝各類插件( Java applet 或者 Flash )來支持性能比較良好的「推」信息。

2. HTTP協議中的長、短鏈接

短鏈接的操做步驟是：創建鏈接——數據傳輸——關閉鏈接...創建鏈接——數據傳輸——關閉鏈接
長鏈接的操做步驟是：創建鏈接——數據傳輸...（保持鏈接）...數據傳輸——關閉鏈接

長鏈接與短鏈接的不一樣主要在於client和server採起的關閉策略不一樣。短鏈接在創建鏈接之後只進行一次數據傳輸就關閉鏈接，而長鏈接在創建鏈接之後會進行屢次數據數據傳輸直相當閉鏈接（長鏈接中關閉鏈接經過Connection：closed頭部字段）。

2、web 通訊

首先要搞清楚，xhr 的 readystate 各類狀態。

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 服務器鏈接已創建 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status	200: "OK" 404: 未找到頁面

1.輪詢

輪詢是一種「拉」取信息的工做模式。設置一個定時器，定時詢問服務器是否有信息，每次創建鏈接傳輸數據以後，連接會關閉。

前端實現：

var polling = function(url, type, data){
    var xhr = new XMLHttpRequest(), 
        type = type || "GET",
        data = data || null;

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4) {
            receive(xhr.responseText);
            xhr.onreadystatechange = null;
        }
    };

    xhr.open(type, url, true);
    //IE的ActiveXObject("Microsoft.XMLHTTP")支持GET方法發送數據，
    //其它瀏覽器不支持，已測試驗證
    xhr.send(type == "GET" ? null : data);
};

var timer = setInterval(function(){
    polling();
}, 1000);

在輪詢的過程當中，若是由於網絡緣由，致使上一個 xhr 對象還沒傳輸完畢，定時器已經開始了下一個詢問，上一次的傳輸是否還會在隊列中，這個問題我沒去研究。若是感興趣能夠本身寫一個ajax的請求管理隊列。

2.長輪詢(long-polling)

長輪詢其實也沒啥特殊的地方，就是在xhr對象關閉鏈接的時候立刻又給他接上~ 看碼：

var longPoll = function(type, url){
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){
        // 狀態爲 4，數據傳輸完畢，從新鏈接
        if(xhr.readyState == 4) {
            receive(xhr.responseText);
            xhr.onreadystatechange = null;

            longPoll(type, url);
        }
    };

    xhr.open(type, url, true);
    xhr.send();
}

只要服務器斷開鏈接，客戶端立刻鏈接，不讓他有一刻的休息時間，這就是長輪詢。

3.數據流

數據流方式，在創建的鏈接斷開以前，也就是 readystate 狀態爲 3 的時候接受數據，可是麻煩的事情也在這裏，由於數據正在傳輸，你拿到的 xhr.response 可能就是半截數據，因此呢，最好定義一個數據傳輸的協議，好比前2個字節表示字符串的長度，而後你只獲取這個長度的內容，接着改變遊標的位置。

假如數據格式爲： data splitChar data爲數據內容，splitChar爲數據結束標誌（長度爲1）。
那麼傳輸的數據內容爲 data splitChar data splitChar data splitChar...

var dataStream = function(type, url）{
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){

        // 狀態爲 3，數據接收中
        if(xhr.readyState == 3) {
            var i, l, s;

            s = xhr.response; //讀取數據
            l = s.length;     //獲取數據長度

            //從遊標位置開始獲取數據，並用分割數據
            s = s.slice(p, l - 1).split(splitChar);

            //循環並操做數據
            for(i in s) if(s[i])  deal(s[i]);

            p = l;  //更新遊標位置

        }

        // 狀態爲 4，數據傳輸完畢，從新鏈接
        if(xhr.readyState == 4) {
            xhr.onreadystatechange = null;

            dataStream(type, url);
        }
    };

    xhr.open(type, url, true);
    xhr.send();
};

這個代碼寫的是存在問題的，當readystate爲3的時候能夠獲取數據，可是這時獲取的數據可能只是總體數據的一部分，那後半截就拿不到了。readystate在數據傳輸完畢以前是不會改變的，也就是說他並不會繼續接受剩下的數據。咱們能夠定時去監聽readystate，這個下面的例子中能夠看到。

這樣的處理不算複雜，可是存在問題。上面的輪詢和長輪詢是全部瀏覽器都支持的，因此我就沒有寫兼容IE的代碼，可是這裏，低版本IE不容許在readystate爲3的時候讀取數據，因此咱們必須採用其餘的方式來實現。

在ajax尚未進入web專題以前，咱們已經擁有了一個法寶，那就是iframe，利用iframe照樣能夠異步獲取數據，對於低版本IE可使用iframe開接受數據流。

if(isIE){
    var dataStream = function(url）{
        var ifr = document.createElement("iframe"), doc, timer;

        ifr.src = url;
        document.body.appendChild(ifr);

        doc = ifr.contentWindow.document;

        timer = setInterval(function(){

            if(ifr.readyState == "interactive"){
                // 處理數據，同上
            }

            // 從新創建連接
            if(ifr.readyState == "complete"){
                clearInterval(timer);

                dataStream(url);
            }
        }, 16);
    };
};

定時去監聽iframe的readystate的變化，從而獲取數據流，不過，上面的處理方式仍是存在問題。數據流實現「服務器推」數據的原理是什麼呢，簡單點說，就是文檔(數據)尚未加載完，這個時候瀏覽器的工做就是去服務器拿數據完成文檔(數據)加載，咱們就是利用這點，給瀏覽器塞點東西過去~ 因此上述利用iframe的方式獲取數據，會使瀏覽器一直處於加載狀態，title上的那個圈圈一直在轉動，鼠標的狀態也是loading，這看着是至關不爽的。幸虧，IE提升了HTMLFile對象，這個對象就至關於一個內存中的Document對象，它會解析文檔。因此咱們建立一個HTMLFile對象，在裏面放置一個IFRAME來鏈接服務器。這樣，各類瀏覽器就都支持了。

if(isIE){
    var dataStream = function(url）{
        var doc = new ActiveXObject("HTMLFile"), 
            ifr = doc.createElement("iframe"), 
            timer, d;

        doc.write("<body/>");

        ifr.src = url;
        doc.body.appendChild(ifr);

        d = ifr.contentWindow.document;

        timer = setInterval(function(){

            if(d.readyState == "interactive"){
                // 處理數據，同上
            }

            // 從新創建連接
            if(d.readyState == "complete"){
                clearInterval(timer);

                dataStream(url);
            }
        }, 16);
    };
};

4.websocket

websocket是前端一個神器，ajax用了這麼久了，相關技術也是很成熟，不過要實現個數據的拉取確實十分不易，從上面的代碼中也看到了，各類兼容性問題，各類細節處理問題，自從有了websocket，哈哈，一口氣上五樓...

var ws = new WebSocket("ws://www.example.com:8888");

ws.onopen = function(evt){};
ws.onmessage = function(evt){
    deal(evt.data);
};
ws.onclose  = function(evt){};

//ws.close();

新建一個WebSocket實例，一切就OK了，ws:// 是websocket的鏈接協議，8888爲端口號碼。onmessage中提供了data這個屬性，至關方便

5.EventSource

HTML5中提供的EventSource這玩意兒，這是無比簡潔的服務器推送信息的接受函數。

new EventSource("test.php").onmessage=function(evt){
    console.log(evt.data);
};

簡潔程度和websocket是同樣的啦，只是這裏有一個須要注意的地方，test.php輸出的數據流應該是特殊的MIME類型，要求是"text/event-stream"，若是不設置的話，你試試~ （直接拋出異常）

6.ActionScript

情非得已就別考慮這第六種方式了，雖然說兼容性最好，要是不懂as，出了點bug你也不會調試。

具體實現方法：在 HTML 頁面中內嵌入一個使用了 XMLSocket 類的 Flash 程序。JavaScript 經過調用此 Flash 程序提供的套接口接口與服務器端的套接口進行通訊。JavaScript 在收到服務器端以 XML 格式傳送的信息後能夠很容易地控制 HTML 頁面的內容顯示。

7.Java Applet套接口

這玩意兒原理和Flash相似，不過我不懂，就不細說了。

3、後端處理方式

本文主要是總結Javascript的各類通信方式，後端配合node來處理，應該是挺給力的。

var conns = new Array();

var ws = require("websocket-server");
var server = ws.createServer();

server.addListener("connection", function(connection){
  console.log("Connection request on Websocket-Server");
  conns.push(connection);
  connection.addListener('message',function(msg){
        console.log(msg);
        for(var i=0; i<conns.length; i++){
            if(conns[i]!=connection){
                conns[i].send(msg);
            }
        }
    });
});
server.listen(8888);

下面是一個php的測試demo。

header('Content-Type:text/html; charset=utf-8');
while(1){
    echo date('Y-m-d H:i:s');
    flush();
    sleep(1);
};

4、web 通訊方式利弊分析

• 輪詢，這種方式應該是最沒技術含量的，操做起來最方便，不過是及時性不強，把定時器的間隔時間設置的短一些能夠稍微獲得緩和。
• 長輪詢，算是比較不錯的一個web通信方式，不過每次斷開鏈接，比較耗服務器資源，客戶端到無所謂。
• 數據流，他和長輪詢不一樣之處是接受數據的時間不同，數據流是readystate爲3的時候接受，低版本IE不太兼容，處理起來略麻煩，並且還要本身設計數據傳輸協議。不過他對資源的消耗比上面幾種均可觀。
• websocket和EventSource，兩個利器，不過，沒幾個瀏覽器支持，這是比較讓人傷心~
• ActionScript和Java Applet，二者都是須要在客戶端安裝插件的，一個是Flash插件，一個是Java插件，並且搞前端的人通常對這東西不太熟悉，若是沒有封裝比較好的庫可使用，那建議仍是別用了。

5、參考資料

• http://www.ibm.com/developerworks/cn/web/wa-lo-comet/ Comet：基於 HTTP 長鏈接的「服務器推」技術
• http://blog.csdn.net/yankai0219/article/details/8208776 HTTP協議中長鏈接、短鏈接
• http://www.web-tinker.com/ comet系列文章 推薦訂閱