什么是 Server-sent Events？
Server-sent Events（SSE）是一种利用 HTTP 协议实现服务器向客户端推送数据的技术。与传统的 HTTP 请求不同，SSE 可以让服务器主动向客户端推送消息，从而实现单向的实时通讯。
SSE 的使用场景非常广泛，例如网页聊天室、实时股票行情、实时天气预报、实时监控等。SSE 的优点包括：
- 不需要建立长连接或轮询，节省资源，减轻服务器压力；
- 可以实现跨域通讯，不受同源策略的限制。
SSE 与 WebSocket 相比，优缺点各有千秋。WebSocket 更适合双向通讯，且消息的传输效率更高，但需要建立长连接。SSE 则更适合单向的实时数据推送，且兼容性更好，不需要特殊的服务器支持。
在本文中，我们将介绍如何在 Angular 中使用 RxJS 实现 SSE 的事件推送。
RxJS 概述
RxJS 是 ReactiveX 框架的 JavaScript 实现，是一种函数响应式编程（FRP）库。它提供了一种方便的方式来处理异步和基于事件的程序，可以让我们更加灵活和优雅地编写代码。
RxJS 的核心概念是 Observable（可观察对象）。Observable 可以将数据流、异步操作和事件处理封装为一种流式编程的方式，从而使代码更加简洁和易于维护。另外，RxJS 还提供了许多操作符，如 map、filter、reduce、merge、concat 等，可以方便地进行数据变换、合并和处理。
如何使用 RxJS 实现 SSE？
首先，我们需要在 Angular 中引入 RxJS 库：
npm install rxjs --save
然后，在我们的组件中创建一个 Observable 对象，用于接受服务器推送的消息。可以使用 RxJS 提供的 Observable.create() 方法创建一个自定义的 Observable 对象，如下所示：
-- -------------------- ---- -------
------ - ---------- - ---- -------
----- ------ - ---------------------------- ---- -- -
----- ----------- - --- --------------------------------------------
--------------------- - ------- -- -
--------------------------
--
------------------- - ------- -- -
----------------------
--
---在上面的代码中，我们创建了一个 EventSource 对象，并为其绑定了 onmessage 和 onerror 方法，用于处理服务器传递过来的消息和错误信息。然后，我们将这个 EventSource 对象封装为一个 Observable 对象，当收到新的消息时，我们可以通过 observer.next() 方法将其推入 Observable 数据流中，供其他组件消费。
接下来，我们可以使用 RxJS 提供的 subscribe() 方法来订阅这个 Observable 数据流，并处理其中的消息。例如，下面的代码片段从服务器端推送的消息中提取出了 JSON 数据，并将其存储到了组件的对象属性中：
source.subscribe((data: string) => {
const jsonData = JSON.parse(data);
this.data = jsonData;
});最后，我们需要在服务器端设置 SSE 的支持。在 Node.js 中，可以使用 res.writeHead() 方法来发送 SSE 的响应头，如下所示：
-- -------------------- ---- ------- ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------- --- -- ------ ---------------- - - ------------------------ ------ --------- - -------- ---------------- - - ------------------------ ----- --- --- --------- - -------- ---------------- - - ------------------------ -- -- ----- ----- ------- - --------
在这个例子中，我们首先设置了 SSE 的响应头，然后使用 res.write() 方法逐步向客户端推送 JSON 数据。注意，在每个数据对象后面需要添加两个换行符，以表示一个 SSE 事件的结束。这样可以保证客户端能够正确地解析每个事件。
总结
本文介绍了 Server-sent Events 技术和 RxJS 库，并演示了如何使用 RxJS 在 Angular 中进行 SSE 的事件推送。RxJS 的强大特性可以让我们更加优雅地处理异步数据流和事件处理，提高代码的可读性和可维护性。SSE 则是一种非常适合单向实时数据推送的技术，可以方便地实现各种应用场景。
完整的代码示例可以在我的 GitHub 仓库中找到：https://github.com/xxxxxxx/angular-sse-example。欢迎大家参考和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64603b0c968c7c53b01fba74