在前端开发中，经常需要处理大规模数据集，如实时股票行情、实时聊天消息等。传统的 AJAX 方式，需要不断地向服务器发送请求，获取最新的数据，这种方式会对服务器造成较大的负担。而 SSE（Server-Sent Events）技术，则可以有效地解决这个问题。
SSE 的原理
SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端推送数据，而不需要客户端不断地向服务器发送请求。SSE 的原理是通过一个长连接，将服务器端的数据流实时地推送到客户端。客户端只需要一次性建立连接，然后就可以一直等待服务器推送数据，直到连接断开。
SSE 的数据格式是纯文本，采用了类似于 JSON 的格式，每个数据块以“data: ”开头，以“\n\n”结尾，中间可以包含多个属性。客户端通过监听“message”事件，即可接收到服务器推送的数据。
SSE 的优势
相比传统的 AJAX 方式，SSE 有如下优势：
实时性更强。SSE 可以实时地推送数据，而不需要客户端不断地向服务器发送请求。
减少了服务器的负担。SSE 只需要一次性建立连接，之后就可以一直等待服务器推送数据，不需要频繁地向服务器发送请求，减少了服务器的负担。
更好的兼容性。SSE 是基于 HTTP 协议的，可以在所有现代浏览器中使用，无需安装插件。
SSE 的应用
SSE 可以应用于许多场景，如实时股票行情、实时聊天消息、实时推送系统通知等。下面以实时聊天消息为例，演示 SSE 的应用。
服务端代码
----- ---- - ----------------
----- -- - --------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---- -
------------------ - --------------- ----------- ---
----------------------------- - -------------------------
- ---- -- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - ------ -------- ------ -------------------------- ---------- ------- --------------
----------------
-- ------
- ---- -
-------------------
----------
-
---
------------------- -- -- -
------------------- --------- -- ------------------------
---上述代码创建了一个 HTTP 服务器，监听 3000 端口。当客户端访问根路径“/”时，返回一个 HTML 页面。当客户端访问“/sse”路径时，返回一个 SSE 流，每隔 1 秒钟向客户端推送一条消息。
客户端代码
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
---- --------------------
--------
----- -------- - ------------------------------------
----- ------ - --- --------------------
---------------------------------- ------- -- -
----- ---- - -----------------------
------------------ -- -------------- ---------------------
---
---------
-------
-------上述代码创建了一个 HTML 页面，其中包含一个用于显示消息的 div 元素。通过 JavaScript 代码创建了一个 EventSource 对象，监听“/sse”路径的 SSE 流。当有新的消息推送时，通过“message”事件，将消息显示在 div 元素中。
总结
SSE 是一种基于 HTTP 协议的服务器推送技术，可以实现实时推送数据，减少服务器的负担，具有较好的兼容性。在处理大规模数据集的场景下，SSE 可以提高应用程序的实时性和性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663ca048d3423812e4a8e1bc