什么是 Server-Sent Events？
Server-Sent Events（简称 SSE）是一种服务器向客户端推送事件的机制，它允许服务器端通过 HTTP 协议向客户端发送文本数据，实现实时数据通讯。与 WebSocket 相比，SSE 更加轻量级，适用于一些简单的实时通讯场景。
SSE 的工作原理是客户端通过 EventSource API 向服务器端发起一个 HTTP 请求，服务器端在收到请求后会保持连接，并将数据以特定的格式发送到客户端。客户端通过监听 message 事件来接收服务器端推送的数据。
Angular 中如何使用 Server-Sent Events？
在 Angular 中使用 Server-Sent Events 实现实时数据通讯非常简单，我们只需要使用 HttpClient 发起一个 GET 请求，然后通过 RxJS 的 Observable 对象来监听服务器端的响应即可。
下面是一个简单的示例代码：
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ------------------ -
------------------- ----- ----------- --
------------------- -------- ------------------------ -
------ --- ------------------- -- -
----- ----------- - --- -----------------
--------------------------------------- ------- ------------- -- -
---------------------
---
------------------------------------- ------- ------ -- -
----------------------
---
------ -- -- -
--------------------
--
---
-
-在上面的代码中，我们定义了一个 EventSourceService 服务，它使用 HttpClient 发起一个 GET 请求，并返回一个 Observable 对象。在 Observable 对象中，我们创建了一个 EventSource 对象，并通过 addEventListener 方法来监听服务器端推送的消息和错误事件。最后，我们在 Observable 对象中返回了一个清理函数，用于在取消订阅时关闭 EventSource 对象。
使用上面的代码，我们可以在组件中通过订阅 EventSourceService 服务来实现实时数据通讯：
------ - ---------- ------- --------- - ---- ----------------
------ - ------------------ - ---- -------------------------
------ - ------------ - ---- -------
------------
--------- -----------
--------- -
----
--- ----------- ------- -- ------------ ------- -------
-----
-
--
------ ----- ------------ ---------- ------- --------- -
--------- -------- - ---
------------- -------------
------------------- ------------------- ------------------- --
---------- -
----------------- - -----------------------
--------------------------------
------------------ ------------- -- -
-------------------------------
---
-
------------- -
--------------------------------
-
-在上面的代码中，我们定义了一个 AppComponent 组件，并通过 ngOnInit 生命周期钩子来订阅 EventSourceService 服务。在订阅中，我们通过 push 方法来将服务器端推送的消息添加到一个数组中，并在模板中使用 ngFor 指令来显示这些消息。
总结
通过上面的介绍，我们了解了 Server-Sent Events 的原理和 Angular 中如何使用 Server-Sent Events 实现实时数据通讯。使用 Server-Sent Events 可以让我们在一些简单的实时通讯场景中省去使用 WebSocket 的复杂性，同时也可以提高应用程序的性能和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c6d55cadd4f0e0ff11140b