什么是 Server-Sent Events？
Server-Sent Events（SSE）是一种服务器向客户端发送实时事件流的技术，它是一种基于 HTTP 协议的轻量级的服务器推送技术。它允许服务器向客户端发送任意数量的消息，并且客户端无需不断地轮询服务器来获取新的数据。
Server-Sent Events 只需要一个永久连接，所以它比 Websockets 更加简单，同时也比 AJAX 轮询更加高效、实时和节省带宽。
实现 SSE 的必要条件
- 一个支持 SSE 的浏览器
- 一个支持 SSE 的服务器
Server-Sent Event 的消息格式
SSE 从服务器向客户端推送的数据是一个以“data: ”开头的字符串，在字符串后面换行。
例如：
----- ---- -- - --------
可以看到，整个数据字符串中只有第一行的数据以“data: ”开头，其他行都是按照普通的文本格式输出。
如果要在 SSE 中发送更多的元数据，可以在新的一行中使用以下格式：
------ ---------
例如：
------ ---------- ----- ------------ -------- ---------- ------ --------
这个格式允许我们在 SSE 中发送不同类型的事件，并在客户端根据事件类型做出相应的处理。
使用 Node.js 和 Express 框架来实现 SSE
下面的代码演示了如何在 Node.js 中使用 Express 框架实现 SSE。
首先，我们需要安装 Express 和 body-parser。使用以下命令：
--- ------- ------- -----------
然后，通过以下代码来实现 SSE：
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
-- ------
--------------------- ---- ----- -
-------------------------------------------- -----
--------------------------------------------- -------- ----------------- ------------- ---------
-------
---
-- ---------
--- -- - --
-- -----------
----- ------- - ---
-- -- --- ----- --- ---
------------------ ----- ---- -- -
-- -------- -----------------
----------------------------- ---------------------
------------------------------ ------------
-- ------------
----- -------- - -----
----------------- - ----
-- -------
---------------- --------------
-- -------
--------------- -- -- -
------ ------------------
---
---
-- -- ---- ----- --- --
-------------------- ------------------ ----- ---- -- -
----- ------- - ---------
-- ---------
--- ------ -------- -- -------- -
-- ------
------------------------------- ---------------
-- ------
------------------------------ ---------------------------------
-
-- ---------
---------- -------- ---- ---
---
-- -----
---------------- -- -- -
------------------- -- -------- -- ---- --------
---在这个示例中，我们首先创建了一个 Express 应用程序，然后使用 body-parser 中间件来解析 POST 请求的数据。
接下来，我们创建了一个 clients 对象用于保存连接，并使用 GET 方法创建 /events 路由来处理来自 SSE 客户端的连接请求。在创建路由处理程序时，我们首先使用 res.setHeader() 来设置响应头，并设置 Content-Type 为 text/event-stream，以指示该流为 SSE 事件流。
我们还在响应头中设置了 Cache-Control 为 no-cache，以防止缓存服务器响应。为了确保每个连接都有唯一的事件 ID，我们使用了一个自增的变量 id，每次有新的连接时加 1，并将该值赋值给该连接的事件 ID。
在保存连接之后，我们向客户端发送了一条欢迎消息以确保连接已建立。我们还使用 req.on('close', ...) 来处理关闭连接的事件。当客户端关闭连接时，我们从客户端列表中删除该连接数据。
接下来，我们使用 POST 方法创建 /message 路由来处理新消息的请求。在创建路由处理程序时，我们使用 bodyParser.json() 中间件来解析 POST 请求的 JSON 数据。随后，我们遍历所有连接并向每个连接发送新的消息。
我们首先使用 res.write() 来设置新事件的类型，然后使用 JSON.stringify() 来序列化消息对象，并将其添加到事件数据中。最后，我们使用 \n\n 来结束此事件并开始下一个事件。
最后，我们使用 app.listen() 方法来启动 Express 服务器，监听在端口 3000 上。现在，如果我们启动服务器并使用浏览器向 /events 路由发送 GET 请求，就可以实时获取服务器发送的事件流。当我们向 /message 路由发送 POST 请求时，服务器会将新事件推送到所有连接的客户端上。
结论
通过使用 Node.js 和 Express 框架，我们可以轻松实现基于 Server-Sent Events 的服务器推送技术。使用 SSE 能够避免以往常用的轮询方式造成的服务器压力和带宽浪费，并且它的实时性能也非常出色，是一种在 Web 开发中非常实用的技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6736f365317fbffedf07023f