什么是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 库并建立连接：
--------
--- ------ - --- ------------------------------
---------------------------------- ----------- -
--------------------
-- -------
---------服务端的 Node.js 示例：
--- ---- - ----------------
------------------------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
---------------------- -
---------------- - - ---------- - --------
-- ------
----------------
------------------- ------- -- -------------------------长轮询的代码示例：
Javascript 代码：
--------- -------
-------- ---- --------- -------- ---------------
--------
-- --------- ------- -------------- -------- ----- ---
-----服务端的 Node.js 示例：
--- ---- - ----------------
------------------------------- ---- -
-- -------- --- ----------- -
--------------------- - -- ------
------------------------
----- --- ----------------
----
-- ------
- ---- -
-------------
-
----------------
------------------- ------- -- -------------------------总结
对于需要实时性的应用来说，Server-sent Events 的效率较好，但服务器端需要开启长连接，增加了维护的成本。长轮询虽然效率偏低，但却能适用于所有的浏览器，并且不需要维持长连接。因此，在实际使用过程中，需要根据实际的应用场景进行选择。
学习和指导意义
两种技术各有其适用场景和优缺点，在实际开发中需要根据实际情况进行技术选择。在选择技术时要权衡优缺点，避免将技术的使用推向极端，造成不必要的问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e80a76f6b2d6eab3373d0b