前端 - 輪詢, 長輪訓, websocket

輪詢

概念

ajax 輪詢的原理很簡單，讓瀏覽器間隔幾秒就發送一次請求，詢問服務器是否有新信息

代碼

function showUnreadNews()  
{  
    $(document).ready(function() {  
        $.ajax({  
            type: "POST",  
            url: "unread_list.php",  
            dataType: "json",  
            success: function(data) {  
                alert(data);  
            }  
        });  
    });  
}  
setInterval('showUnreadNews()',5000);  //輪詢執行，5000ms一次  

 

長輪訓

概念

原理跟 ajax輪詢 差很少，都是採用輪詢的方式，不過採起的是阻塞模型

也就是說，客戶端發起鏈接後

若是沒消息，就一直不返回Response給客戶端，直到有消息才返回或超時

返回完以後，客戶端再次創建鏈接，周而復始，基於事件的觸發，一個事件接一個事件

代碼

function showUnreadNews()  
{  
    $.ajax({  
        type: "POST",  
        url: "unread_list.php",  
        dataType: "json",  
        success: function(data) {         
            //處理返回數據
            alert(data);
            //再次請求
            showUnreadNews();
        },
        complete:function(XMLHttpRequest,textStatus)
        {  
            if(textStatus=='timeout'){//判斷是否超時
                showUnreadNews();//超時，從新請求
            }  
        }
    });   
}

websocket

概念

WebSocket是HTML5開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。

瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道, 二者之間就直接能夠數據互相傳送。 

詳細跳轉 　　 Flask websocket

代碼

var ws;

function WebSocketTest()
{
   if ("WebSocket" in window)
   {
      alert("您的瀏覽器支持 WebSocket!");

      // 打開一個 web socket
      ws = new WebSocket("ws://localhost:9998/echo");

      ws.onopen = function()
      {
         // Web Socket 已鏈接上，使用 send() 方法發送數據
         ws.send("發送數據");
         alert("數據發送中...");
      };

      ws.onmessage = function (evt) 
      { 
         var received_msg = evt.data;
         alert("數據已接收..." + received_msg);
      };
      ws.onerror = function (evt) {
          //出錯
          alert(JSON.stringify(evt));
       }
      ws.onclose = function()
      { 
         // 關閉 websocket
         alert("鏈接已關閉..."); 
      };
   }
   else
   {
      // 瀏覽器不支持 WebSocket
      alert("您的瀏覽器不支持 WebSocket!");
   }
}

ws.close();//關閉鏈接