前言
Socket.io 是一个基于 Node.js 的实时通讯框架，能够让客户端和服务器之间的通信变得简单高效。而 Express 则是 Node.js 中最流行的 Web 框架之一，它可以帮助我们快速构建 Web 应用程序。
在本文中，我们将会使用 Express 和 Socket.io 构建一个简单的聊天室应用程序。我们将会深入探讨如何实现双向通信，如何进行群组聊天以及如何处理用户输入和输出。
环境设置
在开始之前，我们需要安装 Node.js，确保你已经安装了 Node.js 和 npm（包管理器）。安装完成之后，我们可以用以下命令来创建我们的工作目录：
mkdir chat-app cd chat-app npm init -y
接着，我们需要安装必要的依赖项，包括 Express 和 Socket.io，使用以下命令进行安装：
npm install express socket.io
同时，我们还需要安装一些开发依赖，包括 Nodemon 和 ESLint。Nodemon 可以帮助我们实时地监测应用程序的变化并自动重新启动，而 ESLint 则可以帮助我们规范代码风格。使用以下命令进行安装：
npm install -D nodemon eslint eslint-config-airbnb-base eslint-plugin-import
创建 Express 应用程序
现在我们已经完成了环境设置，接下来我们就可以开始编写代码了。首先，我们需要在项目根目录下创建一个新文件夹 src，用于存放我们的源代码。然后创建一个新文件 app.js，编写以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- -- ---- ------- ---- ----- --- - ---------- -- ----- ----- ------ - ---------------- -- -- - ------------------- ------- -- ---- ------- ---展开代码
上述代码中，我们首先导入 express 模块，并使用 express() 函数创建一个新的 Express 应用程序。然后，我们使用 app.listen() 方法启动服务器，并将其绑定到本地 3000 端口，这样我们就可以在浏览器中访问 http://localhost:3000。
接下来，我们需要添加一些中间件来处理 HTTP 请求和响应。这里我们使用 app.use() 方法来添加中间件，其中第一个参数是路由路径，第二个参数是要执行的处理函数。例如，我们可以添加如下中间件来处理静态文件：
app.use(express.static('public'));
这里我们让 Express 从 public 目录中提供静态文件服务，包括 CSS、JavaScript 和图片等。这样当客户端请求 /style.css 文件时，Express 就会在 public 目录下寻找对应文件，并将其发送给客户端。
添加 Socket.io 支持
现在我们的 Express 应用程序已经能够处理 HTTP 请求和响应，我们可以开始添加 Socket.io 支持来实现实时通讯了。我们需要在 app.js 中导入 Socket.io 模块并创建一个新的 Socket 服务器：
-- -------------------- ---- ------- -- -- --------- -- ----- -- - ----------------------------- -- ------ ------------------- -------- -- - -------------- ---- ------------ -- -------- ----------------------- -- -- - -------------- ---- --------------- --- ---展开代码
在上述代码中，我们首先导入 socket.io 模块，并使用 io() 函数创建一个新的 Socket 服务器，并将其绑定到我们之前创建的 Express 服务器 server 上。然后，我们使用 io.on('connection', callback) 方法监听 connection 事件，当有新的客户端连接到服务器时就会触发回调函数 callback。在回调函数中，我们可以添加一些代码来处理连接事件，例如输出一条调试信息或者发送欢迎消息给客户端。
接下来，我们需要监听 disconnect 事件来处理客户端断开连接的情况。例如，我们可以添加以下代码来输出一条调试信息：
socket.on('disconnect', () => { console.log('A user disconnected'); });
现在我们已经完成了 Socket.io 的基础配置。接下来，我们需要编写一些代码来处理用户输入和输出，并实现聊天室的业务逻辑和交互。
处理用户输入和输出
在实现聊天室应用程序时，我们需要处理用户输入和输出，包括用户的发送消息和接收消息等操作。这里我们可以使用 Socket.io 的 emit() 方法来发送消息，使用 on() 方法来接收消息。
例如，我们可以添加以下代码来处理客户端发送的消息：
socket.on('chat message', (msg) => { console.log(`Message received: ${msg}`); io.emit('chat message', msg); });
在上述代码中，我们首先监听 chat message 事件，当客户端发送消息时就会触发回调函数。在回调函数中，我们可以处理接收到的消息，并使用 io.emit() 方法将消息发送给所有连接到服务器的客户端。
同时，我们还需要添加以下代码来实现客户端接收消息的功能：
socket.on('chat message', (msg) => { console.log(`Message received: ${msg}`); io.emit('chat message', msg); });
在上述代码中，我们使用 socket.on() 方法监听 chat message 事件，并在回调函数中处理接收到的消息。例如，我们可以将消息添加到 DOM 中的消息列表中。这里我们使用 jQuery 来操作 DOM，你也可以使用其它类库或原生 JavaScript 来操作 DOM。例如：
-- -------------------- ---- ------- --- ------------------- ------- ----------------------------------------------------------- -------- ---------- -- - ----- ------ - ----- ------------------------- --- - ------------------- -- ------ -- -------- ----------------- --------- --------------- -- ----- ---------------- ------ ------ --- -- ---------- --------------- --------- -------- ----- - ------------------------------------------- --- --- ---------展开代码
在上述代码中，我们首先使用 jQuery 的 $() 方法获取元素，然后使用事件委托来监听表单的提交事件。当表单提交时，我们使用 socket.emit() 方法将用户的输入内容发送到服务器，然后清空输入框。同时，我们使用 socket.on() 方法监听 chat message 事件，当服务器发送消息时就会触发回调函数。在回调函数中，我们将消息添加到 DOM 中的 ul 元素中，并在每条消息前添加一个 li 元素。
实现群组聊天功能
现在我们已经实现了基本的聊天室功能，但是消息都是广播给所有用户的。接下来，我们将会尝试实现群组聊天功能，让用户可以创建并加入不同的聊天室。
我们可以使用 Socket.io 自带的 socket.join() 方法来加入一个房间，使用 io.to() 方法将消息发送给特定房间内的所有成员。
例如，我们可以添加以下代码来处理用户的房间加入和消息发送：
-- -------------------- ---- ------- --- ----------- - ---------- -- ------ --------------- ------ ---------- -- - -- ------ -------------------------- -- ----- ----------- - --------- ------------------------- ----------------- ------ ---- ----------------- --- --------------- --------- ----- -- - -------------------- --------- --------- ----------------------------- --------- ----- ---展开代码
在上述代码中，我们首先使用 currentRoom 变量来记录当前所在的房间名称。当有用户尝试加入新房间时，我们先使用 socket.leave() 方法离开之前的房间，然后使用 socket.join() 方法加入新房间。最后，我们使用 io.to() 方法将消息发送给当前房间内的成员。
同时，我们还需要添加以下代码来实现客户端发消息和加入房间的功能：
-- -------------------- ---- ------- ---------- -- - ----- ------ - ----- ------------------------- --- - ------------------- -- ------ -- -------- ----------------- --------- --------------- -- ----- ---------------- ------ ------ --- ---------------------------------- --- - ------------------- -- ------ -- ------ ----- -------- - ----------------- -- ---- ----------------- ------ ---------- -- ----- ------------------- ------ ------ --- -- ---------- --------------- --------- -------- ----- - ------------------------------------------- --- ---展开代码
在上述代码中，我们首先使用 jQuery 获取表单和按钮元素，然后使用事件委托来监听表单的提交事件。当用户加入新房间时，我们使用 socket.emit() 方法发送加入房间的请求，然后清空输入框。同时，我们需要在表单中添加一个输入框，让用户输入房间名称。
完成代码
最终，我们的聊天室应用程序的完整代码如下所示。你可以将其复制到你的项目中，然后执行 nodemon app.js 命令来启动应用程序，然后在浏览器中访问 http://localhost:3000 来查看效果。
-- -------------------- ---- ------- -- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- -------- - --------------------- -- ---- ------- ---- ----- --- - ---------- -- ----- ----- ------ - ----------------------- ----- -- - ----------------- ----- ---- - ---------------- -- ----- ------------------- -- -- - ------------------- ------- -- ---- ---------- --- -- --- - ------ ---------------------------------- -- ------ ------------------- -------- -- - -------------- ---- ------------ -- -------- ----------------------- -- -- - -------------- ---- --------------- --- -- -------- --- ----------- - ---------- --------------- ------ ---------- -- - -- ------ -------------------------- -- ----- ----------- - --------- ------------------------- ----------------- ------ ---- ----------------- --- -- -------- --------------- --------- ----- -- - -------------------- --------- --------- ----------------------------- --------- ----- --- ---展开代码
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- ----- ---------------------------- ------------------ ----------- ----------- ----- ---------------- ------------------ ------- ------ -------- -------- ----- ---------- ------ ------ ------------------ -- --------------------- ------- ---- ----- ------------------ ------ --------- ----------------- ----- ------------------ -- ------------ ------------- ------- ----------------- --- ------------------- ------- --------------------------------------- ------- ----------------------------------------------------------- -------- ---------- -- - ----- ------ - ----- -- -------- ------------------------- --- - ------------------- -- ------ ----- ------- - -------------- -- --------- - ----------------- --------- --------- - -- ----- ---------------- ------ ------ --- -- ---- ---------------------------------- --- - ------------------- -- ------ -- ------ ----- -------- - ----------------- -- ---- ----------------- ------ ---------- -- ----- ------------------- ------ ------ --- -- ---------- --------------- --------- -------- ----- - ------------------------------------------- --- --- --------- ------- -------展开代码
结语
本文介绍了如何使用 Express 和 Socket.io 构建一个简单的聊天室应用程序。我们首先设置了开发环境，然后创建了一个基础的 Express 应用程序。接着，我们添加了 Socket.io 支持，并实现了双向通讯。最后，我们引入了群组聊天功能，让用户可以创建和加入不同的聊天室。
实时通讯是现代 Web 应用程序中不可或缺的一部分。通过学习本文提供的示例代码和指导，相信你能够构建出更加复杂、实用的实时通讯应用程序，并应用于自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bd5caba231b2b7edfb03ea
