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 messagessocket.addEventListener('message', function (event) {console.log('Message from server ', event.data);}); </script> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。