在现代互联网应用中，实时通讯是非常重要的功能特性。随着前端技术的发展，越来越多的框架和工具被开发出来，用于实现实时通讯。本文将介绍如何使用 Angular 和 Server-Sent-Events 来实现实时通讯。同时，也会提供示例代码来让读者更好地理解。
什么是 Server-Sent-Events?
Server-Sent-Events (SSE) 是一种在 Web 应用中用于实现服务器向客户端发送实时事件通知的技术。它通过在客户端和服务器之间建立持久化的连接，只要连接没有断开，就可以不断地向客户端推送数据。
SSE 的优势在于它是一种轻量级的通讯协议，使用简单，而且支持跨域。对于实时通讯需求不高的场景，SSE 是一个很好的选择。
使用 Angular 和 SSE 实现实时通讯
在 Angular 中使用 SSE 实现实时通讯非常简单。下面是一个示例，用于向客户端发送实时的时间戳：
1. 后端代码
首先，需要在后端代码中创建一个路由，用于处理客户端的请求。下面是一个使用 Node.js 和 Express 框架创建 SSE 路由的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
------------------ ----- ---- -- -
-------------------------
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- --------- - --- -----------------
---------------- -------------------
-- ------
---上面的代码会创建一个 SSE 路由，每隔 1 秒钟向客户端发送一个时间戳。需要注意的是，每次发送数据都必须加上 data 前缀，最后还要加上两个换行符，才能被客户端正确解析。
2. 前端代码
在前端代码中，需要使用 Angular 的 HttpClient 模块向后端 SSE 路由发送请求。下面是一个用于处理 SSE 事件的服务示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ----------- ------- - ---- -------
-------------
----------- ------
--
------ ----- ---------- -
------- --- - ----------------------------
------- ------------ ----------- - ----------
------------------- ----- ----------- - -
------ -------------------- ---- -
---------------- - --- ----------------------
-------------------------------------------- ------- -- -
----- ---- - -----------------------
--------------------------------
---
----------------------------------------- -- -- -
----------------------- ----------
---
------------------------------------------ -- -- -
------------------ ------------
---
-
------ ------------------- ---- -
-- ------------------ -
-------------------------
-
-
------- --------------- - --- ---------------
------ ---------------- - ------------------------------------
-上面的代码会在客户端中创建一个 EventSource 对象，用于和后端 SSE 路由建立连接。每次从后端接收到消息时，就会通过 messageReceived$ 来告诉应用程序。需要注意的是，在 EventSource 构造函数中需要传入 SSE 路由的 URL。
3. 在组件中使用 SSE 服务
在组件中使用 SSE 服务非常简单。下面是一个示例，用于在客户端上展示实时的时间戳：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- -----------
--------- -
------- ------- --------
--
--
------ ----- ------------ -
------ -------- ------ - ---
---------------- ----------- -
------------------------
------------------------------------- -- -
------------ - -----
---
-
------------- -
----------------------------
-
-上面的代码会在组件初始化后创建 SSE 服务。每次接收到来自 SSE 路由的消息时，就会将消息内容保存到 this.message 变量中，以便在视图中进行展示。需要注意的是，为了保证应用程序的正确性，在部件被销毁时需要关闭 SSE 服务。
结论
在本文中，我们介绍了如何使用 Angular 和 Server-Sent-Events 来实现实时通讯。通过 SSE 可以让客户端保持和服务器之间的实时连接，以便即时接收来自服务器的通知。使用 Angular 和 SSE 实现实时通讯非常简单，同时也非常有效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672b5a87ddd3a70eb6d28dd7