实时数据推送在现代 web 应用程序中越来越普遍。在传统的 web 应用程序中，客户端多数使用定期轮询机制从服务器拉取新数据。这种方式不仅效率低下，而且浪费过多带宽和服务器资源。相比之下，使用 Server-Sent Events (SSE) 技术，可以使服务器向客户端推送数据更新，不仅效率更高，而且更实时和性能更好。
在本文中，我们将介绍如何在 Angular 应用程序中使用 SSE 技术来实现实时数据推送。我们将讨论 SSE 的基础知识、如何使用 Angular 的 HttpClient 来与服务器通信以及如何在 Angular 应用程序中实现推送事件的响应。最后，我们将演示一个示例应用程序，以展示这些概念的实际应用。
Server-Sent Events (SSE) 的基础知识
SSE 是一种基于 HTTP 的协议，用于在客户端和服务器之间实现实时数据推送。SSE 的核心就是持续开放的 HTTP 连接，当服务器有数据时，它就向客户端推送新消息。一旦客户端收到数据，它就可以对该数据进行处理，而无需在每次轮询时重新获取数据。
SSE 标准规定了使用 text/event-stream 作为 MIME 类型的数据格式，数据由一系列消息（message）组成，每个消息以一个空行作为结尾。每个消息由一个或多个名称/值对组成，名称和值都由冒号分隔，名称用于标识该消息的特定类型。在这篇文章中，我们将使用这种格式作为示例 SSE 数据的格式。
下面是一个简单示例 SSE 数据的格式：
data: Hello, World! (This is a simple message)\n\n
data: { "name": "John", "age": 20 }\n\n每个消息以一个空行结束，可以包含单个文本字符串、JSON 字符串或其他数据类型。在接下来的示例中，我们将使用 JSON 字符串作为 SSE 数据的格式。
与服务器通信
要使用 SSE 技术进行实时数据推送，首先要与服务器建立持续开放的 HTTP 连接，这可以通过 Angular 的 HttpClient 类和从 EventSource 类继承的 SseService 类来实现。HttpClient 是 Angular 提供的一个用于发送 HTTP 请求的服务，它支持多种协议和选项，并且返回 RxJS Observables。EventSource 类是 HTML5 规范中定义的一种用于通过 HTTP 连接进行实时事件通信的 API，用于从服务器获取 SSE。
下面是一个简单的 SseService 示例。它创建了一个 SseService 类，并从服务器获取 SSE 数据。SseService 类包含一个公共方法，该方法打开一个持续开放的 HTTP 连接（使用 EventSource）并返回一个可观察对象，该对象用于订阅 SSE 数据的更新。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -------
------ - ---------- - ---- -----------------
------ - ---------- - ---- -----------------------
-------------
------ ----- ---------- -
------------------- ----- ----------- --
----------------------- -------- --------------- -
------ -------------------------- -- -
----- ----------- - --- -----------------
--------------------- - ----- -- -
----- ---- - -----------------------
--------------------
--
------------------- - ----- -- -
----------------------
-
--------
---------------- -- -
---------------------
------ ------
--
--
-
-实现推送事件的响应
一旦我们打开 SseService 所述的持续开放的 HTTP 连接，并且我们订阅 SSE 数据的更新，我们可以处理到来的消息。在 Angular 应用程序中，我们可以使用组件和服务相结合的方式来响应 SSE 数据的更新。SSE 数据的响应通常涉及在 Angular 组件中实现一些逻辑。
下面是一个简单的 SSE 组件示例。该组件使用 SseService 来订阅 SSE 数据的更新。一旦 SSE 数据更新，我们将其添加到 messages 数组中，并使用 Angular ChangeDetectorRef 类通知组件视图更新。
-- -------------------- ---- -------
------ - ---------- ------- ----------------- - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- ----------
--------- -
------- --------------
----
--- ----------- ------- -- ------------ ------- -------
-----
-
--
------ ----- ------------ ---------- ------ -
--------- -------- - ---
------------------- ----------- ----------- ------- --------------- ------------------ --
---------- -
------------------------------------------------------------ -- -
----------------------------
------------------------------------
---
-
-注意，在这个示例中，SSE 组件订阅来自 SseService 的 SSE 并处理 SSE 数据的更新。SSE 组件不处理如何发送 SSE 请求，它直接调用 SseService 并使用 RxJS 订阅其响应。
示例应用程序
我们现在已经了解了如何在 Angular 应用程序中使用 SSE 技术来实现实时数据推送，并且我们已经了解了如何使用 Angular 的 HttpClient 来与服务器通信以及如何在 Angular 应用程序中实现推送事件的响应。下面我们将演示一个示例应用程序，以展示这些概念的实际应用。
假设我们有一个后端服务器，向前端客户端推送当前时间。在 Angular 客户端应用程序中，我们可以编写一个简单的组件（SseComponent），用于响应时间更新。下面是一个简单的示例代码来实现这个应用程序：
-- -------------------- ---- -------
------ - ---------- ------- ----------------- - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- ----------
--------- -
---------- ----------
----- ---------- ------
-
--
------ ----- ------------ ---------- ------ -
---------- - ---
------------------- ----------- ----------- ------- --------------- ------------------ --
---------- -
---------------------------------------------------------- -- -
--------------- - ----------
------------------------------------
---
-
-在这个例子中，我们向 /time 路径发起了 SSE 请求，并把从服务器获取的时间显示在组件视图中。您可以在后端服务器中编写一个简单的 /time 路径处理函数（使用 Node.js）。假设您使用 Express.js，可以使用以下代码：
-- -------------------- ---- -------
---------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
----- ------- - -------------- -- -
---------------- - ------- ------ ----------------
-- ------
-- -------
--------------- -- -- -
-----------------------
---------------- ---------- ---------
---
---注意，当客户端关闭 SSE 连接时，SSE 服务器关闭 setInterval 函数，并打印一条日志。这是一种资源释放机制，它确保在客户端与服务器之间的连接关闭时，将释放所有相关资源。
总结
在本文中，我们介绍了如何在 Angular 应用程序中使用 SSE 技术来实现实时数据推送。我们了解了 SSE 的基础知识、如何使用 Angular 的 HttpClient 来与服务器通信以及如何在 Angular 应用程序中实现推送事件的响应。最后，我们演示了一个示例应用程序，以展示这些概念的实际应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df0663f6b2d6eab3a2994e