轮询、长轮询和网络套接字的前端实施

最编程 2024-04-26 11:56:05

...

【直播预告】大模型会取代程序员吗？”

<div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown"><h2 id="web-socket">Web Socket</h2> 应用场景:实现即时通讯:如股票交易行情分析、聊天室、在线游戏等，替代轮询和长轮询 <h3 id="轮询">轮询</h3> <blockquote> 轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的有用数据可能只是一个很小的值，这样会占用很多的带宽。 </blockquote> <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript hljs">var xhr = new XMLHttpRequest(); setInterval(function(){ xhr.open('GET','/user'); xhr.onreadystatechange = function(){

    <span class="op">};</span>
    <span class="va">xhr</span>.<span class="at">send</span>()<span class="op">;</span>
<span class="op">},</span><span class="dv"><span class="hljs-number">1000</span></span>)</code></pre></div>

<h3 id="长轮询">长轮询:</h3> ajax实现:在发送ajax后,服务器端会阻塞请求直到有数据传递或超时才返回。客户端JavaScript响应处理函数会在处理完服务器返回的信息后，再次发出请求，重新建立连接。 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript hljs"> function ajax(){ var xhr = new XMLHttpRequest(); xhr.open('GET','/user'); xhr.onreadystatechange = function(){ ajax(); }; xhr.send(); }</code></pre></div> <h3 id="web-socket-1">Web Socket:</h3> <pre><code class="hljs cpp">轮询与长轮询都是基于HTTP的，两者本身存在着缺陷:轮询需要更快的处理速度；长轮询则更要求处理并发的能力;两者都是“被动型服务器”的体现:服务器不会主动推送信息，而是在客户端发送ajax请求后进行返回的响应。而理想的模型是"在服务器端数据有了变化后，可以主动推送给客户端",这种"主动型"服务器是解决这类问题的很好的方案。Web Sockets就是这样的方案。</code></pre> <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript hljs">//需要先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客户端只需要一种)

<span class="op">};</span>
<span class="va">socket</span>.<span class="at">onmessage</span> <span class="op">=</span> <span class="kw"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function">(<span class="hljs-params">event</span>)</span><span class="op">{</span>
    <span class="va"><span class="hljs-built_in">console</span></span>.<span class="at">log</span>(<span class="va">event</span>.<span class="at">data</span>)
<span class="op">}</span>

</script> </code></pre></div>

</div>

上一篇： js 获取图片 url 的 Blob 值并预览

下一篇：前端废话两个 Ajax