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

发布于：2025-05-13 ⋅ 阅读:(17) ⋅ 点赞:(0)

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

一、技术选型对比

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

为什么选择Socket.IO？

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

二、核心实现流程

2.1 系统架构图

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

2.2 前后端交互时序图

前端 后端 所有前端 指定前端 建立WebSocket连接 发送login事件(用户名) 返回login_success 广播user_list 发送private_message 定向转发消息 断开连接 更新user_list 前端 后端 所有前端 指定前端

三、前端代码详解

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', '大家好！');

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布