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 各種狀態。
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(""); 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用了这么久了,相关技术也是很成熟,不过要实现个数据的拉取确实十分不易,从上面的代码中也看到了,各种兼容性问题,各种细节处理问题。
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套接口
三、后端处理方式
本文主要是总结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 server.listen><p>下面是一个php的测试demo。</p> <pre class="brush:php;toolbar:false">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插件,而且搞前端的人一般对这东西不太熟悉,如果没有封装比较好的库可以使用,那建议还是别用了。
更多编程相关知识,请访问:编程视频!!
以上是JavaScript中一些web通訊知識點總結(分享)的詳細內容。更多資訊請關注PHP中文網其他相關文章!