在现代的 Web 开发中,聊天应用已经成为非常普遍的需求。在这篇文章中,我们将介绍如何使用 Node.js 创建一款基于 SSE(Server-Sent Events)的聊天应用。SSE 是一种能够使服务器实时向客户端发送数据的 Web 技术,相比于 WebSocket,SSE 更加轻量级。
准备工作
在开始本教程之前,您需要先安装并配置好 Node.js 和 npm。如果您还没有安装它们,请参照 Node.js 官方网站上的指南进行安装。
创建 Node.js 项目
首先,我们需要创建一个新的 Node.js 项目。在终端中输入以下命令:
mkdir chat-app-sse cd chat-app-sse npm init
这将会创建一个新的 Node.js 项目并在项目根目录下创建一个 package.json
文件。接下来,我们需要安装一些依赖项:
npm install express --save npm install --save-dev nodemon
在这里,我们使用 Express 框架作为聊天应用的服务器,nodemon 包用于监听文件变化并自动重启服务器。
创建服务器端代码
在项目根目录下,创建一个名为 index.js
的服务器端代码文件。将以下代码添加到 index.js
文件中:
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ----- -------- - -- ------------------ ----- ---- -- - ------------------------------ ----------- ----------------------------- -------------------- -------------------------------------------- ---- --------------------------- ------------- ----- ------------ - ----- -- - ---------------- --------------------------------- - ----------------- ----- ---------- - -------------- -- - ----------------- -- ----- --------------- -- -- - ------------------------- -- -- --------------------- --------------- ----- ---- -- - ----- ------- - ---------------- ---------------------- ------------------- -- ---------------- -- -- - ----------------- --- --------- -- ---- ------ --
这段代码定义了一个使用 Express 构建的服务器,该服务器将监听 3000 端口进行连接。我们向 /events
路径注册了一个 GET 请求,从而创建了一个 SSE 流。我们还向 /messages
路径注册了一个 POST 请求,该请求用于向 messages
数组中添加新的消息。
在上面的代码中,res.write()
方法用于向 SSE 流中发送消息,其格式如下:
data: message\n\n
其中,message
是一个 JSON 对象,表示一条聊天消息。需要注意的是,在每条消息后面必须添加两个换行符,以便将其与下一条消息分隔开。
创建客户端代码
客户端代码将 SSEE 流与聊天应用 UI 进行连接。在项目根目录下,创建一个名为 index.html
的文件,并将以下代码添加到文件中:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ------------ ------- ------ --- --------------- ----- ------------------ ------ ------------------------------ ------ ----------- ------------ --------------- ------- --------------------------- ------- -------- ----- ---- - ------------------------------- ----- ----------- - --------------------------------------- ----- ------------ - ---------------------------------- ----- ----------- - --- ------------------------------------------- --------------------- - ------- -- - ----- -------- - ---------------------- -------------------------- -- - ----- -- - ---------------------------- ------------ - ------- -------------------- -- - -------------------------------------- ------- -- - ---------------------- ----- ------- - ------------------ ------------------ - -- --------------------------------------- - ------- ------- -------- - --------------- ------------------ -- ----- ---------------- ------- -- -- -- --------- ------- -------
此代码将会向 /events
路径发起带有 EventSource 实例的 GET 请求,以便与服务器上的 SSE 流建立连接。当有新消息到达时,我们将它们解析成 JSON 对象并将它们添加到聊天 UI 中。我们还需要在 form
元素上对 submit
事件进行监听,以便在用户提交新消息后将其发送到服务器。
运行代码
现在,我们已经成功创建了一个基于 SSE 的聊天应用!我们可以打开新的终端窗口并输入以下命令以启动服务器:
npm run start
在另一个终端窗口中,我们可以使用以下命令启动客户端并在浏览器中打开页面:
open ./index.html
现在,我们可以在浏览器中体验基于 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