背景
实时聊天是现代 web 应用中常见的功能要求之一。许多 web 应用需要为用户提供实时聊天功能，以便他们能够即时联系。
在 web 应用中，实时聊天可以通过许多不同的方式实现。在本文中，我们将介绍如何使用 Node.js 和 Server-sent Events (SSE) 实现实时聊天应用。
什么是 Server-sent Events (SSE)?
Server-sent Events（SSE）是一种用于在 web 应用程序中向客户端推送实时事件的技术。它允许服务器将消息推送到已经打开的浏览器窗口，而无需客户端轮询服务器以获取新信息。
SSE 是与 WebSocket 相对的一种方法，它们都可以实现实时通信，但和 WebSocket 相比，SSE 比较简单，并且可以在 HTTP/1.1 协议下使用。
搭建实时聊天应用
下面，我们将介绍如何使用 Node.js 和 SSE 搭建一个简单的实时聊天应用。首先，我们需要创建一个 Node.js 服务器。
创建 Node.js 服务器
创建一个名为 server.js 的新文件，并在其中添加以下代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - -------------------------- ------------- --------------- --------- --- ----- ---- - ---------------- -- ----- ------------------- -- -- - ------------------- ------- -- --------------------------- ---
在我们的服务器的 createServer() 回调中，我们简单地打印出了收到的 HTTP 请求的类型和 URL，并发送了一个 “Hello, world!” 响应。
启动 server.js，可以在终端中输入 node server.js 并访问 http://localhost:3000 来测试我们的服务器是否正常工作。
使用 SSE 推送消息
接下来，我们将使用 SSE 在服务器和客户端之间进行实时通讯。我们需要在服务器端创建一个 SSE 连接，并将其用于向客户端推送消息。
我们可以使用 Node.js 中的 sse 模块来创建一个 SSE 连接。首先，我们需要安装模块。在终端中输入以下命令：
npm install sse
然后，我们将在 server.js 中创建一个 SSE 连接，让客户端能够连接到它，从而接受实时消息：
const SSE = require('sse');
const sse = new SSE(server);
sse.on('connection', client => {
console.log('Client connected');
client.send({ id: 1, data: 'Welcome to SSE!' });
});在这个例子中，我们创建了一个 SSE 连接，当客户端连接时，我们向客户端发送了一条欢迎消息。注意，我们可以调用 client.send() 方法来向客户端发送消息。
现在，我们将 SSE 连接添加到我们的 HTTP 服务器上，以便客户端可以连接它：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ---------------
----- ------ - ----------------------- ---- -- -
-------------------------- -------------
------------------ -
--------------- -------------
------------------------------ ---
---
----- - - --- -------- -----
------------------ ------ -- -
------------------- ------------
------------- --- -- ----- -------- -- ----- ---
---
---
----- ---- - ---------------- -- -----
------------------- -- -- -
------------------- ------- -- ---------------------------
---在这个例子中，我们使用 sse() 函数创建了一个 SSE 连接，并将其添加到我们的 HTTP 服务器中。
使用 SSE 接收和处理消息
客户端可以通过订阅 SSE 连接来接收实时消息。在客户端，我们需要创建一个 EventSource 对象，并将其连接到服务器 SSE 端点。
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------
-------
------
------------- ---------
--- -------------------
--------
----- -------- - ------------------------------------
----- ------ - --- --------------------------------------------
------------- - ---------- -
---------------------- -- ---------
--
---------------- - ----------- -
----- ------- - -------------------
----- -- - -----------------------------
------------ - -------------
-------------------------
--
-------------- - ----------- -
------------------- - - ---
--
---------
-------
-------在这个例子中，我们首先在页面中创建了一个 <ul> 元素，用于显示接收到的消息。然后，我们使用 JavaScript 创建了一个 EventSource 对象，并将其连接到名为 /events 的 SSE 端点。
当 SSE 接收到来自服务器的消息时，我们将在 onmessage 回调中解析其 JSON 数据，并在 <ul> 元素末尾添加一个新的 <li> 元素并将消息添加到其中。
向客户端推送消息
创建一个策略会话，使用户能够在表单中键入消息，然后将其推送到服务器：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------
-------
------
------------- ---------
--- -------------------
------
------ ----------- --------------
------- ------------- -----------------------
-------
--------
----- -------- - ------------------------------------
----- ------ - --- --------------------------------------------
------------- - ---------- -
---------------------- -- ---------
--
---------------- - ----------- -
----- ------- - -------------------
----- -- - -----------------------------
------------ - -------------
-------------------------
--
-------------- - ----------- -
------------------- - - ---
--
----- ---- - -------------------------------
----- ----- - -----------------------------------
----- ------ - --------------------------------
------------------------------- ----- -- -
-----------------------
----- ------- - ------------
----------------- -
------- -------
-------- -
--------------- ------------------
--
----- ---------------- ------- --
---
----------- - ---
---
---------
-------
-------在这个例子中，我们在页面中添加了一个 <form> 元素，让用户能够在其中输入消息。当用户单击发送按钮时，我们通过使用 fetch() 函数发送了一个 POST 请求，其中包括用户键入的消息。
在服务器端，我们可以接收 POST 请求，并将其转发到所有已连接的 SSE 客户端：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ---------------
----- ------ - ----------------------- ---- -- -
-------------------------- -------------
------------------ -
--------------- -------------
------------------------------ ---
---
----- - - --- -------- -----
------------------ ------ -- -
------------------- ------------
------------- --- -- ----- -------- -- ----- ---
---
---
-------------------- ----- ---- -- -
-------------------------- -------------
-- ----------- --- ------ -- ------- --- ----------- -
--- ---- - ---
-------------- ----- -- -
---- -- ------
---
------------- -- -- -
----- ------- - -------------------------
------------------------------ -- -
------------- --- -- ----- ------- ---
---
---
------------------ -
--------------- -------------
------------------------------ ---
---
--------------
-
------------------ -
--------------- -------------
------------------------------ ---
---
------------ --------
---
----- ---- - ---------------- -- -----
------------------- -- -- -
------------------- ------- -- ---------------------------
---在这个例子中，我们启用了服务器的 POST 请求处理。当我们接收到 POST 请求时，我们解析其中的 JSON 内容，并使用 sse.connections.forEach() 方法向所有连接到 SSE 端点的客户端发送新的消息。
结论
在本文中，我们演示了如何使用 Node.js 和 Server-sent Event 实现简单的实时聊天应用程序。我们利用 SSE 完成了实时通讯，同时使用 HTTP 协议，避免了需要使用 WebSocket 更复杂的设置和部署设置。将 SSE 用于实时通讯，可以使我们更轻松地创建实时 web 应用程序，并帮助提高用户之间的互动、协作和 engagement。
示例代码
https://github.com/Alan-Liangwei-Chen/nodejs-sse-real-time-chat
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674a7e94a1ce006354910f26