webSocket、Ajax輪詢、長輪詢(long poll)

ajax輪詢

ajax輪詢的原理很簡單，讓浏覽器間隔幾秒就發送一次請求，詢問伺服器是否有新資訊。

一個簡單的執行個體：

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

long poll（長輪詢）

原理跟 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();//逾時，重新請求
            }  
        }
    });   
}
           

缺點：Ajax輪詢需要伺服器有很快的處理速度與快速響應。long poll需要很高的并發，展現在同時容納請求的能力。

WebSocket

WebSocket是HTML5開始提供的一種在單個 TCP 連接配接上進行全雙工通訊的協定。浏覽器和伺服器隻需要做一個握手的動作，然後，浏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。

浏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連接配接的請求，連接配接建立以後，用戶端和伺服器端就可以通過 TCP 連接配接直接交換資料。

一個簡單的執行個體：

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();//關閉連接配接