在现代 web 应用开发中，前端与后端的实时通信变得越来越必要。通常我们会使用轮询（polling）技术，即客户端定期向服务器发送请求来查看是否有新数据。不过，这种方式会导致无谓的网络流量和资源浪费。因此，前端开发者常常使用 Server-sent Events 和 AJAX/Long Polling 技术来实现实时通信。
Server-sent Events（SSE）
Server-sent Events（SSE）是 HTML5 新标准中定义的一种服务器主动推送技术，允许服务器发送任意数量的数据到一个客户端，并让接收数据的客户端自动更新页面的内容，已达到实时通信的效果。
SSE 的优点：
- 实时性更强。
- 消耗的网络资源较少。
- 服务器将事件推送数据的可靠性更高，没有 HTTP 报文头的开销，只有数据的传输，所以 SSE 比传统的 Websocket 更加轻量级。
SSE 的缺点：
- SSE 仅支持单向的客户端与服务器的通信，不可以向服务器发送数据，这意味着需要借助 AJAX 等技术完成双向通信。
- SSE 不能兼容所有的浏览器。
AJAX / Long Polling
AJAX / Long Polling 是指从客户端通过 XMLHttpRequest（XHR）创造异步请求，服务器接到请求后等待信息变化后响应，从而实现 "长轮询"（long polling 或 Comet），用来和客户端保持连接的状态，直到有信息可以到达客户端。
AJAX/Long Polling 的优点：
- 兼容所有的浏览器。
- 利用了现有的 HTTP / HTTPS 协议，不存在安全方面的问题。
AJAX / Long Polling 的缺点：
- 相比SSE， 实时性较低。
- 通过轮询机制实现，浪费了很多请求和响应的浪费（例如，当客户端请求在相同时间间隔内没有得到更新时，客户端仍会发送很多空的请求）。
示例代码
SSE demo
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
-------
------
------- ---------
---- ---------
------
--------
-- ------- -- ------ ---- ------
--- ------ - --- -----------------------
-------------------
-- ------ -- -- ------------
---------------- - --------------- -
-- ------ -- ---- --- -----------
---------------------------------------- -- ----- - ---------- - -------
--
---------
-------
--------- -------------------- ---- -------
-----
--------------------- --------------------
---------------------- -----------
-- - --
----- ------ -
---- ------ ------ ---- -- --- - - ------------- - -------
-- ---------------------- -
-- -- --
-
-- --- -- -- -
-----
-
--------
---------
-
--AJAX/Long Polling demo
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------- ------------
-------
------
-------- --- ---- ------- ---------
---- -------------
------
--------
-- --- --- --- --------- --- --------
--- ------- - -----------------------------------
-- ------ --- ------- ------
--- --- - --- -----------------
-------- ------ -
-- ---- --- ------------ -------
--------------- -------------- ------
-- --- --- -------- -- --- ---- --- -------- -------
---------------------- - ---------- -
-- --------------- --- -------------------- -
-- ----------- --- ---- -
----------------- - -----------------
-
-
--
-- ---- --- -------
-----------
-
-- --- -- --- ---- --------
----------------- ------
---------
-------
--------- -------------------- ---- -------
-----
----- - -------------------- - ------------------ - --
-------- - ------- ----- --- ------- ------ ----
----- --------- - ----- - --- - -- ---- ----- -- ------- ---- ------ ----- ---- -------
---------
-------- - -------
-
--------
---- -------- ------ ----- - - -------
--总结
Server-sent Events 和 AJAX/Long Polling 都是前端实现实时通信的方法之一，各有优缺点，选择具体的技术方案需要根据实际场景和需求进行抉择。SSE 可以较好地与现代化的前端框架进行整合，处理实时推送相对更方便，而 AJAX / Long Polling 可以适应任何浏览器并利用现有 HTTP / HTTPS 协议，但实时性较弱。在实际应用中，我们需要根据实际情况，综合考虑选择哪种技术，或使用其他的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644fa5cd980a9b385b906391