從web實時通訊講H5 WebSocket

時間 2019-11-11

標籤 web 實時通訊 h5 websocket 欄目 HTML 简体版

原文原文鏈接

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

前期實時通訊解決方式html

1> HTTP輪詢 jquery

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

2.適用場景：在知道信息交互的時間間隔的狀況下，使用它是一個好的辦法，然而大多數的狀況下，咱們都不知道信息交付的時間間隔，咱們不知道用戶何時發數據，新聞何時更新等等..瀏覽器

3.缺陷：使用HTTP輪詢方式須要服務器有很快處理速度和資源，並且發送的http請求也不少緩存

2> 長輪詢服務器

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

2.缺陷：當信息量很大時，長輪詢的性能相較於傳統的通訊而言並無明顯的優點，由於客戶端必須繁重得重連服務器來獲取新信息。而且長輪詢缺少標準實現。並且長輪詢須要有很高的併發能力即同時接待多個客戶的能力網絡

3> 流化技術併發

1.定義：在流化技術中，客戶端發送一個請求，服務器發送並維護一個持續更新和保持打開（能夠指定時間段，也能夠設置爲無限）的開放響應，每當服務器有須要交付給客戶端的信息時，它就更新響應socket

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~~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。