在现代 Web 应用程序中，实时消息推送变得越来越常见。 SSE 技术（Server-Sent Events）是一种强大的工具，可以帮助您实现这种功能。本文将向您介绍如何使用 Node.js 和 SSE 实现实时消息推送。
SSE 是什么？
SSE 是一种单向通信机制，用于将服务器推送到客户端的消息。与 WebSockets 不同，SSE 仅支持服务器到客户端的通信，而不支持反向通信。
SSE 消息可以是任何文本，可以是 JSON、XML 或 HTML。服务器推送的每个消息都是单独的文本块，并以换行符分隔。
实现基本 SSE 服务器
首先，让我们来看看如何使用 Node.js 创建 SSE 服务器。
安装必需的软件包
使用以下命令安装必需的软件包：
npm install express cors
创建 Express 应用程序
在项目根目录下创建一个名为 app.js 的文件，并加入以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----------------
------------------ ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------------
-------------- -- -
----- ---- - - -------- ------- ------- --
---------------- ------------------------------
-- ------
---
---------------- -- -- ------------------- ------- -- ---- --------这将创建一个基本的 Express 应用程序，并监听在 3000 端口上。如果您在本地运行此应用程序，请访问 http://localhost:3000/events。
调试 SSE 服务器
使用 Chrome 浏览器的调试工具检查 SSE 连接。
在 Chrome 浏览器中访问 http://localhost:3000/events。您将看到该页面始终保持活动状态，并且每秒都会收到一条新消息。此页面实际上是 SSE 连接的客户端。在 Chrome 的开发者工具中切换到 Network 标签页，您会看到一个名为 events 的请求。单击该请求，然后切换到 Response 标签页。您应该能够看到类似以下的 JSON 消息：
data: {"message":"Hello, world!"}从客户端接收 SSE 消息
上述示例中的服务器是自处理的，也就是说，它生成和发送消息。现在，让我们看看如何从客户端接收服务器发送的 SSE 消息。
先决条件
为了从客户端接收 SSE 消息，我们需要在客户端上使用一个支持 SSE 的库。大多数现代浏览器都支持 SSE，您可以在 JavaScript 中用原生的 EventSource 类来处理 SSE 消息。下面我们来看一个使用原生 EventSource 的示例。
示例代码
在 HTML 中，我们依照以下代码添加需要接收 SSE 的地方：
<div id="messages"></div>
然后，在 JavaScript 中加入以下代码：
const eventSource = new EventSource('/events');
eventSource.onmessage = function (event) {
const message = JSON.parse(event.data);
const messages = document.getElementById('messages');
messages.innerHTML += `<div>${message.message}</div>`;
};现在，我们已经实现了服务器和客户端之间的实时消息通信。
结论
在本文中，我们了解了 SSE 技术，并使用 Node.js 和 SSE 技术实现了一个简单的实时消息服务器，并从客户端接收了这些消息。SSE 是一种功能强大的服务器推送消息技术，可以轻松实现实时通信。您可以将 SSE 用于任何需要实时通信的应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670c03f066ef9cf37fadb45f