前言
在现代 Web 应用程序中，前后端的交互过程中，实时性是至关重要的一个因素。为了实现实时推送技术，服务端发送事件（SSE）是一种值得推广的技术。它可以在客户端和服务器之间建立持久的连接，使服务器主动向客户端推送新的信息，从而实现实时推送效果。
本文将介绍如何在 Node.js 环境中使用 npm 包 connect-sse 来实现 SSE 推送。
准备工作
在开始使用 connect-sse 之前，需要保证你的 Node.js 环境已经搭建完成，并且安装了以下依赖包：
http：HTTP 模块，提供 HTTP 服务和客户端功能。connect：用于创建中间件的框架，可以将不同的中间件（middleware）串联起来，构建出整个 Web 应用的处理流程。connect-sse：一个connect的中间件，用于处理 SSE 请求。
可以使用以下命令来安装这些依赖包：
npm install http connect connect-sse
使用 connect-sse
建立 SSE 连接
使用 connect-sse 需要通过 connect 框架来创建服务器，然后挂载 connect-sse 中间件。下面是一个简单的例子：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- ----- ------------- - ----------------------- -- -- ------- -- ----- --- - ---------- -- -- --- --- ------------------------- -- -- ---- --- ----- ------ - ----------------------- -- ----- ------------------- -- -- - ------------------- -- ------- -- ------------------------ ---
在上述代码中，sseMiddleware 函数是 connect-sse 中间件的构造函数，直接调用它即可生成中间件。然后通过 app.use 方法挂载到 connect 实例中。
发送 SSE 事件
为了在客户端接收 SSE 事件，首先需要创建 SSE 对象，然后再通过 write 方法将事件推送到客户端。下面是一个例子：
-- -------------------- ---- -------
----- - ------------ - - ------------------
----- ---- - ----------------
----- ------- - -------------------
----- ------------- - -----------------------
----- --- - ----------
-------------------------
----- ------ - -----------------------
------------------- -- -- -
------------------- -- ------- -- ------------------------
-- -- --- --
----- --- - --- ---------------
-- - --- ------
-------------- -- -
---------------- - ----- --- ------ ---
-- ------
-- -- --- ----
--------------- ----- ---- -- -
---------------
-------------- ------ -- -
---------------- ---- ---
---
---
---在上述代码中，首先创建了一个 EventEmitter 对象 sse，并且通过 setInterval 定时向其发送 ping 事件。接着通过 app.use 方法在路径 /sse 上注册中间件，用于处理 SSE 请求。在处理过程中，通过调用 res.sseSetup 方法初始化 SSE 连接，然后注册 ping 事件的处理函数，将事件通过 res.writeEvent 方法推送到客户端。
监听 SSE 事件
客户端可以通过 EventSource 对象监听 SSE 事件。下面是一个简单的例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
--- -----------------
--------
----- ------ - ----------------------------------
----- ------ - --- --------------------
------------------------------- ------- -- -
----- -- - -----------------------------
------------ - -----------
-----------------------
---
---------
-------
-------在上述代码中，使用 EventSource 对象向路径 /sse 建立 SSE 连接。当服务器发送 ping 事件时，通过 addEventListener 方法注册 ping 事件的处理函数，将推送过来的数据显示在页面上。
总结
使用 connect-sse 可以实现 Node.js 环境中的 SSE 推送。通过创建 SSE 对象和使用 EventSource 对象来监听 SSE 事件，可以实现在 Web 应用程序中的实时推送效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb240b5cbfe1ea0611130