介绍
Express.js 是一个流行的 Node.js 框架，用于构建 Web 应用程序和 API。它易于使用，灵活性高，可以通过中间件扩展，并支持多种后端数据库。本文将介绍如何使用 Express.js 构建一个简单的聊天室，为读者提供理解和应用 Express.js 的指导。
前置知识
本文假定读者已熟悉以下技术和工具：
- Node.js
- NPM
- JavaScript
- HTML 和 CSS
实现
为了实现简单的聊天室，需要以下基本功能：
- 用户登录和退出
- 在线用户列表
- 发送和接收消息
第一步：安装和初始化项目
首先，我们需要安装 Express.js 并创建一个项目目录。使用以下命令可以快速创建项目：
$ mkdir chat-room $ cd chat-room $ npm init -y $ npm install express --save
接着，我们创建一个 server.js 文件，用于启动服务器。 在该文件中，使用以下代码初始化 Express.js：
const express = require('express');
const app = express();
const server = app.listen(3000, () => {
console.log('listening on *:3000');
});使用 app.listen 方法启动服务器，监听端口 3000。现在访问 http://localhost:3000 将看到 Express.js 的默认欢迎页面。
第二步：创建用户登录和退出功能
为了创建用户登录和退出功能，我们需要创建一个 HTML 页面和一些路由。一种简单的方法是使用模板引擎 EJS 。
首先，安装 EJS：
$ npm install ejs --save
接着，在项目根目录创建一个 views 目录，创建一个 login.ejs 文件，用于显示登录表单：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ------------
-------
------
-------- ---------
----- ------------- ----------------
------ --------------------------------
------ ----------- --------------- ---------
------- ----------------------------
-------
-------
-------这将展示一个简单的登录表单。在server.js，为 /login 和 /logout 添加路由：
-- -------------------- ---- ------- ------------- -------- ------- ------------ ----- ---- -- - -------------------- --- ------------------ ----- ---- -- - ----- -------- - ------------------ -- -- --------- ---- --------- ----- --- -- ------ ---- ---- ---------------------- --- ------------------ ----- ---- -- - ----- -------- - ------------------- -- -- --------- ---- --------- ----- ------ ---- ------ ---- ---- ------------------ ---
这里我们设置了 EJS 模板引擎并在根路由上使用它来渲染 login.ejs。在 /login 路由上，我们获取用户提交的用户名并将其添加到在线用户列表中。在 /logout 路由上，我们获取查询参数中的用户名并将其从在线用户列表中删除。
第三步：创建在线用户列表
为了创建在线用户列表，我们需要保存在线用户的数据。一种简单的方法是使用一个数组来保存。
首先，为了跟踪在线用户，我们在 server.js 中创建一个变量：
const onlineUsers = [];
在 /login 路由上，我们将新用户添加到 onlineUsers 数组中：
app.post('/login', (req, res) => {
const username = req.body.username;
onlineUsers.push(username);
res.redirect('/chat');
});为了在聊天页面中显示在线用户列表，我们创建一个 chat.ejs 文件，并渲染 onlineUsers 数组。下面是 chat.ejs 文件的代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ------------
-------
------
-------- ---------
---------- -----------
----
-- ---------------------------------- - --
------- ---- -------
-- --- --
-----
-------
-------在 server.js 中渲染 chat.ejs 文件，并将 onlineUsers 数组传递给模板：
app.get('/chat', (req, res) => {
res.render('chat', { onlineUsers });
});现在，当用户登录后，将看到一个 Chat Room 标题，用户列表和当前用户。
第四步：发送和接收消息
要实现聊天功能，我们需要使用 WebSockets。一种流行的库是 socket.io。
首先，安装 socket.io：
$ npm install socket.io --save
在 server.js 中启用 socket.io 并监听事件：
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a new client connected');
});当客户端连接到服务器时，我们在控制台上显示一条消息。接下来，我们需要添加发送和接收消息的功能。
在 chat.ejs 文件中，创建一个输入框和一个提交按钮，用于发送消息：
<form id="message-form" action="#"> <input id="message-input" type="text" placeholder="Type your message"> <button type="submit">Send</button> </form>
接着，在 server.js 中监听 message 事件并广播到所有客户端：
io.on('connection', (socket) => {
console.log('a new client connected');
socket.on('message', (data) => {
io.emit('message', data);
});
});当有客户端发送消息时，我们将其广播到所有连接的客户端。现在，我们需要在客户端上监听 message 事件并显示消息。
在 chat.ejs 文件中，使用以下代码创建消息列表：
<ul id="message-list"></ul>
接着，在 public 目录下创建一个 app.js 文件，并在 chat.ejs 文件中添加以下脚本：
<script src="/socket.io/socket.io.js"></script> <script src="app.js"></script>
在 app.js 文件中，连接到服务器并发送消息：
const socket = io();
document.getElementById('message-form').addEventListener('submit', (event) => {
event.preventDefault();
const messageInput = document.getElementById('message-input');
socket.emit('message', messageInput.value);
messageInput.value = '';
});当客户端发送消息时，我们调用 socket.emit 发送 message 事件，同时清除输入框。
最后，在 app.js 文件中监听 message 事件：
socket.on('message', (data) => {
const messageList = document.getElementById('message-list');
const messageListItem = document.createElement('li');
messageListItem.innerHTML = data;
messageList.appendChild(messageListItem);
});当客户端接收到消息时，我们在消息列表中创建一个新的列表项。
总结
在本文中，我们学习了如何使用 Express.js 和 socket.io 构建简单的聊天室。我们涵盖了用户登录和退出、在线用户列表、发送和接收消息等功能，并提供了示例代码。使用这些技术，读者可以构建更复杂的实时 Web 应用程序和 API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64928e9d48841e98940568ce