在前端开发中，处理服务器推送事件是非常常见的需求。Server-sent Events (简称 SSE) 是一种常用的解决方案，它可以让服务器向前端推送事件，而不需要客户端去轮询。本文将详细介绍如何将 Server-sent Events 与 Angular 集成，并提供相应的示例代码。
什么是 Server-sent Events？
Server-sent Events（简称 SSE）是一种服务器主动推送技术，也就是说，客户端只需要监听服务器的事件流，无需主动向服务器发起请求。当服务器需要推送内容给客户端时，只需要将数据按照特定的格式推送至客户端，客户端即可接收并处理。
SSE 是一种纯文本协议，只能传输文本数据。在 SSE 中，使用 text/event-stream 格式来传输数据，event 字段用来标识事件类型，data 字段用来传输数据。
如何在 Angular 中使用 SSE？
Angular 提供了 EventSource 对象来支持 SSE，该对象可以监听服务器的事件发生。我们可以将其封装在一个服务中，使其可以在整个应用中进行复用。
下面是一个简单的 SSE 服务示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ---------- -
------- ------------ ------------
------------------- -------- ----------- -
-- ------------------- -
---------------- - --- -----------------
-
------ -----------------
-
-上面的代码中，我们创建了一个名为 SseService 的服务，在服务中定义了 EventSource 对象，其 getEventSource() 方法用于获取 EventSource 对象。如果 eventSource 对象不存在，则使用提供的 URL 创建一个新的 EventSource 对象，否则返回现有的对象。
在 Component 中使用该服务：
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- -------------------
--------- --------------
--
------ ----- ----------- ---------- ------- --------- -
-------- ------ - ---
------------------- ----------- ----------- - -
---------- -
---------------------------------------------------------------------------------- ------- ------------- -- -
------------ - -----------
---
-
------------- -
--------------------------------------------------------------
-
-上面的代码中，我们在 MyComponent Component 中使用了 SseService，并在 ngOnInit() 方法中订阅了名称为 my-event 的事件。在事件发生时，我们将事件中传来的数据赋值给组件中的 message 变量，在组件中显示该变量。
在 ngOnDestroy() 方法中，我们关闭 EventSource 对象，释放资源。
示例代码
以下是一个完整的示例代码，我们可以通过该示例理解如何将 Server-sent Events 与 Angular 集成。
server.js：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
--- - - --
-------------- -- -
----------------- -------------
---------------- ------- -----------
----
-- ------
----------------上面的代码中，我们创建了一个 HTTP 服务器，该服务器会每隔一秒钟向客户端推送一个带有 my-event 标记的消息，以及当前的消息编号。
app.component.ts：
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- -----------
--------- --------------
--
------ ----- ------------ ---------- ------- --------- -
-------- ------ - ---
------------------- ----------- ----------- - -
---------- -
------------------------------------------------------------------------------------ ------- ------------- -- -
------------ - -----------
---
-
------------- -
----------------------------------------------------------------
-
-上面的代码中，我们在 AppComponent Component 中使用了 SseService，并在 ngOnInit() 方法中订阅了名称为 my-event 的事件。在事件发生时，我们将事件中传来的数据赋值给组件中的 message 变量，在组件中显示该变量。
在 ngOnDestroy() 方法中，我们关闭 EventSource 对象，释放资源。
总结
本文介绍了如何将 Server-sent Events 与 Angular 集成，并提供了相应的示例代码。通过该文，我们了解了 SSE 的原理和使用方式，在实践中可以更好地处理服务器向前端的推送事件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c08ad48841e9894a53efe