Front-end implementation of polling, long polling, and web sockets

Web Socket

Application scenario: Instant Messaging: Stock market analysis, chat rooms, online games, etc., instead of polling and long polling

Polling

Polling is at a specific time interval (such as every 1 seconds), the browser sends an HTTP request to the server, and then the server returns the latest data to the client's browser. This traditional HTTP request pattern has obvious drawbacks – the browser needs to constantly make requests to the server, but the header of the HTTP request is very long, and the useful data contained in it may be a small value, which consumes a lot of bandwidth.

var xhr=Newxmlhttprequest () setinterval (function< Span class= "Hljs-function" > () {xhr. Open ( ' GET ' ,  '/user ') xhr. onreadystatechange = function () { }; xhr. send () },1000)            

Long polling:

Ajax implementation: After sending Ajax, the server will block the request until there is data passing or time-out to return. The client-side JavaScript response handler functions to re-establish the connection after processing the information returned by the server, making a request again.

    function Ajax(){ var xhr = new XMLHttpRequest (); XHR. Open (' GET ','/user '); XHR. onreadystatechange = function(){ ajax (); }; XHR. send (); }< /c8> 

Web Socket:

轮询与长轮询都是基于HTTP的，两者本身存在着缺陷:轮询需要更快的处理速度；长轮询则更要求处理并发的能力;两者都是“被动型服务器”的体现:服务器不会主动推送信息，而是在客户端发送ajax请求后进行返回的响应。而理想的模型是"在服务器端数据有了变化后，可以主动推送给客户端",这种"主动型"服务器是解决这类问题的很好的方案。Web Sockets就是这样的方案。

NPM Install WS required FirstServer-sidevar Server=Require' WS ').Server;var wss=NewServer ({Port:2000});Wss.On' Connection ',function(ws{Ws.On' Message ',function(Data{Ws.Send' Hello, client, I'm a server! ');Console.Log (data);})});Node Clientvar WebSocket=Require' WS ');var socket=NewWebSocket (' Ws://localhost:2000/');Socket.On' Open ',function(){Socket.Send' Hello, server, I'm the client ');});Socket.On' Message ',function(Event{Console.Log (Event);})HTML Client (note: Only one is required for browser client and node client)<script>var socket=NewWebSocket (  ' ws://localhost:2000/') socket. onopen =  Function{}; socket. onmessage =  Function (event) {console. log (event. Data) }</SCRIPT> 
 
 Reprint: https://www.cnblogs.com/ zhaowinter/p/5332681.html              

Polling, long polling, and front-end implementation of Web sockets