|
本文同步自我的博客園：http://hustskyking.cnblogs.com web通信,，一個特別大的topic,，涉及面也是很廣的。因最近學習了 javascript 中一些 web 通信知識,，在這里總結(jié)下,。文中應該會有理解錯誤或者表述不清晰的地方，還望斧正,！ 一,、前言1. comet技術(shù)
隨著互聯(lián)網(wǎng)的發(fā)展,，web 應用層出不窮,，也不乏各種網(wǎng)站監(jiān)控、即時報價,、即時通訊系統(tǒng),，為了讓用戶得到更好的體驗，服務器需要頻繁的向客戶端推送信息,。開發(fā)者一般會采用基于 AJAX 的長輪詢方式或者基于 iframe 及 htmlfile 的流方式處理,。當然有些程序需要在客戶端安裝各種插件( Java applet 或者 Flash )來支持性能比較良好的“推”信息,。 2. HTTP協(xié)議中的長、短連接
長連接與短連接的不同主要在于client和server采取的關(guān)閉策略不同,。短連接在建立連接以后只進行一次數(shù)據(jù)傳輸就關(guān)閉連接,，而長連接在建立連接以后會進行多次數(shù)據(jù)數(shù)據(jù)傳輸直至關(guān)閉連接（長連接中關(guān)閉連接通過Connection：closed頭部字段）。 二,、web 通信首先要搞清楚,，xhr 的 readystate 各種狀態(tài)。
1.輪詢輪詢是一種“拉”取信息的工作模式,。設(shè)置一個定時器，定時詢問服務器是否有信息,，每次建立連接傳輸數(shù)據(jù)之后,，鏈接會關(guān)閉。 前端實現(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ù),，
//其它瀏覽器不支持,，已測試驗證
xhr.send(type == "GET" ? null : data);
};
var timer = setInterval(function(){
polling();
}, 1000);
在輪詢的過程中，如果因為網(wǎng)絡原因,，導致上一個 xhr 對象還沒傳輸完畢,，定時器已經(jīng)開始了下一個詢問，上一次的傳輸是否還會在隊列中,，這個問題我沒去研究,。如果感興趣可以自己寫一個ajax的請求管理隊列。 2.長輪詢(long-polling)長輪詢其實也沒啥特殊的地方,，就是在xhr對象關(guān)閉連接的時候馬上又給他接上~ 看碼： 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();
}
只要服務器斷開連接,，客戶端馬上連接,，不讓他有一刻的休息時間，這就是長輪詢,。 3.數(shù)據(jù)流數(shù)據(jù)流方式,，在建立的連接斷開之前，也就是 readystate 狀態(tài)為 3 的時候接受數(shù)據(jù),，但是麻煩的事情也在這里,，因為數(shù)據(jù)正在傳輸,，你拿到的 xhr.response 可能就是半截數(shù)據(jù)，所以呢,，最好定義一個數(shù)據(jù)傳輸?shù)膮f(xié)議,，比如前2個字節(jié)表示字符串的長度，然后你只獲取這個長度的內(nèi)容,，接著改變游標的位置,。 假如數(shù)據(jù)格式為： data splitChar data為數(shù)據(jù)內(nèi)容，splitChar為數(shù)據(jù)結(jié)束標志（長度為1）,。 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ù)長度
//從游標位置開始獲取數(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; //更新游標位置
}
// 狀態(tài)為 4,，數(shù)據(jù)傳輸完畢,，重新連接
if(xhr.readyState == 4) {
xhr.onreadystatechange = null;
dataStream(type, url);
}
};
xhr.open(type, url, true);
xhr.send();
};
這個代碼寫的是存在問題的，當readystate為3的時候可以獲取數(shù)據(jù),，但是這時獲取的數(shù)據(jù)可能只是整體數(shù)據(jù)的一部分,，那后半截就拿不到了。readystate在數(shù)據(jù)傳輸完畢之前是不會改變的,，也就是說他并不會繼續(xù)接受剩下的數(shù)據(jù),。我們可以定時去監(jiān)聽readystate，這個下面的例子中可以看到,。 這樣的處理不算復雜,，但是存在問題。上面的輪詢和長輪詢是所有瀏覽器都支持的,，所以我就沒有寫兼容IE的代碼,，但是這里，低版本IE不允許在readystate為3的時候讀取數(shù)據(jù),，所以我們必須采用其他的方式來實現(xiàn),。 在ajax還沒有進入web專題之前，我們已經(jīng)擁有了一個法寶,，那就是iframe,，利用iframe照樣可以異步獲取數(shù)據(jù)，對于低版本IE可以使用iframe開接受數(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);
};
};
定時去監(jiān)聽iframe的readystate的變化，從而獲取數(shù)據(jù)流,，不過,，上面的處理方式還是存在問題。數(shù)據(jù)流實現(xiàn)“服務器推”數(shù)據(jù)的原理是什么呢,，簡單點說,，就是文檔(數(shù)據(jù))還沒有加載完,，這個時候瀏覽器的工作就是去服務器拿數(shù)據(jù)完成文檔(數(shù)據(jù))加載，我們就是利用這點,，給瀏覽器塞點東西過去~ 所以上述利用iframe的方式獲取數(shù)據(jù),，會使瀏覽器一直處于加載狀態(tài)，title上的那個圈圈一直在轉(zhuǎn)動,，鼠標的狀態(tài)也是loading,，這看著是相當不爽的。幸好,，IE提高了HTMLFile對象,，這個對象就相當于一個內(nèi)存中的Document對象，它會解析文檔,。所以我們創(chuàng)建一個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"){
// 處理數(shù)據(jù),，同上
}
// 重新建立鏈接
if(d.readyState == "complete"){
clearInterval(timer);
dataStream(url);
}
}, 16);
};
};
4.websocketwebsocket是前端一個神器,，ajax用了這么久了，相關(guān)技術(shù)也是很成熟,，不過要實現(xiàn)個數(shù)據(jù)的拉取確實十分不易,，從上面的代碼中也看到了，各種兼容性問題,，各種細節(jié)處理問題,，自從有了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了， 5.EventSourceHTML5中提供的EventSource這玩意兒,，這是無比簡潔的服務器推送信息的接受函數(shù),。 new EventSource("test.php").onmessage=function(evt){
console.log(evt.data);
};
簡潔程度和websocket是一樣的啦，只是這里有一個需要注意的地方,，test.php輸出的數(shù)據(jù)流應該是特殊的MIME類型,，要求是"text/event-stream"，如果不設(shè)置的話,，你試試~ （直接拋出異常） 6.ActionScript情非得已就別考慮這第六種方式了,，雖說兼容性最好,，要是不懂a(chǎn)s，出了點bug你也不會調(diào)試,。 具體實現(xiàn)方法：在 HTML 頁面中內(nèi)嵌入一個使用了 XMLSocket 類的 Flash 程序,。JavaScript 通過調(diào)用此 Flash 程序提供的套接口接口與服務器端的套接口進行通信。JavaScript 在收到服務器端以 XML 格式傳送的信息后可以很容易地控制 HTML 頁面的內(nèi)容顯示,。 7.Java Applet套接口這玩意兒原理和Flash類似,，不過我不懂，就不細說了,。 三,、后端處理方式本文主要是總結(jié)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 通信方式利弊分析
五,、參考資料
|
|
|
來自： icecity1306 > 《開發(fā)資料》
