<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    TWaver - 專注UI技術

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

    HTML5 WebSocket 技術介紹

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

    傳統服務端推(server push)技術


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

    簡單輪詢

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

    長輪詢

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


    其他方案

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

    WebSocket介紹


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

    瀏覽器對WebSocket的支持

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


    客戶端WebSocket的主要方法

    瀏覽器支持程度各有區別,前面wiki中關于WebSocket的“Browser support”章節有介紹,遵循w3c關于WebSocket API的相關規范,瀏覽器提供了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 }
    構造函數 - WebSocket#constructor(url, optional protocols)
    第一個參數是請求地址,第二個參數選填,表示協議名
    使用示例:
    1 var websocket = new WebSocket("ws://127.0.0.1:8080/alarm/alarmServer");
     事件 - open/message/close/error
    WebSocket#onopen, onmessage, onclose, onerror
    連接打開時,回調onopen方法,接收到后臺消息時會觸發到onmessage事件,后臺關閉時調用onclose,出現連接異常時可在onerror中捕獲
    使用示例:
     
    1 websocket.onmessage = function(evt){
    2     var data = evt.data;
    3 }
    方法 - send/close
    發送消息 - WebSocket#send(data)
    關閉連接 - WebSocket#close(optional code, optional reason)
    使用示例:
    1 websocket.send(JSON.stringify({action: "node.remove", id: "001"}));

    服務器對WebSocket的支持

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

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

    jetty對WebSocket的實現

    WebSocketServlet基于servlet標準,增加了doWebSocketConnect(...)方法,為客戶端請求創建一個后臺對應的WebSocket實例
    1 org.eclipse.jetty.websocket.WebSocketServlet
    2 {
    3 WebSocket doWebSocketConnect(HttpServletRequest request, String protocol)
    4 }

    后臺WebSocket類,與客戶端WebSocket類對應,能監聽open, message, close等狀態變化事件,并包含一個Connection屬性,用于向客戶端發送消息

    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 }
     
    本篇先做介紹,后續將介紹一個WebSocket與TWaver組件結合的實例...

    評論

    # re: HTML5 WebSocket 技術介紹  回復  更多評論   

    2013-02-21 10:57 by 12
    11

    # re: HTML5 WebSocket 技術介紹  回復  更多評論   

    2015-08-03 12:09 by 水電費
    范德薩

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


    網站導航:
     
    主站蜘蛛池模板: 无码精品人妻一区二区三区免费看| 久久精品国产亚洲AV麻豆不卡| 337p日本欧洲亚洲大胆色噜噜| a级日本高清免费看| 在线精品亚洲一区二区小说| 一级做a爱过程免费视频高清| 亚洲国模精品一区| 一级毛片正片免费视频手机看| 亚洲精品tv久久久久久久久久| 五级黄18以上免费看| 亚洲视频在线免费| 两个人日本免费完整版在线观看1| 亚洲夜夜欢A∨一区二区三区| 免费人成在线观看网站| 亚洲精品中文字幕乱码影院| 男人的好免费观看在线视频| 蜜芽亚洲av无码一区二区三区| 国产18禁黄网站免费观看| 久草免费福利在线| 亚洲高清在线播放| 两个人的视频高清在线观看免费| 亚洲乱亚洲乱妇24p| 亚洲欧洲自拍拍偷精品 美利坚 | 日韩人妻一区二区三区免费| 精品亚洲麻豆1区2区3区| 免费毛片在线看片免费丝瓜视频| 亚洲AV无码国产一区二区三区| 亚洲日本中文字幕一区二区三区| 久久午夜无码免费| 亚洲伊人久久大香线蕉AV| 亚洲国产精品激情在线观看| 免费观看在线禁片| 中文字幕亚洲情99在线| 亚洲综合区小说区激情区| 8x8x华人永久免费视频| 亚洲AV无码AV男人的天堂不卡| 永久亚洲成a人片777777| 成人免费的性色视频| 日韩在线视频线视频免费网站| 婷婷亚洲综合五月天小说| 麻豆国产入口在线观看免费|