在现代的 Web 开发中，聊天应用已经成为非常普遍的需求。在这篇文章中，我们将介绍如何使用 Node.js 创建一款基于 SSE（Server-Sent Events）的聊天应用。SSE 是一种能够使服务器实时向客户端发送数据的 Web 技术，相比于 WebSocket，SSE 更加轻量级。
准备工作
在开始本教程之前，您需要先安装并配置好 Node.js 和 npm。如果您还没有安装它们，请参照 Node.js 官方网站上的指南进行安装。
创建 Node.js 项目
首先，我们需要创建一个新的 Node.js 项目。在终端中输入以下命令：
----- ------------ -- ------------ --- ----
这将会创建一个新的 Node.js 项目并在项目根目录下创建一个 package.json 文件。接下来，我们需要安装一些依赖项：
--- ------- ------- ------ --- ------- ---------- -------
在这里，我们使用 Express 框架作为聊天应用的服务器，nodemon 包用于监听文件变化并自动重启服务器。
创建服务器端代码
在项目根目录下，创建一个名为 index.js 的服务器端代码文件。将以下代码添加到 index.js 文件中：
----- ------- - ------------------
----- --- - ---------
----- -------- - --
------------------ ----- ---- -- -
------------------------------ -----------
----------------------------- --------------------
-------------------------------------------- ----
--------------------------- -------------
----- ------------ - ----- -- -
---------------- ---------------------------------
-
-----------------
----- ---------- - -------------- -- -
-----------------
-- -----
--------------- -- -- -
-------------------------
--
--
--------------------- --------------- ----- ---- -- -
----- ------- - ----------------
----------------------
-------------------
--
---------------- -- -- -
----------------- --- --------- -- ---- ------
--这段代码定义了一个使用 Express 构建的服务器，该服务器将监听 3000 端口进行连接。我们向 /events 路径注册了一个 GET 请求，从而创建了一个 SSE 流。我们还向 /messages 路径注册了一个 POST 请求，该请求用于向 messages 数组中添加新的消息。
在上面的代码中，res.write() 方法用于向 SSE 流中发送消息，其格式如下：
----- -----------
其中，message 是一个 JSON 对象，表示一条聊天消息。需要注意的是，在每条消息后面必须添加两个换行符，以便将其与下一条消息分隔开。
创建客户端代码
客户端代码将 SSEE 流与聊天应用 UI 进行连接。在项目根目录下，创建一个名为 index.html 的文件，并将以下代码添加到文件中：
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
--- ---------------
----- ------------------
------ ------------------------------
------ ----------- ------------ ---------------
------- ---------------------------
-------
--------
----- ---- - -------------------------------
----- ----------- - ---------------------------------------
----- ------------ - ----------------------------------
----- ----------- - --- -------------------------------------------
--------------------- - ------- -- -
----- -------- - ----------------------
-------------------------- -- -
----- -- - ----------------------------
------------ - -------
--------------------
--
-
-------------------------------------- ------- -- -
----------------------
----- ------- - ------------------
------------------ - --
--------------------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ---------------- ------- --
--
--
---------
-------
-------此代码将会向 /events 路径发起带有 EventSource 实例的 GET 请求，以便与服务器上的 SSE 流建立连接。当有新消息到达时，我们将它们解析成 JSON 对象并将它们添加到聊天 UI 中。我们还需要在 form 元素上对 submit 事件进行监听，以便在用户提交新消息后将其发送到服务器。
运行代码
现在，我们已经成功创建了一个基于 SSE 的聊天应用！我们可以打开新的终端窗口并输入以下命令以启动服务器：
--- --- -----
在另一个终端窗口中，我们可以使用以下命令启动客户端并在浏览器中打开页面：
---- ------------
现在，我们可以在浏览器中体验基于 SSE 的聊天功能了！
结论
本文介绍了如何使用 Node.js 创建基于 SSE 的聊天应用。我们使用 Express 构建了一个服务器，该服务器创建了一个 SSE 流，并允许客户端向 messages 数组中添加新的消息。我们还创建了基本的客户端 UI，以便我们可以查看和发送聊天消息。
SSE 虽然没有 WebSocket 那么流行，但通过了解 SSE 的工作原理，可以让我们更好地理解与实现实时 Web 应用的相关技术。
示例代码
完整的示例代码可以在我的 GitHub 上找到：
https://github.com/yumoL/chat-app-sse
建议您下载并运行代码，以便更好地理解本文中的代码实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67146956ad1e889fe213af31