在现代 Web 应用程序中，实时消息通信已成为不可或缺的功能。而 Express.js 和 Socket.io 是两个流行的工具，可以轻松实现实时消息通信。本文将介绍如何使用 Express.js 和 Socket.io 实现实时消息通信，并提供示例代码。
什么是 Express.js
Express.js 是一个流行的 Node.js Web 应用程序框架，它提供了一组强大的功能，包括路由、中间件、模板引擎等。Express.js 的主要目的是帮助开发人员更快速地构建 Web 应用程序。
什么是 Socket.io
Socket.io 是一个基于 Node.js 的实时消息库，它可以在客户端和服务器之间建立实时的双向通信。Socket.io 支持多种传输协议，包括 WebSocket、Flash Socket、AJAX 等。
实现实时消息通信
下面将介绍如何使用 Express.js 和 Socket.io 实现实时消息通信。
步骤 1：安装 Express.js 和 Socket.io
首先，需要安装 Express.js 和 Socket.io。可以使用 npm 命令进行安装。
npm install express socket.io --save
步骤 2：创建 Express.js 应用程序
接下来，创建一个 Express.js 应用程序。可以使用以下代码创建一个简单的 Express.js 应用程序。
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.listen(3000, () => {
console.log('App listening on port 3000!');
});此代码将创建一个 Express.js 应用程序，并将其运行在端口 3000 上。当用户访问根目录时，将返回一个名为 index.html 的文件。
步骤 3：添加 Socket.io 支持
现在，将添加 Socket.io 支持。可以使用以下代码将 Socket.io 添加到 Express.js 应用程序中。
// javascriptcn.com 代码示例
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
});此代码将创建一个 Socket.io 服务器，并在用户连接和断开连接时打印消息。它还将监听名为 chat message 的消息，并在接收到消息时将其广播给所有连接的客户端。
步骤 4：创建客户端代码
最后，创建客户端代码。可以使用以下代码创建一个简单的客户端。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Socket.io Chat Example</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form id="message-form">
<input id="message-input" type="text" autocomplete="off" />
<button>Send</button>
</form>
<script>
$(function () {
var socket = io();
$('form').submit(function (e) {
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#message-input').val());
$('#message-input').val('');
return false;
});
socket.on('chat message', function (msg) {
$('#messages').append($('<li>').text(msg));
});
});
</script>
</body>
</html>此代码将创建一个简单的聊天界面，并使用 Socket.io 进行实时消息通信。当用户输入消息并单击“发送”按钮时，将使用 Socket.io 将消息发送到服务器。服务器将广播消息给所有连接的客户端，并在客户端上显示消息。
总结
本文介绍了如何使用 Express.js 和 Socket.io 实现实时消息通信。通过遵循上述步骤，可以轻松创建一个具有实时消息通信功能的 Web 应用程序。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65557300d2f5e1655df9c70d