在现代 Web 应用中，实时通信已经成为了必不可少的一部分。而 WebSocket 技术则成为了实现实时通信的重要手段之一。在本文中，我们将使用 Express.js 和 WebSocket 技术来开发一个在线聊天 Web 应用。
什么是 Express.js？
Express.js 是一个基于 Node.js 平台的 Web 应用程序框架。它提供了一组强大的特性和工具，使得开发 Web 应用变得更加容易和快捷。Express.js 是一个轻量级的框架，可以快速构建 Web 应用，同时也支持扩展和自定义。
什么是 WebSocket？
WebSocket 是一种在 Web 应用中实现实时通信的技术。它是基于 TCP 协议的，可以在客户端和服务器之间建立持久化的连接。与传统的 HTTP 请求不同，WebSocket 可以在客户端和服务器之间进行双向通信，同时也可以实现广播和群聊功能。
开发在线聊天 Web 应用
在本文中，我们将使用 Express.js 和 WebSocket 技术来开发一个在线聊天应用。该应用将支持用户注册、登录、实时聊天和在线用户列表等功能。
项目结构
我们首先创建一个新的 Express.js 项目，并创建以下文件和目录：
// www.javascriptcn.com code example - app.js - package.json - public/ - index.html - main.css - main.js - routes/ - index.js - views/ - login.ejs - register.ejs - chat.ejs
其中，app.js 是应用的入口文件，public/ 目录存放静态资源，routes/ 目录存放路由文件，views/ 目录存放视图文件。
实现用户注册和登录功能
我们首先实现用户注册和登录功能。在 routes/index.js 文件中，我们可以定义以下路由：
// www.javascriptcn.com code example
const express = require('express');
const router = express.Router();
router.get('/register', (req, res) => {
res.render('register');
});
router.post('/register', (req, res) => {
// 处理用户注册逻辑
});
router.get('/login', (req, res) => {
res.render('login');
});
router.post('/login', (req, res) => {
// 处理用户登录逻辑
});
module.exports = router;在 views/register.ejs 和 views/login.ejs 文件中，我们可以定义用户注册和登录的表单。
实现实时聊天功能
接下来，我们实现实时聊天功能。在 public/main.js 文件中，我们可以使用 WebSocket 技术来实现实时通信：
// www.javascriptcn.com code example
const socket = new WebSocket('ws://localhost:3000');
socket.onopen = () => {
console.log('WebSocket 连接成功');
};
socket.onmessage = (event) => {
console.log('收到消息：', event.data);
};
socket.onclose = () => {
console.log('WebSocket 连接关闭');
};
function sendMessage(message) {
socket.send(JSON.stringify({
type: 'message',
data: message
}));
}在 app.js 文件中，我们可以使用 ws 模块来创建 WebSocket 服务器：
// www.javascriptcn.com code example
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('WebSocket 连接成功');
ws.on('message', (message) => {
console.log('收到消息：', message);
// 广播消息给所有连接的客户端
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('WebSocket 连接关闭');
});
});在 views/chat.ejs 文件中，我们可以定义实时聊天的界面。
实现在线用户列表功能
最后，我们实现在线用户列表功能。在 public/main.js 文件中，我们可以使用 WebSocket 技术来监听在线用户列表的变化：
// www.javascriptcn.com code example
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'userList') {
// 更新在线用户列表
} else if (data.type === 'message') {
// 显示聊天消息
}
};在 app.js 文件中，我们可以在 WebSocket 服务器中维护在线用户列表：
// www.javascriptcn.com code example
const users = new Set();
wss.on('connection', (ws) => {
console.log('WebSocket 连接成功');
users.add(ws);
ws.on('message', (message) => {
console.log('收到消息：', message);
// 广播消息给所有连接的客户端
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('WebSocket 连接关闭');
users.delete(ws);
// 更新在线用户列表
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({
type: 'userList',
data: Array.from(users).map((ws) => ws.user)
}));
}
});
});
});在 public/main.js 文件中，我们可以使用 WebSocket 技术来获取在线用户列表：
socket.send(JSON.stringify({
type: 'userList'
}));在 views/chat.ejs 文件中，我们可以显示在线用户列表。
至此，我们已经完成了在线聊天 Web 应用的开发。完整的示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8c9a5a941bf7134f5b509