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.onopen = function(){

    };
    socket.onmessage = function(event){
        console.log(event.data)
    }
</script>
 

轉載：https://www.cnblogs.com/zhaowinter/p/5332681.html

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