使用 Node.js 和 Socket.io 构建可创建、可加入房间的实时聊天室
发布人：shili8
发布时间：2025-03-05 07:03
阅读次数：0
**使用 Node.js 和 Socket.io 构建可创建、可加入房间的实时聊天室**
在本文中，我们将使用 Node.js 和 Socket.io 来构建一个可创建、可加入房间的实时聊天室。这个聊天室允许用户创建新的房间，并且可以加入已经存在的房间。
**环境准备**
首先，我们需要安装必要的依赖包：
bashnpm install express socket.io
**服务器端代码**
下面是服务器端的代码：
javascript// server.jsconst express = require('express');
const app = express();
const server = require(' />const io = require('socket.io')(server);
let rooms = {};
app.use(express.static(__dirname + '/public'));
io.on('connection', (socket) => {
console.log('客户端连接');
// 当客户端创建新房间时 socket.on('createRoom', (roomName) => {
if (!rooms[roomName]) {
rooms[roomName] = [];
io.emit('newRoom', roomName);
}
});
// 当客户端加入房间时 socket.on('joinRoom', (roomName, username) => {
if (rooms[roomName]) {
rooms[roomName].push(username);
io.to(roomName).emit('newUser', username);
} else {
console.log(`房间 ${roomName}不存在`);
}
});
// 当客户端发送消息时 socket.on('sendMessage', (roomName, message) => {
if (rooms[roomName]) {
io.to(roomName).emit('newMessage', username, message);
} else {
console.log(`房间 ${roomName}不存在`);
}
});
// 当客户端断开连接时 socket.on('disconnect', () => {
console.log('客户端断开连接');
});
});
server.listen(3000, () => {
console.log('服务器启动在 />});
**客户端代码**
下面是客户端的代码：
javascript// client.jsconst socket = io.connect(' />
// 创建新房间document.getElementById('create-room').addEventListener('click', () => {
const roomName = document.getElementById('room-name').value;
socket.emit('createRoom', roomName);
});
// 加入房间document.getElementById('join-room').addEventListener('click', () => {
const roomName = document.getElementById('room-name').value;
const username = document.getElementById('username').value;
socket.emit('joinRoom', roomName, username);
});
// 发送消息document.getElementById('send-message').addEventListener('click', () => {
const roomName = document.getElementById('room-name').value;
const message = document.getElementById('message').value;
socket.emit('sendMessage', roomName, message);
});
**HTML**
下面是 HTML 的代码：
html<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时聊天室</title>
<style>
#room-name {
width:200px;
height:30px;
padding:10px;
font-size:16px;
border:1px solid #ccc;
}
#username {
width:200px;
height:30px;
padding:10px;
font-size:16px;
border:1px solid #ccc;
}
#message {
width:300px;
height:50px;
padding:10px;
font-size:16px;
border:1px solid #ccc;
}
#send-message {
background-color: #4CAF50;
color: #fff;
padding:10px20px;
border: none;
border-radius:5px;
cursor: pointer;
}
#create-room {
background-color: #4CAF50;
color: #fff;
padding:10px20px;
border: none;
border-radius:5px;
cursor: pointer;
}
#join-room {
background-color: #4CAF50;
color: #fff;
padding:10px20px;
border: none;
border-radius:5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>实时聊天室</h1>
<input id="room-name" type="text" placeholder="房间名称">
<button id="create-room">创建新房间</button>
<input id="username" type="text" placeholder="用户名">
<button id="join-room">加入房间</button>
<input id="message" type="text" placeholder="消息内容">
<button id="send-message">发送消息</button>
<script src="/socket.io/socket.io.js"></script>
<script src="client.js"></script>
</body>
</html>
**总结**
在本文中，我们使用 Node.js 和 Socket.io 构建了一个可创建、可加入房间的实时聊天室。这个聊天室允许用户创建新的房间，并且可以加入已经存在的房间。我们还提供了客户端和服务器端的代码示例，以及 HTML 的代码示例。
粤公网安备 44011102002787号