JavaScript之web通信

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

一、前言

1. comet技術

浏覽器作為 Web 應用的前台，自身的處理功能比較有限。浏覽器的發展需要用戶端更新軟體，同時由于用戶端浏覽器軟體的多樣性，在某種意義上，也影響了浏覽器新技術的推廣。在 Web 應用中，浏覽器的主要工作是發送請求、解析伺服器傳回的資訊以不同的風格顯示。AJAX 是浏覽器技術發展的成果，通過在浏覽器端發送異步請求，提高了單使用者操作的響應性。但 Web 本質上是一個多使用者的系統，對任何使用者來說，可以認為伺服器是另外一個使用者。現有 AJAX 技術的發展并不能解決在一個多使用者的 Web 應用中，将更新的資訊實時傳送給用戶端，進而使用者可能在“過時”的資訊下進行操作。而 AJAX 的應用又使背景資料更新更加頻繁成為可能。

随着網際網路的發展，web 應用層出不窮，也不乏各種網站監控、即時報價、即時通訊系統，為了讓使用者得到更好的體驗，伺服器需要頻繁的向用戶端推送資訊。開發者一般會采用基于 AJAX 的長輪詢方式或者基于 iframe 及 htmlfile 的流方式處理。當然有些程式需要在用戶端安裝各種插件( Java applet 或者 Flash )來支援性能比較良好的“推”資訊。

2. HTTP協定中的長、短連接配接

短連接配接的操作步驟是：建立連接配接——資料傳輸——關閉連接配接...建立連接配接——資料傳輸——關閉連接配接

長連接配接的操作步驟是：建立連接配接——資料傳輸...（保持連接配接）...資料傳輸——關閉連接配接

長連接配接與短連接配接的不同主要在于client和server采取的關閉政策不同。短連接配接在建立連接配接以後隻進行一次資料傳輸就關閉連接配接，而長連接配接在建立連接配接以後會進行多次資料資料傳輸直至關閉連接配接（長連接配接中關閉連接配接通過Connection：closed頭部字段）。

二、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();

        // 狀态為 4，資料傳輸完畢，重新連接配接

            longPoll(type, url);

    xhr.send();

}

隻要伺服器斷開連接配接，用戶端馬上連接配接，不讓他有一刻的休息時間，這就是長輪詢。

3.資料流

資料流方式，在建立的連接配接斷開之前，也就是 readystate 狀态為 3 的時候接受資料，但是麻煩的事情也在這裡，因為資料正在傳輸，你拿到的 xhr.response 可能就是半截資料，是以呢，最好定義一個資料傳輸的協定，比如前2個位元組表示字元串的長度，然後你隻擷取這個長度的内容，接着改變遊标的位置。

假如資料格式為： data splitChar   data為資料内容，splitChar為資料結束标志（長度為1）。 那麼傳輸的資料内容為 data splitChar data splitChar data splitChar...

var dataStream = function(type, url){

        // 狀态為 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;  //更新遊标位置

            dataStream(type, url);

這個代碼寫的是存在問題的，當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來連接配接伺服器。這樣，各種浏覽器就都支援了。

        var doc = new ActiveXObject("HTMLFile"), 

            ifr = doc.createElement("iframe"), 

            timer, d;

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

        doc.body.appendChild(ifr);

        d = ifr.contentWindow.document;

            if(d.readyState == "interactive"){

            if(d.readyState == "complete"){

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類似，不過我不懂，就不細說了。

三、後端處理方式

本文主要是總結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);

四、web 通信方式利弊分析

• 輪詢，這種方式應該是最沒技術含量的，操作起來最友善，不過是及時性不強，把定時器的間隔時間設定的短一些可以稍微得到緩和。
• 長輪詢，算是比較不錯的一個web通訊方式，不過每次斷開連接配接，比較耗伺服器資源，用戶端到無所謂。
• 資料流，他和長輪詢不同之處是接受資料的時間不一樣，資料流是readystate為3的時候接受，低版本IE不太相容，處理起來略麻煩，而且還要自己設計資料傳輸協定。不過他對資源的消耗比上面幾種都可觀。
• websocket和EventSource，兩個利器，不過，沒幾個浏覽器支援，這是比較讓人傷心~
• ActionScript和Java Applet，兩者都是需要在用戶端安裝插件的，一個是Flash插件，一個是Java插件，而且搞前端的人一般對這東西不太熟悉，如果沒有封裝比較好的庫可以使用，那建議還是别用了。