资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

多人聊天室

创作时间:

作者:

@小白创作中心

多人聊天室

引用

CSDN

https://blog.csdn.net/mmc123125/article/details/144281961

Socket.IO 是一个用于实现实时双向通信的 JavaScript 库，它封装了 WebSocket、长轮询等多种传输方式，提供了一个可靠且高效的双向通信通道。本文将带你使用 Socket.IO 构建一个多人聊天室，涵盖实时通信的基础与一些进阶功能，如用户加入/离开通知、消息广播与私人消息。

1. 引言：为什么选择 Socket.IO 实现实时通信？

在 Web 开发中，实时通信功能通常用于即时消息、在线游戏、协作工具等应用场景。传统的 HTTP 请求是基于请求-响应模型，这意味着客户端每次需要获取数据时，都需要发送请求到服务器，并等待服务器的响应。然而，对于实时交互，这种方式显得效率低下。

Socket.IO 是一个为实时通信而设计的 JavaScript 库，它封装了 WebSocket、长轮询等多种传输方式，提供了一个可靠且高效的双向通信通道。无论是在浏览器端还是 Node.js 服务器端，Socket.IO 都提供了简单易用的 API，可以帮助我们构建实时聊天应用、实时更新系统等功能。

Socket.IO 的特点：

自动重连：即使在网络中断时，Socket.IO 也会自动重新连接。
多种传输方式支持：支持 WebSocket、长轮询等多种传输方式，确保跨浏览器的兼容性。
实时双向通信：可以让服务器主动向客户端发送数据，并且支持客户端向服务器发送数据。
事件驱动：基于事件机制，简化了消息的处理逻辑。

本教程将带你使用 Socket.IO 构建一个多人聊天室，涵盖实时通信的基础与一些进阶功能，如用户加入/离开通知、消息广播与私人消息。

2. 环境搭建

安装 Node.js

首先需要在系统上安装Node.js，它是构建 Node.js 应用的基础环境。可以通过以下命令来检查是否安装成功：

node -v
npm -v

如果你看到 Node.js 和 npm 的版本号，说明安装成功。

安装 Socket.IO

在终端中，进入到你的项目目录，然后使用 npm 安装 express 和 socket.io 依赖：

npm install express socket.io

Express：一个 Web 应用框架，用于简化 Node.js 中 HTTP 服务的创建。
Socket.IO：一个用于实现实时双向通信的库。

3. 创建 Node.js 项目

步骤 1：初始化项目

在你的项目目录中，运行以下命令来初始化一个新的 Node.js 项目：

mkdir socketio-chat
cd socketio-chat
npm init -y

这个命令会创建一个 package.json 文件，其中包含项目的配置信息。

步骤 2：创建服务器

在项目根目录下创建一个 server.js 文件，用于搭建服务器并处理客户端的 Socket.IO 连接。

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
// 创建 Express 应用
const app = express();
// 创建 HTTP 服务器
const server = http.createServer(app);
// 将 Socket.IO 绑定到 HTTP 服务器
const io = socketIo(server);
// 监听连接事件
io.on('connection', (socket) => {
    console.log('用户已连接');
    // 监听用户发送的消息
    socket.on('chat message', (msg) => {
        console.log('收到消息:', msg);
        // 广播给所有客户端
        io.emit('chat message', msg);
    });
    // 监听用户断开连接
    socket.on('disconnect', () => {
        console.log('用户断开连接');
    });
});
// 提供静态文件（如前端页面）
app.use(express.static('public'));
// 启动服务器
const port = 3000;
server.listen(port, () => {
    console.log(`服务器正在运行在 http://localhost:${port}`);
});

在上面的代码中，我们创建了一个简单的 HTTP 服务器，并且将 Socket.IO 与它绑定。在 io.on('connection') 事件中，我们监听客户端的连接，并在客户端发送消息时将其广播给所有连接的用户。

4. 实现聊天室功能

步骤 1：创建前端页面

在项目根目录下创建一个 public 文件夹，并在其中创建一个 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>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        #messages { list-style-type: none; padding: 0; }
        #messages li { padding: 8px; border-bottom: 1px solid #ddd; }
        #form { display: flex; margin-top: 10px; }
        #input { flex: 1; padding: 10px; border: 1px solid #ccc; }
        #sendBtn { padding: 10px 15px; background-color: #007bff; color: white; border: none; cursor: pointer; }
        #sendBtn:hover { background-color: #0056b3; }
    </style>
</head>
<body>
    <h2>多人聊天室</h2>
    <ul id="messages"></ul>
    <form id="form" action="">
        <input id="input" autocomplete="off" placeholder="输入消息..." />
        <button id="sendBtn" type="submit">发送</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io(); // 连接到 Socket.IO 服务器
        // 监听服务器广播的消息并显示
        socket.on('chat message', (msg) => {
            const li = document.createElement('li');
            li.textContent = msg;
            document.getElementById('messages').appendChild(li);
        });
        // 发送消息
        const form = document.getElementById('form');
        const input = document.getElementById('input');
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            if (input.value) {
                socket.emit('chat message', input.value); // 发送消息到服务器
                input.value = ''; // 清空输入框
            }
        });
    </script>
</body>
</html>

在 index.html 中，我们创建了一个简单的用户界面，包括一个消息列表和一个输入框。通过 Socket.IO 的 emit 方法，我们将用户输入的消息发送到服务器，而服务器则会广播该消息到所有已连接的客户端。

步骤 2：实现用户加入与离开提示

为了让用户在进入聊天室时感知到其他用户的状态，我们可以在服务器端和客户端之间添加用户加入和离开的提示。

修改服务器端代码：

// 监听连接事件
io.on('connection', (socket) => {
    console.log('用户已连接');
    // 广播用户加入
    socket.broadcast.emit('chat message', '一个新用户加入了聊天室！');
    // 监听用户发送的消息
    socket.on('chat message', (msg) => {
        console.log('收到消息:', msg);
        // 广播给所有客户端
        io.emit('chat message', msg);
    });
    // 监听断开连接
    socket.on('disconnect', () => {
        console.log('用户断开连接');
        // 广播用户离开
        socket.broadcast.emit('chat message', '一个用户离开了聊天室');
    });
});

修改客户端代码：

// 监听服务器广播的消息并显示
socket.on('chat message', (msg) => {
    const li = document.createElement('li');
    li.textContent = msg;
    document.getElementById('messages').appendChild(li);
});

现在，当有新用户加入或离开时，所有连接的客户端都会接收到相应的提示。

步骤 3：实现消息广播与私人消息

在聊天室中，除了广播消息给所有用户外，还可以实现私人消息功能。为了实现这一功能，我们可以给每个用户分配一个唯一的标识符，并根据这个标识符将消息发送给特定用户。

修改服务器端代码：

// 监听连接事件
io.on('connection', (socket) => {
    console.log('用户已连接');
    
    // 监听私人消息
    socket.on('private message', (recipientId, msg) => {
        console.log('收到私人消息:', msg);
        // 通过 socket.id 向指定用户发送消息
        io.to(recipientId).emit('chat message', `私人消息: ${msg}`);
    });
    // 监听用户发送的消息
    socket.on('chat message', (msg) => {
        console.log('收到消息:', msg);
        // 广播给所有客户端
        io.emit('chat message', msg);
    });
    // 监听断开连接
    socket.on('disconnect', () => {
        console.log('用户断开连接');
    });
});

修改客户端代码：

// 发送私人消息
function sendPrivateMessage() {
    const recipientId = prompt('请输入接收者的ID:');
    const message = prompt('请输入私人消息:');
    socket.emit('private message', recipientId, message);
}
// 使用按钮触发私人消息
const privateMessageBtn = document.getElementById('privateMessageBtn');
privateMessageBtn.addEventListener('click', sendPrivateMessage);