Web Socket

應(yīng)用場景:實現(xiàn)即時通訊:如股票交易行情分析、聊天室、在線游戲等，替代輪詢和長輪詢

輪詢

輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務(wù)器發(fā)出HTTP request，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的HTTP request 的模式帶來很明顯的缺點 – 瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP request 的header是非常長的，里面包含的有用數(shù)據(jù)可能只是一個很小的值，這樣會占用很多的帶寬。

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

長輪詢:

ajax實現(xiàn):在發(fā)送ajax后,服務(wù)器端會阻塞請求直到有數(shù)據(jù)傳遞或超時才返回。 客戶端JavaScript響應(yīng)處理函數(shù)會在處理完服務(wù)器返回的信息后，再次發(fā)出請求，重新建立連接。

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

Web Socket:

輪詢與長輪詢都是基于HTTP的，兩者本身存在著缺陷:輪詢需要更快的處理速度；長輪詢則更要求處理并發(fā)的能力;兩者都是“被動型服務(wù)器”的體現(xiàn):服務(wù)器不會主動推送信息，而是在客戶端發(fā)送ajax請求后進行返回的響應(yīng)。而理想的模型是"在服務(wù)器端數(shù)據(jù)有了變化后，可以主動推送給客戶端",這種"主動型"服務(wù)器是解決這類問題的很好的方案。Web Sockets就是這樣的方案。 //需要先npm install ws//服務(wù)器端 var Server = require('ws').Server; var wss = new Server({port:2000 }); wss.on('connection',function(ws){ws.on('message',function(data){ws.send('你好,客戶端,我是服務(wù)器!');console.log(data);}) });//node客戶端var WebSocket = require('ws'); var socket = new WebSocket('ws://localhost:2000/'); socket.on('open',function(){socket.send('你好，服務(wù)器,我是客戶端'); }); 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 messagessocket.addEventListener('message', function (event) {console.log('Message from server ', event.data);}); </script> 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的轮询、长轮询与Web Socket的前端实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。