web通信，一個(gè)特別大的topic，涉及面也是很廣的。因最近學(xué)習(xí)了 javascript 中一些 web 通信知識(shí)，在這里總結(jié)下。文中應(yīng)該會(huì)有理解錯(cuò)誤或者表述不清晰的地方，還望斧正！

一、前言

1. comet技術(shù)

瀏覽器作為 Web 應(yīng)用的前臺(tái)，自身的處理功能比較有限。瀏覽器的發(fā)展需要客戶端升級(jí)軟件，同時(shí)由于客戶端瀏覽器軟件的多樣性，在某種意義上，也影響了瀏覽器新技術(shù)的推廣。在 Web 應(yīng)用中，瀏覽器的主要工作是發(fā)送請(qǐng)求、解析服務(wù)器返回的信息以不同的風(fēng)格顯示。AJAX 是瀏覽器技術(shù)發(fā)展的成果，通過(guò)在瀏覽器端發(fā)送異步請(qǐng)求，提高了單用戶操作的響應(yīng)性。但 Web 本質(zhì)上是一個(gè)多用戶的系統(tǒng)，對(duì)任何用戶來(lái)說(shuō)，可以認(rèn)為服務(wù)器是另外一個(gè)用戶?，F(xiàn)有 AJAX 技術(shù)的發(fā)展并不能解決在一個(gè)多用戶的 Web 應(yīng)用中，將更新的信息實(shí)時(shí)傳送給客戶端，從而用戶可能在“過(guò)時(shí)”的信息下進(jìn)行操作。而 AJAX 的應(yīng)用又使后臺(tái)數(shù)據(jù)更新更加頻繁成為可能。

隨著互聯(lián)網(wǎng)的發(fā)展，web 應(yīng)用層出不窮，也不乏各種網(wǎng)站監(jiān)控、即時(shí)報(bào)價(jià)、即時(shí)通訊系統(tǒng)，為了讓用戶得到更好的體驗(yàn)，服務(wù)器需要頻繁的向客戶端推送信息。開(kāi)發(fā)者一般會(huì)采用基于 AJAX 的長(zhǎng)輪詢方式或者基于 iframe 及 htmlfile 的流方式處理。當(dāng)然有些程序需要在客戶端安裝各種插件( Java applet 或者 Flash )來(lái)支持性能比較良好的“推”信息。

2. HTTP協(xié)議中的長(zhǎng)、短連接

短連接的操作步驟是：建立連接——數(shù)據(jù)傳輸——關(guān)閉連接...建立連接——數(shù)據(jù)傳輸——關(guān)閉連接
長(zhǎng)連接的操作步驟是：建立連接——數(shù)據(jù)傳輸...（保持連接）...數(shù)據(jù)傳輸——關(guān)閉連接

長(zhǎng)連接與短連接的不同主要在于client和server采取的關(guān)閉策略不同。短連接在建立連接以后只進(jìn)行一次數(shù)據(jù)傳輸就關(guān)閉連接，而長(zhǎng)連接在建立連接以后會(huì)進(jìn)行多次數(shù)據(jù)數(shù)據(jù)傳輸直至關(guān)閉連接（長(zhǎng)連接中關(guān)閉連接通過(guò)Connection：closed頭部字段）。

二、web 通信

首先要搞清楚，xhr 的 readystate 各種狀態(tài)。

1.輪詢

輪詢是一種“拉”取信息的工作模式。設(shè)置一個(gè)定時(shí)器，定時(shí)詢問(wèn)服務(wù)器是否有信息，每次建立連接傳輸數(shù)據(jù)之后，鏈接會(huì)關(guān)閉。

前端實(shí)現(xiàn)：

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方法發(fā)送數(shù)據(jù)，
  //其它瀏覽器不支持，已測(cè)試驗(yàn)證
  xhr.send(type == "GET" ? null : data);
};

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

在輪詢的過(guò)程中，如果因?yàn)榫W(wǎng)絡(luò)原因，導(dǎo)致上一個(gè) xhr 對(duì)象還沒(méi)傳輸完畢，定時(shí)器已經(jīng)開(kāi)始了下一個(gè)詢問(wèn)，上一次的傳輸是否還會(huì)在隊(duì)列中，這個(gè)問(wèn)題我沒(méi)去研究。如果感興趣可以自己寫一個(gè)ajax的請(qǐng)求管理隊(duì)列。

2.長(zhǎng)輪詢(long-polling)

長(zhǎng)輪詢其實(shí)也沒(méi)啥特殊的地方，就是在xhr對(duì)象關(guān)閉連接的時(shí)候馬上又給他接上~ 看碼：

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

  xhr.onreadystatechange = function(){
    // 狀態(tài)為 4，數(shù)據(jù)傳輸完畢，重新連接
    if(xhr.readyState == 4) {
      receive(xhr.responseText);
      xhr.onreadystatechange = null;

      longPoll(type, url);
    }
  };

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

只要服務(wù)器斷開(kāi)連接，客戶端馬上連接，不讓他有一刻的休息時(shí)間，這就是長(zhǎng)輪詢。

3.數(shù)據(jù)流

數(shù)據(jù)流方式，在建立的連接斷開(kāi)之前，也就是 readystate 狀態(tài)為 3 的時(shí)候接受數(shù)據(jù)，但是麻煩的事情也在這里，因?yàn)閿?shù)據(jù)正在傳輸，你拿到的 xhr.response 可能就是半截?cái)?shù)據(jù)，所以呢，最好定義一個(gè)數(shù)據(jù)傳輸?shù)膮f(xié)議，比如前2個(gè)字節(jié)表示字符串的長(zhǎng)度，然后你只獲取這個(gè)長(zhǎng)度的內(nèi)容，接著改變游標(biāo)的位置。

假如數(shù)據(jù)格式為： data splitChar data為數(shù)據(jù)內(nèi)容，splitChar為數(shù)據(jù)結(jié)束標(biāo)志（長(zhǎng)度為1）。 那么傳輸?shù)臄?shù)據(jù)內(nèi)容為 data splitChar data splitChar data splitChar...

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

  xhr.onreadystatechange = function(){

    // 狀態(tài)為 3，數(shù)據(jù)接收中
    if(xhr.readyState == 3) {
      var i, l, s;

      s = xhr.response; //讀取數(shù)據(jù)
      l = s.length;   //獲取數(shù)據(jù)長(zhǎng)度

      //從游標(biāo)位置開(kāi)始獲取數(shù)據(jù)，并用分割數(shù)據(jù)
      s = s.slice(p, l - 1).split(splitChar);

      //循環(huán)并操作數(shù)據(jù)
      for(i in s) if(s[i]) deal(s[i]);

      p = l; //更新游標(biāo)位置

    }

    // 狀態(tài)為 4，數(shù)據(jù)傳輸完畢，重新連接
    if(xhr.readyState == 4) {
      xhr.onreadystatechange = null;

      dataStream(type, url);
    }
  };

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

這個(gè)代碼寫的是存在問(wèn)題的，當(dāng)readystate為3的時(shí)候可以獲取數(shù)據(jù)，但是這時(shí)獲取的數(shù)據(jù)可能只是整體數(shù)據(jù)的一部分，那后半截就拿不到了。readystate在數(shù)據(jù)傳輸完畢之前是不會(huì)改變的，也就是說(shuō)他并不會(huì)繼續(xù)接受剩下的數(shù)據(jù)。我們可以定時(shí)去監(jiān)聽(tīng)readystate，這個(gè)下面的例子中可以看到。

這樣的處理不算復(fù)雜，但是存在問(wèn)題。上面的輪詢和長(zhǎng)輪詢是所有瀏覽器都支持的，所以我就沒(méi)有寫兼容IE的代碼，但是這里，低版本IE不允許在readystate為3的時(shí)候讀取數(shù)據(jù)，所以我們必須采用其他的方式來(lái)實(shí)現(xiàn)。

在ajax還沒(méi)有進(jìn)入web專題之前，我們已經(jīng)擁有了一個(gè)法寶，那就是iframe，利用iframe照樣可以異步獲取數(shù)據(jù)，對(duì)于低版本IE可以使用iframe來(lái)接受數(shù)據(jù)流。

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"){
        // 處理數(shù)據(jù)，同上
      }

      // 重新建立鏈接
      if(ifr.readyState == "complete"){
        clearInterval(timer);

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

定時(shí)去監(jiān)聽(tīng)iframe的readystate的變化，從而獲取數(shù)據(jù)流，不過(guò)，上面的處理方式還是存在問(wèn)題。數(shù)據(jù)流實(shí)現(xiàn)“服務(wù)器推”數(shù)據(jù)的原理是什么呢，簡(jiǎn)單點(diǎn)說(shuō)，就是文檔(數(shù)據(jù))還沒(méi)有加載完，這個(gè)時(shí)候?yàn)g覽器的工作就是去服務(wù)器拿數(shù)據(jù)完成文檔(數(shù)據(jù))加載，我們就是利用這點(diǎn)，給瀏覽器塞點(diǎn)東西過(guò)去~ 所以上述利用iframe的方式獲取數(shù)據(jù)，會(huì)使瀏覽器一直處于加載狀態(tài)，title上的那個(gè)圈圈一直在轉(zhuǎn)動(dòng)，鼠標(biāo)的狀態(tài)也是loading，這看著是相當(dāng)不爽的。幸好，IE提供了HTMLFile對(duì)象，這個(gè)對(duì)象就相當(dāng)于一個(gè)內(nèi)存中的Document對(duì)象，它會(huì)解析文檔。所以我們創(chuàng)建一個(gè)HTMLFile對(duì)象，在里面放置一個(gè)IFRAME來(lái)連接服務(wù)器。這樣，各種瀏覽器就都支持了。

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"){
        // 處理數(shù)據(jù)，同上
      }

      // 重新建立鏈接
      if(d.readyState == "complete"){
        clearInterval(timer);

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

4.websocket

websocket是前端一個(gè)神器，ajax用了這么久了，相關(guān)技術(shù)也是很成熟，不過(guò)要實(shí)現(xiàn)個(gè)數(shù)據(jù)的拉取確實(shí)十分不易，從上面的代碼中也看到了，各種兼容性問(wèn)題，各種細(xì)節(jié)處理問(wèn)題，自從有了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();

新建一個(gè)WebSocket實(shí)例，一切就OK了，ws:// 是websocket的連接協(xié)議，8888為端口號(hào)碼。onmessage中提供了data這個(gè)屬性，相當(dāng)方便

5.EventSource

HTML5中提供的EventSource這玩意兒，這是無(wú)比簡(jiǎn)潔的服務(wù)器推送信息的接受函數(shù)。

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

簡(jiǎn)潔程度和websocket是一樣的啦，只是這里有一個(gè)需要注意的地方，test.php輸出的數(shù)據(jù)流應(yīng)該是特殊的MIME類型，要求是"text/event-stream"，如果不設(shè)置的話，你試試~ （直接拋出異常）

6.ActionScript

情非得已就別考慮這第六種方式了，雖說(shuō)兼容性最好，要是不懂a(chǎn)s，出了點(diǎn)bug你也不會(huì)調(diào)試。

具體實(shí)現(xiàn)方法：在 HTML 頁(yè)面中內(nèi)嵌入一個(gè)使用了 XMLSocket 類的 Flash 程序。JavaScript 通過(guò)調(diào)用此 Flash 程序提供的套接口接口與服務(wù)器端的套接口進(jìn)行通信。JavaScript 在收到服務(wù)器端以 XML 格式傳送的信息后可以很容易地控制 HTML 頁(yè)面的內(nèi)容顯示。

7.Java Applet套接口

這玩意兒原理和Flash類似，不過(guò)我不懂，就不細(xì)說(shuō)了。

三、后端處理方式

本文主要是總結(jié)Javascript的各種通訊方式，后端配合node來(lái)處理，應(yīng)該是挺給力的。

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

下面是一個(gè)php的測(cè)試demo。

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

四、web 通信方式利弊分析

• 輪詢，這種方式應(yīng)該是最沒(méi)技術(shù)含量的，操作起來(lái)最方便，不過(guò)是及時(shí)性不強(qiáng)，把定時(shí)器的間隔時(shí)間設(shè)置的短一些可以稍微得到緩和。
• 長(zhǎng)輪詢，算是比較不錯(cuò)的一個(gè)web通訊方式，不過(guò)每次斷開(kāi)連接，比較耗服務(wù)器資源，客戶端到無(wú)所謂。
• 數(shù)據(jù)流，他和長(zhǎng)輪詢不同之處是接受數(shù)據(jù)的時(shí)間不一樣，數(shù)據(jù)流是readystate為3的時(shí)候接受，低版本IE不太兼容，處理起來(lái)略麻煩，而且還要自己設(shè)計(jì)數(shù)據(jù)傳輸協(xié)議。不過(guò)他對(duì)資源的消耗比上面幾種都可觀。
• websocket和EventSource，兩個(gè)利器，不過(guò)，沒(méi)幾個(gè)瀏覽器支持，這是比較讓人傷心~
• ActionScript和Java Applet，兩者都是需要在客戶端安裝插件的，一個(gè)是Flash插件，一個(gè)是Java插件，而且搞前端的人一般對(duì)這東西不太熟悉，如果沒(méi)有封裝比較好的庫(kù)可以使用，那建議還是別用了。

五、參考資料

http://www.ibm.com/developerworks/cn/web/wa-lo-comet/  Comet：基于 HTTP 長(zhǎng)連接的“服務(wù)器推”技術(shù)

http://blog.csdn.net/yankai0219/article/details/8208776  HTTP協(xié)議中長(zhǎng)連接、短連接

http://www.web-tinker.com/  comet系列文章

到此這篇關(guān)于JavaScript實(shí)現(xiàn)與web通信的方法詳解的文章就介紹到這了,更多相關(guān)JavaScript與web通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論