從web實時通信講H5 WebSocket 轉

通常我們打開一個瀏覽器訪問網頁時,都會向頁面所在的服務器發送一個HTTP請求,然後web服務器確認請求並向瀏覽器做出響應。簡單的說,就是一個請求對應的一個響應。然而這種方法對許多的應用場景都會使服務器的HTTP請求變得臃腫,甚至崩潰。比如:對於股價、新聞每日推送、好友聊天信息收發等情況,如果每次都是客戶端發送HTTP請求給服務器來獲取相應數據,那麼用戶就需要每次都對頁面進行刷新從而來獲取最新的消息。相信這樣的網頁用戶也不會喜歡

前期實時通信解決方式

1> HTTP輪詢 

    1.定義:輪詢是一種定時性的同步調用,客戶端想服務器發送請求查看是否有可用的新數據。請求以固定的時間間隔發出,不管是否有信息,客戶端都會得到響應數據:如果有可用信息,服務器就會將它們返回給客戶端;如果沒有可用信息,服務器就會返回一個拒絕響應,客戶端接受到這種響應時就可以關閉連接。輪詢的本質上就是推遲完成HTTP響應,向客戶端提交信息

    2.適用場景:在知道信息交互的時間間隔的情況下,使用它是一個好的辦法,然而大多數的情況下,我們都不知道信息交付的時間間隔,我們不知道用戶什麼時候發數據,新聞什麼時候更新等等..

    3.缺陷:使用HTTP輪詢方式需要服務器有很快處理速度和資源,而且發送的http請求也很多

2> 長輪詢

    1.定義:客戶端向服務器端請求信息,並在設定的時間內打開一個連接。服務器如果沒有信息推送,那麼請求就會一直打開,知道服務器響應數據或者設定的時間用完爲止。當請求關閉時,客戶端又可以重新向服務器發送請求信息。長輪詢是一種阻塞模型,類似於打電話,沒有人接就不掛電話,知道撥打電話時長超過限制或者對方接了。長輪詢也稱爲Comet或者反向AJAX,長輪詢延長HTTP響應的完成時間,直到服務器響應數據或者設定時間用完,這種技術通常稱爲掛起GET或者擱置POST

    2.缺陷:當信息量很大時,長輪詢的性能相較於傳統的通信而言並沒有明顯的優勢,因爲客戶端必須繁重得重連服務器來獲取新信息。並且長輪詢缺乏標準實現。而且長輪詢需要有很高的併發能力即同時接待多個客戶的能力

3> 流化技術 

    1.定義:在流化技術中,客戶端發送一個請求,服務器發送並維護一個持續更新和保持打開(可以指定時間段,也可以設置爲無限)的開放響應,每當服務器有需要交付給客戶端的信息時,它就更新響應

    2.缺陷:流化技術中的服務器從不發出完成HTTP響應的請求,從而使連接一直保持打開狀態。這種情況下,代理和防火牆可能會緩存HTTP響應,導致信息交付的延遲時間增加,因此,大多數的流化測試對於存在防火牆和代理的網絡都是不友好的

WebSocket

1.定義:WebSocket是一種自然的全雙工、雙向、單套接字連接。通過使用WebSocket,客戶端發送的即時HTTP請求變成了打開WebSocket的單一請求,並且這一請求式連接會一直重用,知道用戶關閉。

2.優勢:WebSocket明顯減少了延遲時間,因爲只要建立起WebSocket連接,服務器就可以在消息可用時發送他們,客戶端和服務器連接全過程都只發出一個請求,建立一個連接,服務器不需要等待來自客戶端的HTTP請求,同時,客戶端也可以在任何時候向服務器發送消息

WebSocket與輪詢方式發送請求的方式

WebSocket測試小實例 

// 新建js文件 hellows.js 
<html> 
  <head> 
    <title>hello websocket</title> 
    <meta charset='UTF-8' /> 
  </head> 
  <body> 
    <input type="button" id='test' value='點我測試' /> 
    <!--引入JQuery文件簡化DOM操作(其實就是懶~)--> 
    <script src="JS/jquery.min.js"></script> 
    <script>
            $(function(){
                //websocket測試服務器
                var url = "ws://echo.websocket.org/echo";
                var ws = null;
                function createws(){
                    if('WebSocket' in window)
                        ws = new WebSocket(url);
                    else if('MOzWebSocket' in window)
                        ws = new MozWebSocket(url);
                    else
                        console.log("瀏覽器太舊,不支持");
                }
                function btnfun(){
                    createws();
                    //成功建立WebSocket連接時觸發onopen事件,通常客戶端發送數據都是放在open事件裏面
                    ws.onopen = function(){
                        console.log("connected");
                        ws.send("hello world");
                    };
                    //接受服務器響應數據時觸發onmessage事件
                    ws.onmessage = function(event){
                        console.log("receive message:"+event.data);
                        //關閉websocket連接
                        ws.close(999,"close normal");
                    };
                    //服務器處理異常,通常在服務器裏try-catch發生異常時或者連接異常時觸發onerror事件
                    ws.onerror = function(err){
                        console.log("error: "+err);
                        ws.close(1000,"close after error");
                    };
                    //websocket連接關閉時觸發onclose事件
                    ws.onclose = function(event){
                        console.log("close reason: "+event.reason);
                    };
                };
                //爲button綁定事件
                $("#test").click($.fn.btnfun);
            });
        </script> </body> </html>

瀏覽器打開該頁面,打開瀏覽器的控制檯,然後點擊裏面的按鈕將會出現一系列我們在裏面設置的測試輸出數據則代表websocket測試成功了。如果console控制檯輸出的是“瀏覽器太舊,不支持”,就表示當前所使用的瀏覽器版本太舊,雖然目前所有的主流瀏覽器的最新版本都包含了對WebSocket API以及其協議的支持,但是還是有一些在用的舊版本的瀏覽器沒有這方面的支持,因此想要獲得WebSocket的支持可以去下載新版本或者主流的瀏覽器,也可以研究變通或者模擬策略來自己模擬實現WebSocket~~ 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章