前言：Server-sent Events 是一种标准的 Web API，可用于实时更新从服务器端传输给客户端的数据。在本文中，我们将介绍如何在 Angular5 中使用 Server-sent Events 实现实时数据更新，并提供示例代码。
Server-sent Events 概述
Server-sent Events (SSE) 是一种 Web API，用于实时更新从服务器端传输给浏览器的数据。它允许服务器端不间断地发送事件流，而不需要浏览器不断地发出请求。这在实时应用程序中非常有用，例如股票报价、聊天室和白板。
SSE 是与 WebSocket 相似的技术，但相对于 WebSocket，SSE 更简单，适合于轻量级通信，且允许浏览器使用 HTTP 连接到服务器。
使用 SSE with Angular5
在 Angular5 中使用 SSE 非常简单。我们只需要在服务端配置事件流，然后在客户端使用 EventSource 类来监听事件流。
以下是完整的实现示例：
配置服务器端
在服务器端，我们需要设置 SSE 事件流。这可以使用以下 Node.js 代码实现：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - -----
----------------------------------
--------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
----- ---- - -
-------- ------------ -------
----- --- ---------------------------
--
-------------- -- -
---------------- ------------------------------
-- ------
---
---------------- -- -- -
------------------- --------- -- ---------------------------
---在上述代码中，我们为路径 '/sse' 设置了 SSE 事件流。每秒钟，我们将一个包含当前时间戳的 JSON 对象发送到客户端。
配置客户端
在客户端，我们需要使用 EventSource 类来监听服务器端发送的事件流：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------- ------- --------
------- ---- --------
-
--
------ ----- ------------ -
-------- ------ - ---
----- ------ - ---
------------- -
----- ----------- - --- --------------------
--------------------------------------- ------- -- -
----- ---- - -----------------------
------------ - -------------
--------- - ----------
---
-
-在上述代码中，我们创建一个 EventSource 对象，并将其指向 '/sse' 路径。每当服务器端将新事件发送到客户端时，我们将在 message 与 time 属性中更新数据。
结论
在本文中，我们学习了在 Angular5 中如何使用 SSE 实现实时数据更新。我们了解了 SSE 的概念以及如何在服务器端和客户端配置 SSE。我们还通过示例代码介绍了如何在 Angular5 中使用 EventSource 类。
使用 SSE 的好处在于它不仅可以实时更新数据，而且也适用于轻量级应用程序。服务器端可以使用 SSE 来向客户端发送实时数据，而客户端可以使用 EventSource 类来处理这些事件并更新 DOM。
在实时应用程序中，SSE 是一个非常有用的技术，它可以帮助我们在服务器端和客户端之间建立实时通信。如果你正在尝试构建实时应用程序，则可以使用 SSE 或 WebSocket 来构建此应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67164927ad1e889fe21bca0c