JavaScript之web通信

JavaScript之web通信

2013-12-17 22:01 by BarretLee, 259 閱讀, 2 評論, 收藏, 編輯

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

 

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

 

三、後端處理方式

 

本文主要是總結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插件,而且搞前端的人一般對這東西不太熟悉,如果沒有封裝比較好的庫可以使用,那建議還是別用瞭。 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *