輪詢、長輪詢與Web Socket的前端實現

Web Socket

應用場景:實現即時通信:如股票交易行情分析、聊天室、在線遊戲等，替代輪詢和長輪詢

輪詢

輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP request，而後由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的HTTP request 的模式帶來很明顯的缺點 – 瀏覽器須要不斷的向服務器發出請求，然而HTTP request 的header是很是長的，裏面包含的有用數據可能只是一個很小的值，這樣會佔用不少的帶寬。

var xhr = new XMLHttpRequest();
    setInterval(function(){
        xhr.open('GET','/user');
        xhr.onreadystatechange = function(){

        };
        xhr.send();
    },1000)

長輪詢:

ajax實現:在發送ajax後,服務器端會阻塞請求直到有數據傳遞或超時才返回。 客戶端JavaScript響應處理函數會在處理完服務器返回的信息後，再次發出請求，從新創建鏈接。

function ajax(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET','/user');
        xhr.onreadystatechange = function(){
              ajax();
        };
        xhr.send();
    }

Web Socket:

輪詢與長輪詢都是基於HTTP的，二者自己存在着缺陷:輪詢須要更快的處理速度；長輪詢則更要求處理併發的能力;二者都是「被動型服務器」的體現:服務器不會主動推送信息，而是在客戶端發送ajax請求後進行返回的響應。而理想的模型是"在服務器端數據有了變化後，能夠主動推送給客戶端",這種"主動型"服務器是解決這類問題的很好的方案。Web Sockets就是這樣的方案。

//須要先npm install ws

//服務器端
var Server = require('ws').Server;
var wss = new Server({
    port:2000
});
wss.on('connection',function(ws){
    ws.on('message',function(data){
        ws.send('你好,客戶端,我是服務器!');
        console.log(data);
    })
});

//node客戶端

var WebSocket = require('ws');
var socket = new WebSocket('ws://localhost:2000/');
socket.on('open',function(){
    socket.send('你好，服務器,我是客戶端');
});
socket.on('message',function(event){
    console.log(event);
})

//html客戶端(注:瀏覽器客戶端與node客戶端只須要一種)

<script>
    var socket = new WebSocket('ws://localhost:2000');

      socket.addEventListener('open', function (event) {
          socket.send('Hello Server!');
      });
      
      // Listen for messages
      socket.addEventListener('message', function (event) {
          console.log('Message from server ', event.data);
      });
</script>