针对 WebSocket 入门小白，结合这份聊天室代码，系统总结其基础知识点

🌐 WebSocket 基础概念

1. 什么是 WebSocket？

双向通信协议 - 客户端和服务器可以主动发送消息
持久连接 - 建立连接后保持打开状态
实时性 - 消息即时到达，无延迟

2. 与 HTTP 的区别

特性	HTTP	WebSocket
连接方式	短连接，请求-响应	长连接，持久化
通信方向	客户端发起	双向通信
实时性	轮询，有延迟	真正实时
开销	每次请求都有头部	建立连接后开销小

🔧 WebSocket 核心 API

服务器端（Node.js）

javascript 复制代码

// 1. WebSocket 路由
app.ws('/ws', (ws, req) => {
    // ws: WebSocket 连接对象
    // req: 请求对象
});

// 2. 发送消息
ws.send('消息内容');
ws.send(JSON.stringify({ data: '对象数据' }));

// 3. 事件监听
ws.on('message', (msg) => {});    // 接收消息
ws.on('close', () => {});         // 连接关闭
ws.on('error', (err) => {});      // 错误处理

客户端（浏览器）

javascript 复制代码

const ws = new WebSocket('ws://localhost:3000/ws');

// 事件监听
ws.onopen = () => {};             // 连接建立
ws.onmessage = (event) => {};     // 接收消息
ws.onclose = () => {};            // 连接关闭
ws.onerror = () => {};            // 错误处理

// 发送消息
ws.send('消息内容');

🏗️ WebSocket 连接生命周期

连接建立

javascript 复制代码

// 客户端发起连接
const ws = new WebSocket('ws://服务器地址/路径');

// 服务器处理连接
app.ws('/路径', (ws, req) => {
    console.log('新连接建立');
});

消息通信

javascript 复制代码

// 客户端发送
ws.send('Hello Server!');

// 服务器接收
ws.on('message', (msg) => {
    console.log('收到:', msg);
    // 服务器回复
    ws.send('Hello Client!');
});

连接关闭

javascript 复制代码

// 客户端关闭
ws.close();

// 服务器检测关闭
ws.on('close', () => {
    console.log('连接已关闭');
});

📡 广播机制实现

单播 - 发给特定客户端

javascript 复制代码

ws.send('私人消息');

广播 - 发给所有客户端

javascript 复制代码

function broadcast(message) {
    clients.forEach(client => {
        if (client.readyState === 1) { // 1 = OPEN
            client.send(message);
        }
    });
}

排除广播 - 发给除某人外的所有人

javascript 复制代码

function broadcast(message, excludeWs) {
    clients.forEach(client => {
        if (client !== excludeWs && client.readyState === 1) {
            client.send(message);
        }
    });
}

🔍 连接状态管理

readyState 状态值

javascript 复制代码

const WebSocket = {
    CONNECTING: 0, // 连接中
    OPEN: 1,       // 已连接，可通信 ✅
    CLOSING: 2,    // 关闭中
    CLOSED: 3      // 已关闭
};

连接状态检查

javascript 复制代码

// 检查是否可以发送消息
if (ws.readyState === 1) {
    ws.send('消息');
}

🎯 消息格式处理

文本消息

javascript 复制代码

// 发送简单文本
ws.send('简单消息');

// 发送 JSON 数据
ws.send(JSON.stringify({
    type: 'chat',
    user: '张三',
    message: '你好',
    time: '10:00'
}));

消息类型设计

javascript 复制代码

// 系统消息
{
    type: 'system',
    message: '用户加入聊天室',
    userCount: 5
}

// 聊天消息
{
    type: 'chat', 
    user: '用户名',
    message: '消息内容',
    time: '时间'
}

⚠️ 错误处理机制

基本错误处理

javascript 复制代码

// 服务器端
ws.on('error', (err) => {
    console.error('WebSocket错误:', err);
});

// 客户端
ws.onerror = (error) => {
    console.error('连接错误:', error);
};

💡 最佳实践总结

1. 消息协议设计

使用 JSON 格式统一消息结构
定义清晰的消息类型（type字段）
包含必要的元数据（时间、用户等）

2. 连接管理

及时清理断开连接的客户端
检查 readyState 再发送消息
实现心跳机制保持连接

3. 广播优化

避免广播给发送者自己（排除机制）
过滤非活跃连接
支持分组广播（房间概念）

4. 数据安全

验证消息格式和内容
限制消息长度和频率
敏感信息过滤

🚀 从基础到进阶

已掌握的基础：

✅ WebSocket 连接建立和管理

✅ 双向消息通信

✅ 广播机制实现

✅ 多用户实时聊天

✅ 连接状态监控

✅ 基础错误处理

下一步学习：

🔜 心跳检测和重连机制

🔜 房间/频道系统

🔜 用户认证和权限

🔜 消息持久化存储

🔜 生产环境部署

🔜 性能优化和扩展

你的代码已经涵盖了 WebSocket 最核心的 80% 功能！ 🎉