在 Web 开发中，实时通信已经成为非常常见的需求，而 Node.js 作为一款服务器端 JavaScript 运行环境，拥有强大的事件驱动机制，非常适合实现实时通信功能。
本文将介绍如何使用 Node.js 中的 Server-sent Events 技术实现实时通信，并提供详尽示例代码，帮助读者轻松学习并实践该技术。
Server-sent Events 简介
Server-sent Events（SSE）是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流，实现实时通信的功能。与 WebSocket 相比，SSE 更加轻量级，适用于一些简单的实时通信场景。
SSE 的工作原理是：客户端通过 HTTP 连接到服务器，并建立一条持久化的连接。服务器会不断地向客户端发送事件流，客户端也能够实时接收到这些事件信息。由于 SSE 是基于 HTTP 协议实现的，所以它能够与现有的 Web 基础设施（如负载均衡、安全策略等）很好地集成。
实现步骤
接下来，我们将在 Node.js 中结合 Express 框架来演示如何实现 SSE 的实时通信。
1、创建项目
首先，我们需要创建一个空的 Node.js 项目，并安装 Express 库：
----- ------------- -- -- ------------- --- ---- -- --- ------- -------
2、添加客户端页面
在项目根目录下创建一个名为 index.html 的文件：
--------- -----
------
------
----- ----------------
------------------ ------ ------------
-------
------
--------------- ------ ---------
----
---- -------------------
--------
-- -- ----------- --
----- ------ - --- --------------------
-- -- ------- --
---------------------------------- ----- -- -
----- ---- - -----------------------
-------------------------------------------- - ------- ----- - - ----------
---
---------
-------
-------这里的 HTML 页面非常简单，其中最重要的部分是通过 EventSource 对象来创建 SSE 连接。在 message 事件回调中，我们会从服务器端接收到数据，并展示到页面上。
3、创建 SSE 路由
在项目根目录下创建一个名为 app.js 的文件，并添加以下代码：
----- ------- - -------------------
----- --- - ----------
------------ ----- ---- -- -
---------------------- - ---------------
---
--------------- ----- ---- -- -
-- -- -------
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- -------------
--- -- - -------------- -- -
----- ---- - - ----- --- --------------------------- --
----- ----- - ------ -----------------------------
-----------------
-- ------
-- --------------
--------------- -- -- -
------------------
------------------- ---------------
---
---
----- ---- - -----
---------------- -- -- ------------------- ------- -- ---- -----------这里，我们添加了两个路由：/ 用于返回客户端页面，/sse 用于建立 SSE 连接。在 /sse 路由中，我们设置了 SSE 所需的 headers，并在每三秒钟向客户端推送一条消息。
另外，为了避免浏览器缓存响应数据，我们在 Cache-Control 中设置了 no-cache，同时在响应信息中添加空行 \n\n 表示该条消息已传输完成。
在客户端断开连接时，我们停止向客户端推送消息，并在控制台输出 "Client disconnected"，以便于排查问题。
4、启动服务并测试
在终端中执行以下命令启动 Node.js 服务：
---- ------
访问 http://localhost:3000，可以看到页面上显示了服务端推送的实时时间：
在服务端控制台输出中，可以看到客户端连接和断开的信息：
至此，我们成功地实现了一个简单的 SSE 实时通信示例。
总结
本文通过使用 Node.js 和 Express 框架结合 Server-sent Events 技术实现了一个实时通信的示例，并提供详尽的代码解释。Server-sent Events 技术是一个非常简单实用的服务器推送技术，它适用于一些简单的实时通信场景，例如服务器状态监控、实时聊天等。希望这篇文章能够帮助大家更加深入地了解 SSE 技术，并在实践中得到更好的应用。
参考文献
Server-sent Events, MDN Web 文档. https://developer.mozilla.org/zh-CN/docs/Web/API/Server-sent_events
Introduction to Server-sent Events, HTML5 Rocks. https://www.html5rocks.com/en/tutorials/eventsource/basics/
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645052d8980a9b385b966cef