介绍
在 Web 应用程序中，聊天室是一种非常流行的功能。使用 Node.js 和 Express.js 框架，我们可以方便地搭建一个聊天室。在本文中，我们将详细讨论如何使用 Express.js 构建一个简单的聊天室。
环境准备
在开始之前，我们需要确保我们的环境安装了 Node.js 和 Express.js。在运行示例代码之前，我们需要完成以下步骤:
在终端中输入以下命令安装 Node.js：
$ brew install node
在终端中输入以下命令安装 Express.js：
$ npm install express --save
构建聊天室
在我们开始构建聊天室之前，我们需要准备好以下工具：
- Node.js 环境
- Express.js 框架
- socket.io 库
1. 创建 Express.js 应用
在创建 Express.js 应用之前，首先我们需要在项目根目录下创建一个 package.json 文件，用来描述项目的依赖和配置项。
在终端中进入项目根目录，输入以下命令：
$ npm init -y
接着，在终端中输入以下命令来安装 Express.js 库：
$ npm install --save express
在安装完成后，在项目根目录下创建一个名为 server.js 的文件，并输入以下代码：
const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
server.listen(3000, () => {
console.log('Listening on port 3000');
});在代码中，我们首先引入了 Express.js 库，创建了一个 app 实例，然后通过 http 模块创建了一个服务器实例，并通过 socket.io 将服务器实例绑定到 Socket 上。最后，我们在服务器上监听 3000 端口，并输出连接成功的日志信息。
为了启动应用程序，我们可以在终端中运行以下命令：
$ node server.js
接着，在浏览器中访问 http://localhost:3000，如果一切正常，应该能看到 Listening on port 3000 日志信息。
2. 创建聊天室
接下来，我们需要添加一些功能来实现聊天室的功能。在 server.js 文件中，添加以下代码：
-- -------------------- ---- -------
----- --- - ---------------------
----- ------ - ----------------------------------
----- -- - -----------------------------
------------------- -- -- -
---------------------- -- ---- -------
---
------------ -------- ----- ---- -
---------------------- - ---------------
---
----- ----- - ---
------------------- -------- -- -
---------------- ---- ---------- -- -----------
----------------- -------- ---------- -
---------------- - ---------
----------------------------- ----------
---
------------------------ -------- ------ -
--------------------------------------- - ----- ----------------- -------- ---- ---
---
----------------------- -------- -------- -
----------------- -------------- --------
------------------------------ ------------------
------ -----------------
---
---在代码中，我们首先定义了一个 app 实例和一个 Socket 实例。接着，我们设置了一个路由，当用户访问应用程序的根目录时，服务器将向客户端发送 index.html 文件。 这里的 index.html 文件包含了前端代码，用来实现聊天室的界面。
接着，我们定义了一个 users 对象，用来储存每个连接到服务器的用户。我们还监听了 connection 和 disconnect 事件，当有新的用户连接到服务器时，我们将其添加到 users 对象中，并通过广播机制向所有连接到服务器的用户发送欢迎信息。当有用户离开服务器时，我们从 users 对象中删除该用户，并通过广播机制向所有连接到服务器的用户发送退出信息。
最后，我们还监听了 sendMessage 事件，用来接受客户端发送的聊天信息，并通过广播机制向其他连接到服务器的用户发送该信息。
3. 客户端实现逻辑
在 index.html 文件中，添加以下代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- -----------
-------
------
-------- --------
-- -----------------------------
---- ----------
--- -------------------
----- ---------------- ----------
------ -------------- ----------------------------------------
-------
------
------- ---------------------------------------
--------
----- ------ - -----
-------------------- ---------- -
------------------------------------------- - ------------
---
----------------------- ---------------- -
------------------------------------------- - -------------- - - -------
---
----------------- ------------------ -
----- ------- - -------- - - --- ------ --- ------
--------------------
---
------------------ ------------------ -
----- ------- - -------- - - --- ---- --- ------
--------------------
---
----- ---- - ---------------------------------------
----- -------- - -------------------------------------
------------------------------- --------------- -
-----------------------
----- ------- - ----------------------
-- ---------- -
-------
-
-------------------------- ---------
--------------- - - ---------
-------------- - ---
---
--------------------------- -------------- -
----- ------- - --------- - -- - - -------------
--------------------
---
-------- ------------------- -
----- -------- - ------------------------------------
----- -- - -----------------------------
------------ - --------
-------------------------
-
---------
-------
-------在代码中，我们定义了一个 HTML 页面，用来创建聊天室的用户界面。我们还使用 socket.io 库来与服务器实现双向通信。当客户端连接到服务器时，我们在 #status 元素中显示一个 “连接成功” 的消息。当客户端和服务器断开连接时，我们在 #status 元素中显示退出聊天室的日志信息。
在 socket 对象上定义了一些事件监听器，用来响应服务器发送的消息，并将其显示在用户界面上。当用户提交聊天信息时，我们通过广播机制将该信息发送给其他连接到服务器的用户。
结尾
到目前为止，我们已经详细讨论了如何使用 Express.js 和 socket.io 库来构建一个简单的聊天室。希望本文对读者学习和理解相关技术有所帮助。如果你有疑问或建议，请在评论区留言，也欢迎大家来本人博客交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67822634935627c900f9bd85
