WebSocket与Socket.IO实现简易客服聊天系统全解析

WebSocket结合Socket.IO实现简易客服聊天系统全解析

一、技术选型对比

技术	优点	缺点	适用场景
原生WebSocket	浏览器原生支持，性能好	API较底层，需手动处理断线重连等逻辑	简单实时应用
Socket.IO	自动重连，房间管理，兼容性好	体积较大，有一定学习成本	复杂实时应用，生产环境

为什么选择Socket.IO？

内置断线自动重连
支持房间/命名空间管理
兼容老旧浏览器（自动降级）
丰富的API和社区支持

二、核心实现流程

2.1 系统架构图

前端浏览器
  ↑↓ HTTP/WebSocket
Node.js服务器(Socket.IO)
  ↑↓ 数据库(可选)
消息持久化存储

2.2 前后端交互时序图

三、前端代码详解

3.1 核心功能实现

功能	代码片段	说明
建立连接	`socket = io('http://localhost:3000')`	连接到指定服务器的Socket.IO服务
用户登录	`socket.emit('login', username)`	发送登录事件，携带用户名
接收消息	`socket.on('message', (data) => {...})`	监听服务器推送的消息
发送私聊	`socket.emit('private_message', {to, message})`	发送私聊消息到指定用户
用户列表更新	`socket.on('user_list', (users) => {...})`	实时更新在线用户列表

3.2 页面结构分析

<div class="container">
    <!-- 登录界面 -->
    <div id="login">
        <input type="text" id="username">
        <button onclick="login()">登录</button>
    </div>

    <!-- 聊天界面 -->
    <div id="chat" style="display: none;">
        <h3>当前用户：<span id="currentUser"></span></h3>
        <div>
            <h4>在线用户</h4>
            <ul id="userList"></ul>
        </div>
        <div id="messages"></div>
        <div>
            <select id="receiver">
                <option value="">选择接收人</option>
            </select>
            <input type="text" id="messageInput">
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>
</div>

3.3 js功能实现

先声明全局变量：

// 2.1 全局变量声明
 let socket;       // 用于存储Socket.IO连接实例
 let currentUser;  // 存储当前登录的用户名

用户登录，即进入房间：

// 2.2 登录功能函数
        function login() {
            // 获取用户名输入框的值并去除前后空格
            const username = document.getElementById('username').value.trim();
            // 如果用户名为空，直接返回
            if (!username) return;
    
            // 2.3 建立Socket.IO连接(连接到本地3000端口)
            socket = io('http://localhost:3000');
            // 存储当前用户名
            currentUser = username;
    
            // 2.4 Socket.IO事件监听
            // 连接成功事件
            socket.on('connect', () => {
                // 向服务器发送登录事件，传递用户名
                socket.emit('login', username);
            });
    
            // 登录成功事件
            socket.on('login_success', () => {
                // 隐藏登录界面，显示聊天界面
                document.getElementById('login').style.display = 'none';
                document.getElementById('chat').style.display = 'block';
                // 显示当前用户名
                document.getElementById('currentUser').textContent = username;
            });
    
            // 登录错误事件
            socket.on('login_error', (err) => {
                // 显示错误信息
                alert(err);
            });
    
            // 用户列表更新事件
            socket.on('user_list', (users) => {
                // 获取用户列表和接收者选择框的DOM元素
                const list = document.getElementById('userList');
                const receiver = document.getElementById('receiver');
                
                // 清空用户列表和接收者选择框
                list.innerHTML = '';
                receiver.innerHTML = '<option value="">选择接收人</option>';
                
                // 2.5 遍历用户列表，更新界面
                users.forEach(user => {
                    // 不显示当前用户自己
                    if (user !== currentUser) {
                        // 添加到在线用户列表
                        const li = document.createElement('li');
                        li.textContent = user;
                        list.appendChild(li);
    
                        // 添加到接收者选择框
                        const option = document.createElement('option');
                        option.value = user;
                        option.textContent = user;
                        receiver.appendChild(option);
                    }
                });
            });
    
            // 收到消息事件
            socket.on('message', (data) => {
                // 获取消息显示区域的DOM元素
                const messagesDiv = document.getElementById('messages');
                // 创建消息元素
                const msgEl = document.createElement('div');
                // 设置消息样式类，如果是自己发送的消息添加self类
                msgEl.className = `message ${data.self ? 'self' : ''}`;
                // 设置消息内容格式：[发送者 → 接收者]: 消息内容
                msgEl.textContent = `[${data.from} → ${data.to}]: ${data.message}`;
                // 将消息添加到消息显示区域
                messagesDiv.appendChild(msgEl);
                // 自动滚动到底部
                messagesDiv.scrollTop = messagesDiv.scrollHeight;
            });
    
            // 错误事件
            socket.on('error', (err) => {
                // 显示错误信息
                alert(err);
            });
        }

用户发送消息：

		// 2.6 发送消息函数
        function sendMessage() {
            // 获取接收者和消息内容
            const to = document.getElementById('receiver').value;
            const message = document.getElementById('messageInput').value.trim();
            
            // 如果接收者或消息为空，直接返回
            if (!to || !message) return;
    
            // 向服务器发送私聊消息
            socket.emit('private_message', {
                to,        // 接收者
                message    // 消息内容
            });
    
            // 清空消息输入框
            document.getElementById('messageInput').value = '';
        }

四、后端代码详解

为了实现1对1的聊天功能 to().emait('',data) ，我们需要知道你要发送的那个人的 socket.id ，这里就需要对每个登录的人与他的socket.id进行关联，因为 socket.id 前端不知道，所以后端需要创建一个new Map对象对用户的name进行映射，用户的name对应它的socket.id。在发消息的时候只需要知道要发的人的name即可进行get从map对象中获取对应的socket.id，从而实现一对一聊天

4.1 主要事件处理

事件类型	处理逻辑	业务作用
connection	初始化socket连接，打印日志	新客户端连接处理入口
login	检查用户名冲突，更新users映射，广播user_list	用户身份认证和在线状态管理
private_message	查找接收者socket.id，分别向发送方和接收方发送消息	实现私聊消息转发
disconnect	从users映射中移除用户，广播更新后的user_list	处理用户离线状态

4.2 环境配置

// 1.1 引入必要的Node.js模块
const http = require('http');       // HTTP服务器模块
const socketio = require('socket.io'); // Socket.IO模块

// 1.2 创建基本的HTTP服务器
const server = http.createServer((req, res) => {
    // 对所有HTTP请求返回简单的HTML响应
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end('<h1>Chat Server</h1>');
}).listen(3000, () => {
    // 服务器启动后打印日志
    console.log("Server running at http://localhost:3000");
});

// 1.3 创建Socket.IO服务器并配置CORS
const io = socketio(server, {
    cors: {
        origin: "*", // 允许所有来源的跨域请求
        methods: ["GET", "POST"] // 允许的HTTP方法
    }
});

4.3 用户信息管理

// 2.1 创建用户映射表
// 使用Map存储用户名到socket.id的映射关系
// 结构: { 用户名 => socket.id }
const users = new Map();

4.4 具体功能实现

// 3.1 监听客户端连接事件
io.on('connection', (socket) => {
    // 当新客户端连接时打印日志
    console.log(`现在登录的用户socketid: ${socket.id}`);

    // 3.2 处理用户登录
    socket.on('login', (username) => {
        // 检查用户名是否已被占用
        if (users.has(username)) {
            // 发送登录错误消息
            socket.emit('login_error', '当前用户名已经被注册');
            return;
        }

        // 3.3 存储用户信息
        users.set(username, socket.id); // 将用户名和socket.id存入Map
        socket.username = username;     // 将用户名附加到socket对象上

        // 3.4 通知所有客户端更新用户列表
        // Array.from(users.keys()) 获取所有用户名数组
        io.emit('user_list', Array.from(users.keys()));

        // 通知当前客户端登录成功
        socket.emit('login_success');
    });

    // 3.5 处理私聊消息
    socket.on('private_message', ({ to, message }) => {
        // 参数解构: to是接收者用户名, message是消息内容

        // 3.6 查找接收者的socket.id
        const targetSocketId = users.get(to);

        // 检查接收者是否存在
        if (!targetSocketId) {
            socket.emit('error', '用户未找到');
            console.log("用户未找到");
            return;
        }

        // 3.7 发送消息给发送者(自己)
        socket.emit('message', {
            from: socket.username, // 发送者
            to: to,               // 接收者
            message: message,     // 消息内容
            self: true            // 标记为自己发送的消息
        });

        // 3.8 发送消息给接收者
        // socket.to()方法指定接收者的socket.id
        socket.to(targetSocketId).emit('message', {
            from: socket.username,
            to: to,
            message: message,
            self: false           // 标记为他人发送的消息
        });
    });

    // 3.9 处理断开连接
    socket.on('disconnect', () => {
        // 检查是否是已登录用户断开连接
        if (socket.username) {
            // 3.10 从用户映射中移除该用户
            users.delete(socket.username);

            // 3.11 通知所有客户端更新用户列表
            io.emit('user_list', Array.from(users.keys()));

            // 打印断开连接日志
            console.log(`用户断开连接: ${socket.username}`);
        }
    });
});

五、.on和.emit方法解惑

5.1 Socket.io 前端视角的 `on` 和 `emit` 方法对比

从前端(客户端)的角度来看，socket.on() 和 socket.emit() 的使用方式与后端类似，但角色和典型场景有所不同。以下是前端视角的对比表格：

特性	`socket.on('event', callback)` (前端)	`socket.emit('event', data)` (前端)
用途	监听服务器发送的事件	向服务器发送事件
方向	接收服务器数据	向服务器发送数据
回调函数	有，处理服务器推送的数据	无，只发送数据
作用范围	监听特定服务器事件	向服务器发送特定事件
是否等待响应	被动接收服务器消息	主动向服务器发起请求
典型使用场景	接收通知、更新、广播消息等	发送用户操作、请求数据等

`socket.on('event', callback)`

用于监听服务器发送的事件
当服务器触发对应事件时，回调函数会执行
典型前端使用场景：
- 接收实时通知
- 获取数据更新
- 监听广播消息
示例：

// 监听服务器发送的消息
socket.on('newMessage', (message) => {
  console.log('收到新消息:', message);
  // 更新UI显示新消息
});

// 监听服务器广播
socket.on('userJoined', (username) => {
  console.log(`${username} 加入了聊天室`);
});

`socket.emit('event', data)`

用于向服务器发送事件和数据
可以带参数发送给服务器
典型前端使用场景：
- 发送用户操作
- 请求特定数据
- 提交表单等
示例：

// 发送聊天消息
socket.emit('sendMessage', {
  text: '你好！',
  room: 'general'
});

// 请求加入房间
socket.emit('joinRoom', {
  roomId: '123',
  userId: 'user456'
});

5.2 Socket.io 的 `on` 和 `emit` 方法对比

是的，socket.on() 和 socket.emit() 在 Socket.io 中有不同的用途。下面是一个对比表格：

特性	`socket.on('event', callback)`	`socket.emit('event', data)`
用途	注册/监听事件	触发/发送事件
方向	接收数据	发送数据
回调函数	有，处理接收的数据	无，只发送数据
作用范围	监听特定事件	向特定目标发送事件
是否等待响应	被动等待	主动触发
典型使用场景	服务器监听客户端请求	客户端或服务器发送消息

`socket.on('event', callback)`

用于注册事件监听器，等待接收特定事件
当对应的事件被触发时，回调函数会被执行
示例：

// 服务器端监听登录事件
socket.on('login', (credentials) => {
  console.log('收到登录请求:', credentials);
  // 验证逻辑...
});

`socket.emit('event', data)`

用于触发事件并发送数据
可以向特定客户端或所有客户端广播消息
示例：

// 客户端发送登录请求
socket.emit('login', { username: 'user', password: 'pass' });

// 服务器端广播消息给所有客户端
io.emit('message', '大家好！');

WebSocket与Socket.IO实现简易客服聊天系统全解析

WebSocket结合Socket.IO实现简易客服聊天系统全解析

一、技术选型对比

二、核心实现流程

2.1 系统架构图

2.2 前后端交互时序图

三、前端代码详解

3.1 核心功能实现

3.2 页面结构分析

3.3 js功能实现

先声明全局变量：

用户登录，即进入房间：

用户发送消息：

四、后端代码详解

4.1 主要事件处理

4.2 环境配置

4.3 用户信息管理

4.4 具体功能实现

五、.on和.emit方法解惑

5.1 Socket.io 前端视角的 on 和 emit 方法对比

**socket.on('event', callback) **

socket.emit('event', data)

5.2 Socket.io 的 on 和 emit 方法对比

socket.on('event', callback)

socket.emit('event', data)

相关文章

5.1 Socket.io 前端视角的 `on` 和 `emit` 方法对比

`socket.on('event', callback)`

`socket.emit('event', data)`

5.2 Socket.io 的 `on` 和 `emit` 方法对比

`socket.on('event', callback)`

`socket.emit('event', data)`