在现代 Web 应用程序中，实时性变得更加重要，尤其是在像在线游戏、实时数据可视化和聊天应用程序等场景下。为了实现实时通信，需要一种机制来在 Web 上进行长时间的持续连接， SSE（Server-Sent Events）正是其中之一。
SSE 是一种实现服务器推送数据到客户端的技术。在 SSE 中，客户端通过 HTTP 连接到服务器，并从服务器接收事件流。服务器在向客户端发送事件流时保持连接处于打开状态，因此可以在事件流发射时间之间使用事件推送技术。
在本教程中，我们将学习如何使用 SSE 将后端数据推送到前端，并在前端浏览器中动态更新数据。
如何启用 SSE
要启用 SSE，需要使用 EventSource API。这个 API 允许我们创建一个 EventSource 对象，该对象可以连接到服务器，打开一个通道以接收事件流。
以下是一个基本的 EventSource 示例代码：
var eventSource = new EventSource("/events");
eventSource.onmessage = function(event) {
console.log(event.data);
};在这个示例中，我们使用 EventSource 对象的 onmessage 方法来捕获接收到的事件。我们还将 EventSource 对象连接到了 /events 的路由上，这个路由可以在服务器端进行设置。
服务器端 SSE 实现
要实现 SSE，我们需要创建一个 HTTP 端点，该端点将发送事件流到 EventSource 对象。在 Node.js 中，我们可以使用 res.write 和 res.flush 方法实现此目的。
以下是一个基本的 SSE 服务器端示例代码：
-- -------------------- ---- -------
------------------ ------------- ---- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
---------------------- -
----------------- --------------
---------------- - - --- ---------------- - --------
------------
-- ------
---在这个示例中，我们在向客户端发送数据时使用 event: heartbeat 标识符，这是一个特殊的标识符，用于保持 SSE 连接持续。
我们还使用 setInterval 方法设置一个间隔时间来向 EventSource 对象发送事件。
同时，我们将响应的 Content-Type 设置为 text/event-stream，以确保我们的数据以正确的格式发送到客户端。
现在，当用户访问 /events 路由时，就会在浏览器中打开一个新的 EventSource 通道，可以开始接收事件流。
SSE 安全性和错误处理
与任何其他 Web 技术一样，SSE 也存在安全问题。为此，我们必须对事件流进行验证，以确保传输的数据不是恶意的。
我们还必须考虑到数据传输中出现的可能错误，比如网络连接中断或服务器故障。在这种情况下，我们需要使用 close 事件来在客户端中处理 SSE 的关闭事件。
以下是一个稍微复杂一些的 SSE 服务器端示例代码，包含了安全性和错误处理：
-- -------------------- ---- -------
------------------ ------------- ---- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
-- -------
-- -------------------------------------- --- --- -
-------------------------------------
-------
-
-- ------
---------------------- -
--- ---- - ------- --------
--- ----- - ----------
-- -------------- - ---- -
----------------------
-------
-
----------------- - - ----- - ------
---------------- - - ---- - --------
------------
-- ------
-- -------
--------------- ---------- -
---------------- ---------- ----------
---
---在这个示例中，我们模拟了身份验证，并使用 res.status 方法返回错误状态。我们在随机时间内模拟了服务器的错误并关闭了 SSE 连接，以便客户端可以在出现问题时做出相应的处理。
在关闭事件中，我们使用 req.on 方法来捕获 SSE 连接的关闭事件，并在客户端中显示关闭事件。
总结
在本教程中，我们学习了如何使用 SSE 将后端数据推送到前端。我们首先了解了如何使用 EventSource 对象启用 SSE 并连接到服务器。然后，我们学习了如何在服务器端实现 SSE，包括安全性和错误处理。
SSE 提供了一种简单而有效的机制，可以将实时数据推送到前端浏览器中。它与其他技术，如 WebSockets、长轮询和 AJAX 略有不同，因此需要根据特定的场景来选择使用哪种技术。
在实际开发中，我们可以使用 SSE 技术来构建实时应用程序，比如聊天室、在线游戏和实时数据可视化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647e22e648841e9894de4532