TWaver - 專注UI技術(shù)

          http://twaver.servasoft.com/
          posts - 171, comments - 191, trackbacks - 0, articles - 2
            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

          HTML5 WebSocket 技術(shù)介紹

          Posted on 2012-05-03 09:57 TWaver 閱讀(12099) 評論(2)  編輯  收藏
          WebSocket是html5規(guī)范新引入的功能,用于解決瀏覽器與后臺服務(wù)器雙向通訊的問題,使用WebSocket技術(shù),后臺可以隨時(shí)向前端推送消息,以保證前后臺狀態(tài)統(tǒng)一,在傳統(tǒng)的無狀態(tài)HTTP協(xié)議中,這是“無法做到”的。

          傳統(tǒng)服務(wù)端推(server push)技術(shù)


          WebSocket提出之前,為了解決后臺推送消息到前臺的需求,提出了一些解決方案,這些方案使用已有的技術(shù)(如ajax,iframe,flashplayer,java applet ...),通過一些變通的處理來實(shí)現(xiàn)。

          簡單輪詢

          最簡單的是前臺輪詢,每隔一段時(shí)間去請求后臺,以獲取最新狀態(tài),這種方式最容易實(shí)現(xiàn),但效果也最差,頻繁盲目的調(diào)用后臺,帶來不必要的開銷,且實(shí)時(shí)性無法保障,后臺出現(xiàn)更新,前端需要在下一次輪詢時(shí)才知道。

          長輪詢

          為了解決這些弊端,進(jìn)化出長輪詢技術(shù),輪詢請求會在后臺阻塞,相當(dāng)于保持一個(gè)長連接,直到后臺出現(xiàn)更新或者超時(shí)才返回,這樣就可以保證更新的及時(shí)性,前端得到請求后,重新建立輪詢連接,等待后臺的更新通知。


          其他方案

          其他解決方案無外乎保持一個(gè)長連接(如Iframe及htmlfile流),實(shí)時(shí)的從后臺獲取信息,或者借助第三方插件(flashPlayer, jre),使用的是flash xmlsocket或者java applet socket技術(shù),這些方式都不夠純html,所以這里就不過多介紹了,更多傳統(tǒng)server push 技術(shù)可參考IBM的文章:http://www.ibm.com/developerworks/cn/web/wa-lo-comet/

          WebSocket介紹


          webSocket是html5新引入的技術(shù),允許后臺隨時(shí)向前端發(fā)送文本或者二進(jìn)制消息,WebSocket是一種全新的協(xié)議,不屬于http無狀態(tài)協(xié)議,協(xié)議名為"ws",這意味著一個(gè)websocket連接地址會是這樣的寫法:
          ws://twaver.com:8080/webSocketServer。ws不是http,所以傳統(tǒng)的web服務(wù)器不一定支持,需要服務(wù)器與瀏覽器同時(shí)支持, WebSocket才能正常運(yùn)行,目前的支持還不普遍,需要特別的web服務(wù)器和現(xiàn)代的瀏覽器。

          瀏覽器對WebSocket的支持

          Google Chrome瀏覽器最先支持WebSocket,隨后是Safari,F(xiàn)irefox,此外最新版本的Opera和IE(Opera11,IE10)也支持WebSocket。
          下面是主要瀏覽器的支持情況,Opera11中默認(rèn)關(guān)閉了WebSocket支持,所以這里沒有列出,更多信息可參考:
          http://en.wikipedia.org/wiki/WebSocket 與 http://caniuse.com/#search=websockets


          客戶端WebSocket的主要方法

          瀏覽器支持程度各有區(qū)別,前面wiki中關(guān)于WebSocket的“Browser support”章節(jié)有介紹,遵循w3c關(guān)于WebSocket API的相關(guān)規(guī)范,瀏覽器提供了WebSocket類型,在Firefox中為MozWebSocket,檢測瀏覽器是否支持WebSocket可以使用下面的腳本代碼:
          檢測瀏覽器是否支持WebSocket
           
          1 window.WebSocket = window.WebSocket || window.MozWebSocket;
          2 if (!window.WebSocket){
          3     alert("WebSocket not supported by this browser");
          4     return;
          5 }
          構(gòu)造函數(shù) - WebSocket#constructor(url, optional protocols)
          第一個(gè)參數(shù)是請求地址,第二個(gè)參數(shù)選填,表示協(xié)議名
          使用示例:
          1 var websocket = new WebSocket("ws://127.0.0.1:8080/alarm/alarmServer");
           事件 - open/message/close/error
          WebSocket#onopen, onmessage, onclose, onerror
          連接打開時(shí),回調(diào)onopen方法,接收到后臺消息時(shí)會觸發(fā)到onmessage事件,后臺關(guān)閉時(shí)調(diào)用onclose,出現(xiàn)連接異常時(shí)可在onerror中捕獲
          使用示例:
           
          1 websocket.onmessage = function(evt){
          2     var data = evt.data;
          3 }
          方法 - send/close
          發(fā)送消息 - WebSocket#send(data)
          關(guān)閉連接 - WebSocket#close(optional code, optional reason)
          使用示例:
          1 websocket.send(JSON.stringify({action: "node.remove", id: "001"}));

          服務(wù)器對WebSocket的支持

          WebSocket不同于http協(xié)議,傳統(tǒng)的web服務(wù)器通常不支持WebSocket,比如tomcat目前就不支持(tomcat 7.0.26 支持WebSocket了),反倒是一些小眾的或者更活躍的web server率先支持WebSocket,如jetty,以及基于node.js的WebSocket-Node擴(kuò)展,基本上各種編程語言都有相應(yīng)的服務(wù)器可以選擇,下圖是我列舉的幾種,詳細(xì)情況參閱:
          http://en.wikipedia.org/wiki/Comparison_of_WebSocket_implementations

          服務(wù)器端編程語言各不相同,具體實(shí)現(xiàn)自然也不相同,即使是同一種語言,實(shí)現(xiàn)類和接口函數(shù)也有很大的差別,比如jetty和netty都是基于java語言,但他們的實(shí)現(xiàn)類幾乎沒有相同命名的,下面我以jetty(http://www.eclipse.org/jetty)為例,簡單介紹WebSocket相關(guān)的類和方法:

          jetty對WebSocket的實(shí)現(xiàn)

          WebSocketServlet基于servlet標(biāo)準(zhǔn),增加了doWebSocketConnect(...)方法,為客戶端請求創(chuàng)建一個(gè)后臺對應(yīng)的WebSocket實(shí)例
          1 org.eclipse.jetty.websocket.WebSocketServlet
          2 {
          3 WebSocket doWebSocketConnect(HttpServletRequest request, String protocol)
          4 }

          后臺WebSocket類,與客戶端WebSocket類對應(yīng),能監(jiān)聽open, message, close等狀態(tài)變化事件,并包含一個(gè)Connection屬性,用于向客戶端發(fā)送消息

          1 org.eclipse.jetty.websocket.WebSocket
          2 org.eclipse.jetty.websocket.WebSocket.OnTextMessage
          3 {
          4 void onOpen(Connection connect);
          5 void onClose(int code, String message);
          6 void onMessage(String message);
          7 }

          WebSocket.Connection
          后臺連接類,包含于WebSocket對象中,用于向客戶端推送消息
          1 org.eclipse.jetty.websocket.WebSocket.Connection
          2 {
          3 void sendMessage(String message);
          4 }
           
          本篇先做介紹,后續(xù)將介紹一個(gè)WebSocket與TWaver組件結(jié)合的實(shí)例...

          評論

          # re: HTML5 WebSocket 技術(shù)介紹  回復(fù)  更多評論   

          2013-02-21 10:57 by 12
          11

          # re: HTML5 WebSocket 技術(shù)介紹  回復(fù)  更多評論   

          2015-08-03 12:09 by 水電費(fèi)
          范德薩

          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 仁怀市| 深泽县| 东辽县| 玉环县| 苍山县| 北辰区| 镇沅| 潼南县| 合肥市| 临澧县| 绥化市| 刚察县| 余干县| 紫金县| 社会| 九台市| 桐城市| 平陆县| 晋城| 鸡泽县| 聂拉木县| 开远市| 武鸣县| 盐城市| 新绛县| 万宁市| 孟津县| 科尔| 平原县| 柳河县| 名山县| 吕梁市| 县级市| 涞源县| 清远市| 镇远县| 宣化县| 海林市| 婺源县| 岳阳市| 洛扎县|