前端开发中，我们常常需要将实时数据在页面上展示给用户，在实现这个功能的时候，我们就会有选择 SSE（Server-Sent Events） 和长轮询的疑惑，今天我们来探讨一下这两种技术的利弊以及适用场景。
什么是 SSE 和长轮询？
先来简单介绍一下 SSE 和长轮询。
SSE 是一种 HTML5 规范，它允许服务器将数据实时推送到客户端，客户端通过 EventSource 对象接收服务端发送的数据。相较于 Ajax 请求，SSE 更加节省网络开销，减少了不必要的请求，因此性能更优。
长轮询是指客户端像服务端发起一个请求，如果服务端没有数据更新，那么服务端就会一直 hold 这个请求，直到有实时数据变化才回复该请求并返回数据，同时客户端收到数据后立即再次发起一个新的请求，如此往复。这种方式虽然能实现实时更新数据，但毕竟需要大量的轮询请求，也会给服务端造成比较大的压力。
SSE 和长轮询的利弊对比
优点
SSE
- 服务端只需要进行一次响应，前端不需要再次向服务端发起请求，减少了前后端之间的通信。
- 不需要像 WebSocket 轮询连接状态，节省了性能开销。
- 可以更轻松地处理在连接过程中断开的情况，同时 SSE 在浏览器和服务端之间只需要一个 HTTP 连接，能够比较好的避免连接频繁的问题。
长轮询
- 相对于 SSE，因为数据变化时客户端主动发起请求的方式，长轮询在各种浏览器和后端都有良好的兼容性。
- 与 SSE 相比，长轮询有更好的扩展性，因为长轮询可以在任何情况下使用，而 SSE 只能使用在对 SSE 做了特殊处理的服务。
- 在处理一些较为差的网络情况时，长轮询是一个更好的选择。因为只有在客户端请求到数据之后才会关闭请求，可以减少客户端上开启不必要的请求带来的开销。
缺点
SSE
- SSE 目前 Safari 浏览器不支持，降低了该技术的可行性。
- SSE 收到的数据是 string 类型，因此需要加以处理后才能使用。
长轮询
- 需要频繁的 HTTP 连接和请求，一旦用户量过大，将会对服务端造成较大压力。
- 容易造成响应时间延长和负载过高的情况。
如何选择？
那么如何选择 SSE 和长轮询呢？通常会根据实际需求以及服务端的性能来选择。
SSE 在服务端推送较为频繁的情况下，能够有效降低连接频繁的问题，同时减少 HTTP 连接产生的带宽资源。但是在一些浏览器不支持 SSE 的情况下，该技术将无法使用。
长轮询则可以在各种浏览器和后端都兼容的情况下使用，适合在数据变化不大的情况下使用，同时在处理一些较为差的网络情况时，也是一个更好的选择。
最终，在实际开发中，我们可以根据实际的需求和服务端性能来灵活选择 SSE 和长轮询，以达到最优化的效果。
示例代码
SSE 示例代码
服务端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
-------------------------- ----- ---- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ----------- - --- ---------------------
---------------- ---------------------
-- ------
- ---- -
----- ---- - ------------------------------
------------------ -
--------------- -----------
---
-------------
-
--
--------------HTML 代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------------
-------
------
---- ------------------
--------
----- ------ - ----------------------------------
-- ---------------------- -
----- ------ - --- --------------------
---------------- - -------- ------- -
---------------- -- -----------------------
-
- ---- -
---------------- - -------- ------- ------- ------
-
---------
-------
-------长轮询示例代码
服务端代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------------------- ----- ---- -
-- -------- --- ----------- -
------------------- -- -
------------------ -
--------------- ------------------
---
--------------------------
----- --- ---------------------
------- ---------
----
----------
-- ------
- ---- -
------------------ -
--------------- -----------
---
---------
--------
----- ------ - ----------------------------------
-------- --------- -
----- --- - --- -----------------
--------------- ------------
------------------------------------ ----------------------------------
-----------
---------- - -------- -- -
----- -------- - -----------------------------
---------------- - --------------
------------------- -- -
----------
-- ------
--
-
----------
---------
---- ------------------
--
-
--
--------------HTML 代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------- ------- ------------ ------- ------ ---- ------------------ ------- -------
结论
综上所述，SSE 和长轮询在实际使用过程中都各有利弊，需要根据实际需求灵活选择。如果需要实时地推送数据，SSE 是更优的选择；如果数据变化不是很频繁，则可以选用长轮询。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e8800e30a6581ceb4993a