1. 概述
在前端开发中，我们经常需要实现实时推送、消息通知等功能。为了实现这些功能，我们会选择使用 HTTP 长轮询或 SSE。
HTTP 长轮询是指客户端向服务器发送一个请求，服务器只有在有新数据时才会响应请求。如果没有新数据，则服务器保持连接状态并持续等待新数据，直到数据可用或者达到指定的时间限制。SSE (Server-Sent Events) 是一种浏览器与服务器之间的一种单向通信技术，通过 SSE 可以让服务器持续向客户端推送数据。
虽然 HTTP 长轮询和 SSE 都可以用来实现实时推送和消息通知等功能，但它们的实现原理和应用场景是不同的。
2. HTTP 长轮询
2.1 原理
HTTP 长轮询的原理是客户端通过 AJAX 向服务器发送一个长时间保持连接的请求，服务器在有新数据时才会响应请求。如果没有新数据，则服务器会保持连接状态并持续等待新数据，直到数据可用或者达到指定的时间限制。客户端在接收到响应后，再次向服务器发送请求，以此类推。
2.2 应用场景
HTTP 长轮询适用于以下场景：
- 实时在线聊天
- 实时股票行情
- 实时游戏情况
2.3 示例代码
客户端代码：
-- -------------------- ---- -------
-------- ---------- -
-------------- -------------- - -- -------
-- -----
-- ---
----------- -- ---------
---
-
-----------服务器端代码：
-- -------------------- ---- -------
---------------- ------------- ---- -
----- ------- - ----------------- -- ------ -- ------- -- -
----- --------- - -----------
----- ------------ - --------------------- -
---------------------- -- ----
-- ---------
----- ---------- - -------------- -
--------------------------- -- ------
--------------- -- -----
--
-- --------
-- ----------------------- -
----------------------------------
- ---- -
-------------------------- ------------ -- -------
-
---3. SSE
3.1 原理
SSE 的原理是客户端通过 EventSource API 向服务器发送一个请求，服务器可以持续推送新数据给客户端。客户端通过监听 message 事件来接收新数据。
3.2 应用场景
SSE 适用于以下场景：
- 实时新闻推送
- 实时天气预报
- 实时定位信息
3.3 示例代码
客户端代码：
const source = new EventSource('/stream');
source.addEventListener('message', function(e) { // 接收新数据
const data = JSON.parse(e.data);
// 处理新数据
// ...
}, false);服务器端代码：
-- -------------------- ---- -------
------------------ ------------- ---- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
----- --------- - -------------- -
----------------- ------------
---------------- - - -------------------- - --------
--
-- -------
------------------------------ -
----------------
---
---4. 总结
- HTTP 长轮询和 SSE 都可以用来实现实时推送和消息通知等功能，但它们的实现原理和应用场景是不同的。
- HTTP 长轮询适用于实时在线聊天、实时股票行情、实时游戏情况等场景。
- SSE 适用于实时新闻推送、实时天气预报、实时定位信息等场景。
- 使用 HTTP 长轮询或 SSE 可以在前端实现实时推送和消息通知等功能，提升用户体验。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472f3cc968c7c53b007d777