前言
在线聊天是Web应用程序中常见的功能之一。在本文中，我们将介绍如何使用Express.js和Socket.IO构建一个简单的在线聊天应用程序。Express是node.js的一个流行的Web应用程序框架，而Socket.IO是一个即时通讯库，它可以在Web浏览器和服务器之间建立实时通信。
实现步骤
步骤一：安装依赖
在终端中进入项目文件夹，执行以下命令：
npm install --save express npm install --save socket.io
步骤二：创建Express应用
创建一个名为"app.js"的文件，在文件中编写以下代码：
const express = require('express');
const app = express();
app.use(express.static('public'));
const server = app.listen(3000, () => {
console.log('listening on *:3000');
});在这个文件中，我们首先引入了express库并创建了一个Express应用程序。然后，我们使用 express.static 中间件将 public 文件夹设置为静态资源目录，并监听端口3000.
步骤三：添加Socket.IO功能
在 app.js 文件中添加以下代码：
// javascriptcn.com 代码示例
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
})在这个代码中，我们首先引入了socket.io库，并将其附加到我们之前创建的服务器上。然后，我们监听用户连接事件，并在控制台中记录每个接入的用户。 接下来，我们监听来自客户端的'chat message'事件并向所有客户端广播消息。
步骤四：创建HTML文件
在 public 文件夹中创建一个名为 index.html 的文件。在该文件中，添加以下代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script>
var socket = io();
$('form').submit(function(e){
e.preventDefault();
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>在这个代码片段中，我们首先引入了socket.io和jQuery库。在页面加载完成后，我们创建一个socket.io连接并在表单提交时发送聊天消息。当收到来自服务器的聊天消息时，我们将其附加到消息列表中
步骤五: 运行应用程序
在终端中运行以下命令启动服务器：
node app.js
在浏览器中输入以下URL，将打开我们的在线聊天应用程序：
http://localhost:3000/
你可以打开多个浏览器窗口或选项卡并在它们之间发送聊天消息。
总结
在本文中，我们使用Express.js和Socket.IO创建了一个简单的在线聊天应用程序。使用Socket.IO，我们能够建立实时通信连接，而不是WebSocket之类的传统的HTTP请求-响应往返。这使得我们的在线聊天应用程序具有类似即时通讯软件（如QQ和MSN）的用户体验。我们还看到了如何使用公共文件夹使HTML、CSS、JavaScript文件等文件可供外部部署服务使用。 你可以在此基础上进一步升级应用，比如记录聊天记录、人员列表等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654224007d4982a6ebbca529