什么是Server-sent Events和长轮询
Server-Sent Events (SSE) 是 HTML5 的一部分,旨在允许浏览器通过普通 HTTP 连接从服务器接收自动更新。 SSE 与 WebSocket 不同,WebSocket 属于一个完整的双向通信协议,而 SSE 只允许服务器向客户端发送数据。
长轮询是指客户端向服务器发起一个请求,服务器不会立即返回结果,而是等待结果有所变化时才返回。一旦服务器返回结果,客户端就会立即再次发起请求,周而复始地不停轮询。
Server-sent Events与长轮询的对比
SSE的优点:
- 实时性更强。SSE 是基于 HTTP 协议的通信方式,利用消息推送,实现即时更新。
- 更流畅地嵌套于已有的 Web 技术,如CSS和JavaScript。
- SSE 可以在客户端设置重连和自定义时间间隔,增强了对网络控制的能力。
- 不需要像 WebSocket 需要完整的协议交互,扩展更加简单。
SSE的缺点:
- SSE 通信协议,需要浏览器端支持 EventSource 类。
- SSE 协议要求在服务端保持长时间的连接,增加了服务器端支持的维护成本。
长轮询的优点:
- 能够应用于所有的浏览器,因为它是基于 XMLHttpRequest。
- 能够向后兼容旧版本的浏览器。
- 由于客户端会不断请求,可以避免因负载过大导致服务器崩溃的问题。
- 服务器端不需要维持一个长连接,降低了服务器端需要处理连接数的问题。
长轮询的缺点:
- 效率偏低。由于需要不停地轮询,相当一部分请求都是没有意义的。
- 每次请求都包含 HTTP头文件,太浪费带宽。
- 服务端可以“看”到每个请求,从而知道客户端的状态,容易造成安全问题。
Server-sent Events与长轮询的应用
SSE的代码示例:
在 HTML 中引入 EventSource 的 JS 库并建立连接:
<script> var source = new EventSource('/mySSEEndpoint'); source.addEventListener('message', function(e) { console.log(e.data); }, false); </script>
服务端的 Node.js 示例:
-- -------------------- ---- ------- --- ---- - ---------------- ------------------------------- ---- - ----------------------------- --------------------- ------------------------------ ------------ --------------------------- -------------- ---------------------- - ---------------- - - ---------- - -------- -- ------ ---------------- ------------------- ------- -- -------------------------
长轮询的代码示例:
Javascript 代码:
(function poll(){ $.ajax({ url: "server", success: function(data){ //处理data }, dataType: "json", complete:poll, timeout: 30000 }); })();
服务端的 Node.js 示例:
-- -------------------- ---- ------- --- ---- - ---------------- ------------------------------- ---- - -- -------- --- ----------- - --------------------- - -- ------ ------------------------ ----- --- ---------------- ---- -- ------ - ---- - ------------- - ---------------- ------------------- ------- -- -------------------------
总结
对于需要实时性的应用来说,Server-sent Events 的效率较好,但服务器端需要开启长连接,增加了维护的成本。长轮询虽然效率偏低,但却能适用于所有的浏览器,并且不需要维持长连接。因此,在实际使用过程中,需要根据实际的应用场景进行选择。
学习和指导意义
两种技术各有其适用场景和优缺点,在实际开发中需要根据实际情况进行技术选择。在选择技术时要权衡优缺点,避免将技术的使用推向极端,造成不必要的问题。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64e80a76f6b2d6eab3373d0b