在前端开发中，有时需要实时传输数据给客户端，这时候就可以使用 Server-sent Events。Server-sent Events 是一项 HTML5 规范，它能够实现服务器向客户端推送数据，而不需要客户端不停地发送请求。本文将介绍如何在 Angular 中使用 Server-sent Events。
什么是 Server-sent Events
Server-sent Events 是一种在 Web 浏览器中实现服务器向客户端发送事件的技术。它使用一个持久化的 HTTP 连接，允许服务端不需要客户端的请求就能向客户端推送数据。每个事件都是由一个事件标识符（event ID）、事件类型和一个数据字段构成。Server-sent Events 的实现非常简单，由于它只是基于 HTTP 协议，所以它也易于在现有的基础设施上使用。
Angular 中使用 Server-sent Events
要在 Angular 中使用 Server-sent Events，我们需要使用浏览器的 API：EventSource。EventSource API 会创建一个 HTTP 连接，然后从服务器上接收事件。这个 API 会自动处理连接错误，并在数据到达时对它进行解析。
创建 EventSource 实例
要创建 EventSource 实例，我们需要为它提供服务器端 URL。在 Angular 应用中，可以使用 HttpClient 模块来发起 HTTP 请求：
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ----------------------- -
------------------- ----- ----------- --
------------ --------------- -
------ --------------------------------- - ------------- ------ ---
-
-这个服务将返回一个 Observable 对象，该对象将在每个新事件到达时推送新的值。
监听事件
要处理接收到的事件，我们必须使用 EventSource 实例的 onmessage 事件：
----- ----------- - --- --------------------------- --------------------- - ------- -- - ------------------------ --
在这里，我们将打印 event 数据来处理它。因为 event.data 包含发送事件的正文，所以可以对它进行解析以执行适当的操作。
使用 RxJS
在 Angular 应用中，还可以使用 RxJS Observables 来帮助处理事件。RxJS 存在两个与 Server-sent Events 相关的操作符：multicast() 和 refCount()。这个操作符的目标是，在多个 Subscriber 之间共享流。
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
------ - ------------ ---------- - ---- -----------------
-------------
----------- ------
--
------ ----- ----------------------- -
------- ------------- ------------------
------------------- ----- ----------- --
------------ ----------------- -
-- -------------------- -
----------------- - --- ---------------------------
----------------- - -----------------------
--------------
------------- -- -
----------------- - -----
------ -----------------
--
--
-
------ ------------------
-
-这个服务将返回一个可观察对象（Observable），该对象将推送每个新的事件，可以使用 subscribe 方法来监听事件。
总结
在本文中，我们介绍了 Server-sent Events 对于前端开发的重要性，并演示了如何在 Angular 中使用 Server-sent Events。对于需要实现实时在线功能的应用程序，Server-sent Events 极大地简化了开发过程。通过本文的内容，我们希望你可以更好地理解 Server-sent Events 并在你的应用程序中使用它们。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664eb5cbd3423812e4f3430f