在 Web 开发中，很多时候需要实时推送数据给客户端，以便及时更新页面内容。这个过程通常需要使用轮询或 WebSocket 等技术。然而，这些技术都有一些缺点，比如轮询会增加服务器负担，WebSocket 需要在客户端和服务器之间建立长连接。而 SSE（Server-Sent Events）技术则提供了一种简单而高效的实时推送数据的方式。
SSE 简介
SSE 技术是一种基于 HTTP 协议的服务器推送技术，使用简单，兼容性好。它允许服务器向客户端发送事件流（Event Stream），客户端通过监听事件流来获取实时数据。事件流是一个不断更新的文本流，每条消息以“data:”开头，以“\n\n”结尾，中间可以包含任意文本内容。客户端通过 EventSource 对象来监听事件流，一旦有新消息到达，就会触发 message 事件，从而实现实时推送数据。
SSE 的优点
SSE 技术有以下优点：
实时性好：SSE 技术可以在数据更新时立即推送给客户端，实现实时性。
兼容性好：SSE 技术基于 HTTP 协议，浏览器支持度较高，不需要额外的插件或协议支持。
轻量级：SSE 技术的消息格式简单，数据量小，不会增加服务器负担。
易于使用：SSE 技术使用简单，只需要使用 EventSource 对象监听事件流即可。
SSE 的实现
下面我们以一个博客文章评论的实时推送为例，演示如何使用 SSE 技术。
服务端实现
服务端使用 Node.js 实现，代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
-- ------
--- -------- - -----------------------------------------------
-- -- ---- ---
----- ------ - ----------------------- ---- -- -
-- -------- --- ------------ -
-- -----
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- -----
-------------------------- ------ -- -
---------------- ---------------------------------
---
-- -------
----- -------- - ----- -- -
----- ------- - --------------------------
-----------------------
---------------- ---------------------------------
--
-------------------- ----------
-- ----
--------------- -- -- -
-------------------------------- ----------
---
- ---- -
-- ------
------------------ -
--------------- -----------
---
-----------------------------------------
-
---
-- -----
------------------- -- -- -
------------------- ------- -- ---- -------
---代码中，我们使用 http 模块创建了一个 HTTP 服务器，当客户端请求 /comments 路径时，返回一个事件流，将评论数据发送给客户端。同时，我们监听 newComment 事件，当有新评论时，将新评论数据添加到评论数据中，并发送给客户端。
客户端实现
客户端使用 HTML 和 JavaScript 实现，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
---------------
--- -----------------------
----- ------------------
------ ----------- --------------- -----------------
------ ----------- ------------------ -------------------
------- ---------------------------
-------
--------
----- ----------- - ----------------------------------------
----- --------- - --------------------------------------
----- ------------ - -----------------------------------------
-- -- ----------- --
----- ----------- - --- -------------------------
-- -- ------- --
--------------------------------------- ----- -- -
----- ------- - -----------------------
----- -- - -----------------------------
------------ - ---------------------------------- --------------------
----------------------------
---
-- ----
----- ----------- - ----------------------------------------
-------------------------------------- ----- -- -
-----------------------
----- ---- - -----------------------
----- ------- - --------------------------
-- ----- -- -------- -
----- --- - --- -----------------
---------------- -------------
------------------------------------ --------------------
------------------------- ----- ------- ----
--------------- - ---
------------------ - ---
-
---
---------
-------
-------代码中，我们创建了一个 EventSource 对象，监听 /comments 路径的事件流。当有新评论时，触发 message 事件，将新评论添加到评论列表中。同时，我们也实现了提交评论的功能，当用户提交评论时，使用 XMLHttpRequest 对象发送 POST 请求，将评论数据发送给服务器。
总结
SSE 技术是一种简单而高效的实时推送数据的方式，具有实时性好、兼容性好、轻量级、易于使用等优点。在开发实时应用中，可以考虑使用 SSE 技术来实现数据的实时推送。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6587f8fceb4cecbf2dd27d71