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(); 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插件，而且搞前端的人一般對這東西不太熟悉，如果沒有封裝比較好的庫可以使用，那建議還是別用了。五、參考資料
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系列文章
到此這篇關于JavaScript實現與web通信的方法詳解的文章就介紹到這了,更多相關JavaScript與web通信內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備