摘要:設(shè)置一個定時器,定時詢問服務(wù)器是否有信息,每次建立連接傳輸數(shù)據(jù)之后,鏈接會關(guān)閉。通過調(diào)用此程序提供的套接口接口與服務(wù)器端的套接口進行通信。
本文同步自我的博客園:http://hustskyking.cnblogs.com
P.S: 各個平臺中就 segmentFault 寫博客體驗最好了!
web通信,一個特別大的topic,涉及面也是很廣的。因最近學(xué)習(xí)了 javascript 中一些 web 通信知識,在這里總結(jié)下。文中應(yīng)該會有理解錯誤或者表述不清晰的地方,還望斧正!
一、前言 1. comet技術(shù)瀏覽器作為 Web 應(yīng)用的前臺,自身的處理功能比較有限。瀏覽器的發(fā)展需要客戶端升級軟件,同時由于客戶端瀏覽器軟件的多樣性,在某種意義上,也影響了瀏覽器新技術(shù)的推廣。在 Web 應(yīng)用中,瀏覽器的主要工作是發(fā)送請求、解析服務(wù)器返回的信息以不同的風(fēng)格顯示。AJAX 是瀏覽器技術(shù)發(fā)展的成果,通過在瀏覽器端發(fā)送異步請求,提高了單用戶操作的響應(yīng)性。但 Web 本質(zhì)上是一個多用戶的系統(tǒng),對任何用戶來說,可以認(rèn)為服務(wù)器是另外一個用戶。現(xiàn)有 AJAX 技術(shù)的發(fā)展并不能解決在一個多用戶的 Web 應(yīng)用中,將更新的信息實時傳送給客戶端,從而用戶可能在“過時”的信息下進行操作。而 AJAX 的應(yīng)用又使后臺數(shù)據(jù)更新更加頻繁成為可能。
隨著互聯(lián)網(wǎng)的發(fā)展,web 應(yīng)用層出不窮,也不乏各種網(wǎng)站監(jiān)控、即時報價、即時通訊系統(tǒng),為了讓用戶得到更好的體驗,服務(wù)器需要頻繁的向客戶端推送信息。開發(fā)者一般會采用基于 AJAX 的長輪詢方式或者基于 iframe 及 htmlfile 的流方式處理。當(dāng)然有些程序需要在客戶端安裝各種插件( Java applet 或者 Flash )來支持性能比較良好的“推”信息。
2. HTTP協(xié)議中的長、短連接短連接的操作步驟是:建立連接——數(shù)據(jù)傳輸——關(guān)閉連接...建立連接——數(shù)據(jù)傳輸——關(guān)閉連接
長連接的操作步驟是:建立連接——數(shù)據(jù)傳輸...(保持連接)...數(shù)據(jù)傳輸——關(guān)閉連接
長連接與短連接的不同主要在于client和server采取的關(guān)閉策略不同。短連接在建立連接以后只進行一次數(shù)據(jù)傳輸就關(guān)閉連接,而長連接在建立連接以后會進行多次數(shù)據(jù)數(shù)據(jù)傳輸直至關(guān)閉連接(長連接中關(guān)閉連接通過Connection:closed頭部字段)。
二、web 通信首先要搞清楚,xhr 的 readystate 各種狀態(tài)。
屬性 | 描述 |
---|---|
onreadystatechange | 存儲函數(shù)(或函數(shù)名),每當(dāng) readyState 屬性改變時,就會調(diào)用該函數(shù)。 |
readyState | 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。 0: 請求未初始化 1: 服務(wù)器連接已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成,且響應(yīng)已就緒 |
status | 200: "OK" 404: 未找到頁面 |
輪詢是一種“拉”取信息的工作模式。設(shè)置一個定時器,定時詢問服務(wù)器是否有信息,每次建立連接傳輸數(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)絡(luò)原因,導(dǎo)致上一個 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(); }
只要服務(wù)器斷開連接,客戶端馬上連接,不讓他有一刻的休息時間,這就是長輪詢。
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)容,接著改變游標(biāo)的位置。
假如數(shù)據(jù)格式為: data splitChar data為數(shù)據(jù)內(nèi)容,splitChar為數(shù)據(jù)結(jié)束標(biāo)志(長度為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ù)長度 //從游標(biāo)位置開始獲取數(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(); };
這個代碼寫的是存在問題的,當(dāng)readystate為3的時候可以獲取數(shù)據(jù),但是這時獲取的數(shù)據(jù)可能只是整體數(shù)據(jù)的一部分,那后半截就拿不到了。readystate在數(shù)據(jù)傳輸完畢之前是不會改變的,也就是說他并不會繼續(xù)接受剩下的數(shù)據(jù)。我們可以定時去監(jiān)聽readystate,這個下面的例子中可以看到。
這樣的處理不算復(fù)雜,但是存在問題。上面的輪詢和長輪詢是所有瀏覽器都支持的,所以我就沒有寫兼容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)“服務(wù)器推”數(shù)據(jù)的原理是什么呢,簡單點說,就是文檔(數(shù)據(jù))還沒有加載完,這個時候瀏覽器的工作就是去服務(wù)器拿數(shù)據(jù)完成文檔(數(shù)據(jù))加載,我們就是利用這點,給瀏覽器塞點東西過去~ 所以上述利用iframe的方式獲取數(shù)據(jù),會使瀏覽器一直處于加載狀態(tài),title上的那個圈圈一直在轉(zhuǎn)動,鼠標(biāo)的狀態(tài)也是loading,這看著是相當(dāng)不爽的。幸好,IE提高了HTMLFile對象,這個對象就相當(dāng)于一個內(nèi)存中的Document對象,它會解析文檔。所以我們創(chuàng)建一個HTMLFile對象,在里面放置一個IFRAME來連接服務(wù)器。這樣,各種瀏覽器就都支持了。
if(isIE){ var dataStream = function(url){ var doc = new ActiveXObject("HTMLFile"), ifr = doc.createElement("iframe"), timer, d; doc.write(""); 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是前端一個神器,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了,ws:// 是websocket的連接協(xié)議,8888為端口號碼。onmessage中提供了data這個屬性,相當(dāng)方便
5.EventSourceHTML5中提供的EventSource這玩意兒,這是無比簡潔的服務(wù)器推送信息的接受函數(shù)。
new EventSource("test.php").onmessage=function(evt){ console.log(evt.data); };
簡潔程度和websocket是一樣的啦,只是這里有一個需要注意的地方,test.php輸出的數(shù)據(jù)流應(yīng)該是特殊的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 程序提供的套接口接口與服務(wù)器端的套接口進行通信。JavaScript 在收到服務(wù)器端以 XML 格式傳送的信息后可以很容易地控制 HTML 頁面的內(nèi)容顯示。
7.Java Applet套接口這玩意兒原理和Flash類似,不過我不懂,就不細說了。
三、后端處理方式本文主要是總結(jié)Javascript的各種通訊方式,后端配合node來處理,應(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下面是一個php的測試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)該是最沒技術(shù)含量的,操作起來最方便,不過是及時性不強,把定時器的間隔時間設(shè)置的短一些可以稍微得到緩和。
長輪詢,算是比較不錯的一個web通訊方式,不過每次斷開連接,比較耗服務(wù)器資源,客戶端到無所謂。
數(shù)據(jù)流,他和長輪詢不同之處是接受數(shù)據(jù)的時間不一樣,數(shù)據(jù)流是readystate為3的時候接受,低版本IE不太兼容,處理起來略麻煩,而且還要自己設(shè)計數(shù)據(jù)傳輸協(xié)議。不過他對資源的消耗比上面幾種都可觀。
websocket和EventSource,兩個利器,不過,沒幾個瀏覽器支持,這是比較讓人傷心~
ActionScript和Java Applet,兩者都是需要在客戶端安裝插件的,一個是Flash插件,一個是Java插件,而且搞前端的人一般對這東西不太熟悉,如果沒有封裝比較好的庫可以使用,那建議還是別用了。
五、參考資料http://www.ibm.com/developerworks/cn/web/wa-lo-comet/ Comet:基于 HTTP 長連接的“服務(wù)器推”技術(shù)
http://blog.csdn.net/yankai0219/article/details/8208776 HTTP協(xié)議中長連接、短連接
http://www.web-tinker.com/ comet系列文章 推薦訂閱
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/78031.html
摘要:最后,我們將會介紹個的使用場景。異步編程的局限性前面我們了解到異步編程及其使用時機。請求是一個很好的異步編程的使用場景。整個是基于單線程環(huán)境的而部分可以突破這方面的限制。最佳使用場景迄今為止,我們列舉了的長處及其限制。 Web Workers 分類及 5 個使用場景 原文請查閱這里,略有刪減,本文采用知識共享署名 4.0 國際許可協(xié)議共享,BY Troland。 這是 JavaScri...
摘要:使用要點同源限制分配給線程運行的腳本文件,必須與主線程的腳本文件同源。限制線程所在的全局對象,與主線程不一樣,無法讀取主線程所在網(wǎng)頁的對象,也無法使用這些對象。通信聯(lián)系線程和主線程不在同一個上下文環(huán)境,它們不能直接通信,必須通過消息完成。 介紹 Web Worker為Web內(nèi)容在后臺線程中運行腳本提供了一種簡單的方法。線程可以執(zhí)行任務(wù)而不干擾用戶界面。此外,他們可以使用XMLHttpR...
摘要:在本例中,使用屬性指定鏈接的目標(biāo),其中表示超文本鏈接。您應(yīng)該認(rèn)為和元數(shù)據(jù)隱式出現(xiàn)在示例中,即使它們沒有實際顯示在文本中。 來源:ApacheCN『JavaScript 編程精解 中文第三版』翻譯項目原文:JavaScript and the Browser 譯者:飛龍 協(xié)議:CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分參考了《JavaScript 編程精解(第 2 版)》 ...
摘要:相關(guān)參考中與之間相互調(diào)用的實現(xiàn)實現(xiàn)了與相同的機制的對象注入漏洞解決方案存在的意義 前期調(diào)研 調(diào)研對象:支付寶,微信,云之家 調(diào)研文檔:Android中JS與Java的極簡交互庫 SimpleJavaJsBridge 設(shè)計需求 閱讀類型的業(yè)務(wù)功能頁面需要由前端H5實現(xiàn),需要做到服務(wù)端可控; 頁面界面更改減少重新發(fā)布新版本的頻率; 功能頁面部分原型需求無法實現(xiàn),需要原生功能支持; 對未來...
閱讀 3596·2023-04-26 02:24
閱讀 931·2023-04-25 14:47
閱讀 2478·2021-11-24 11:16
閱讀 1711·2021-11-24 09:38
閱讀 1571·2021-11-18 10:07
閱讀 2061·2021-09-22 15:49
閱讀 1589·2019-08-30 15:55
閱讀 875·2019-08-26 13:38