在现代 Web 应用中，服务器推送 (Server Sent Events，简称 SSE) 是一种明显优于传统 Ajax 轮询的实时通信解决方案。相比于 Ajax 轮询，SSE 方案可以确保更低的网络负载、更快的响应速度以及更加实时的通信体验。
Koa 是一个优秀的 Node.js Web 框架，它可以帮助开发者快速地构建起服务器端应用。本文将结合 Koa 框架，详细介绍如何在服务器端使用 SSE 实现推送功能。
SSE 基础知识
SSE 是一种基于 HTTP 的协议，允许服务器端向客户端推送事件和数据。SSE 协议的实现需要使用到标准的 EventSource API，该 API 可以在客户端接收服务器端推送的消息并及时处理。以下是 SSE 协议的基本介绍：
服务端推送格式
在 SSE 协议中，服务端使用 text/event-stream 格式向客户端发送数据。下面是一条 SSE 请求的示例：
HTTP/1.1 200 OK
Content-Type: text/event-stream
data: {"event":"update","data":"Hello, world!"}其中，服务端使用 data 字段向客户端发送数据。客户端使用 EventSource 接收服务端发送的消息并进行处理。
客户端 EventSource API
在客户端中，可以将一个 URL 传递给 EventSource 构造函数，实现对服务端的监听。以下是一个事件源示例：
const eventSource = new EventSource('/sse');通过以上代码，该客户端程序将监听 http://example.com/sse 地址。事件源构造函数还可以接收其他参数，例如 retry，该参数设置了客户端重试连接的时间。
客户端 EventSource API 还提供了几个回调函数，可以用于接收服务端发送的消息。以下是 EventSource API 几个常用的回调函数：
onopen：当连接成功建立时触发。onmessage：当服务端推送消息时触发。onerror：当连接中断或连接错误时触发。
服务端实现
构造 SSE 服务端程序有两种常见做法：一种是将 SSE 服务端集成到现有的 Web 框架中，例如 Koa 中间件；另一种是使用独立的 SSE 库构建。本文只介绍如何在 Koa 中使用 SSE。
使用 Koa 中间件实现 SSE
SSE 是基于 HTTP 的协议，因此我们可以使用 Koa 中间件来实现 SSE 服务端功能。
以下是一个 Koa SSE 中间件的示例：
-- -------------------- ---- -------
----- --- - ---------------
-------- ----------- ----- -
-- --------- --- ------- -
------ -------
-
----- --- - --- ------------ - --------- ---- ---
-------------------- ------ -- -
---------------- ------ ------------
---
---------- - ----
----------------------- ---------------------
------------------------ ------------
------------------
------ -------
-以上代码中，使用 SSE 构造函数新建了一个 SSE 服务端实例。该实例会监听来自客户端的连接并将客户端加入到连接中。每当有客户端连接到服务端时，都会打印一条客户端连接的日志。
将服务端返回状态码设为 200 并设置正确 MIME 类型以及 no-cache 缓存控制头。最后，将返回的内容通过 sse.pipe(ctx.res) 映射到客户端。sse.pipe() 方法将执行固定组合过程，将服务端 SSE 内容映射到自（客户端）己的 res 对象上去。
至此，SSE 的服务端程序已实现，接下来将进一步讨论如何实现客户端 JavaScript 代码。
客户端 JavaScript 实现
现在我们来看看如何使用 EventSource API 实现 SSE 客户端代码。为了演示方便，我们将在 HTML 页面中插入 JavaScript 代码。
以下是 SSE 的简单客户端实现代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
------------- ---- ------ -------------
-------
------
---------- ---- ------ ----------
-- -----------------
--------
----- ------- - -----------------------------------
----- ----------- - --- --------------------
------------------ - - -- ---------------- ------ ---------- -- ---------
--------------------- - - -- -------------------- - --------
------------------- - - -- -------------------- - ---- ---------- ------ -------
---------
-------
-------通过以上代码，我们向 HTML 页面中添加了一个 p 元素，作为待写入消息的容器。然后使用 EventSource API 连接 SSE 服务端，注册了事件回调：onopen，onmessage 和 onerror。
示例
最后，我们提供一个完整的示例代码，供读者参考。
服务端代码：
-- -------------------- ---- -------
----- --- - ---------------
----- --- - ---------------
----- --- - --- ------
-------- ----------- ----- -
-- --------- --- ------- -
------ -------
-
----- --- - --- ------------ - --------- ---- ---
-------------------- ------ -- -
---------------- ------ ------------
---
---------- - ----
----------------------- ---------------------
------------------------ ------------
------------------
------ -------
-
----------------
---------------- -- -- -
---------------- --- ------ -- ------- -- ----------------------------
---客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
------------- ---- ------ -------------
-------
------
---------- ---- ------ ----------
-- -----------------
--------
----- ------- - -----------------------------------
----- ----------- - --- --------------------
------------------ - - -- ---------------- ------ ---------- -- ---------
--------------------- - - -- -------------------- - --------
------------------- - - -- -------------------- - ---- ---------- ------ -------
---------
-------
-------运行上述代码后，在客户端页面打开控制台即可看到 SSE 服务端连接成功的日志。同时，当有程序向 SSE 推送新消息时，客户端页面上的 p 元素会有对应的更新。
总结
本文介绍了如何在 Koa 中使用 SSE 实现服务器推送。SSE 是一种非常高效、实时且易于理解的服务器通信协议，应用范畴非常广泛。在后续实践过程中，开发者可以根据自身应用场景结合 EventSource API 和 SSE 协议，构建出更加高效、灵活的通信机制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c52db968c7c53b076942e