当前位置：首页 > 学习笔记 > 正文内容

WebSocket 实时通信技术完全指南：从入门到实战

廖万里4小时前学习笔记0

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它让实时数据推送变得简单高效。从在线聊天到协作编辑，从股票行情到游戏同步，WebSocket 正在重塑现代 Web 应用的交互方式。

一、核心概念

传统的 HTTP 请求-响应模式在处理实时通信时存在明显的局限性：客户端必须不断发起请求才能获取最新数据，这种方式不仅浪费带宽，还增加了服务器负担。WebSocket 的出现彻底改变了这一局面。

WebSocket 的核心特性：

  • 全双工通信：客户端和服务器可以同时发送和接收数据，无需等待对方完成
  • 持久连接：一次握手后保持长连接，避免了频繁建立连接的开销
  • 低延迟：数据帧头仅 2-10 字节，传输效率远高于 HTTP
  • 跨域支持：通过 CORS 机制支持跨域连接

WebSocket 连接的建立过程分为两个阶段：

  1. 握手阶段：客户端发送 HTTP Upgrade 请求，服务器返回 101 Switching Protocols
  2. 数据传输阶段：双方通过 WebSocket 协议自由收发消息

握手请求的关键头部：

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

服务器响应示例：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

二、核心内容

2.1 WebSocket API 详解

浏览器提供的 WebSocket API 简洁而强大。创建连接只需要一行代码：

// 创建 WebSocket 连接
const ws = new WebSocket("wss://example.com/chat");

// 连接建立时的回调
ws.onopen = function(event) {
    console.log("WebSocket 连接已建立");
    // 发送初始消息
    ws.send("Hello, Server!");
};

// 接收消息的回调
ws.onmessage = function(event) {
    console.log("收到消息:", event.data);
    
    // 处理不同类型的数据
    if (typeof event.data === "string") {
        // 文本消息
        processTextMessage(event.data);
    } else if (event.data instanceof Blob) {
        // 二进制数据
        processBinaryData(event.data);
    }
};

// 连接关闭的回调
ws.onclose = function(event) {
    console.log("连接已关闭:", event.code, event.reason);
    
    // 非正常关闭时尝试重连
    if (event.code !== 1000) {
        setTimeout(reconnect, 3000);
    }
};

// 错误处理
ws.onerror = function(error) {
    console.error("WebSocket 错误:", error);
};

WebSocket 对象的 readyState 属性反映了连接状态：

// 连接状态常量
WebSocket.CONNECTING    // 0 - 正在连接
WebSocket.OPEN          // 1 - 连接已建立
WebSocket.CLOSING       // 2 - 正在关闭
WebSocket.CLOSED        // 3 - 已关闭

// 检查连接状态
if (ws.readyState === WebSocket.OPEN) {
    ws.send("可以安全发送数据");
}

2.2 服务器端实现

以 Node.js 为例，使用 ws 库构建 WebSocket 服务器：

const WebSocket = require("ws");

// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });

// 存储所有连接的客户端
const clients = new Set();

wss.on("connection", (ws, req) => {
    // 获取客户端 IP
    const clientIp = req.socket.remoteAddress;
    console.log("新客户端连接:", clientIp);
    
    // 添加到客户端集合
    clients.add(ws);
    
    // 监听消息
    ws.on("message", (data) => {
        console.log("收到消息:", data.toString());
        
        // 广播给所有客户端
        broadcast(data, ws);
    });
    
    // 监听关闭
    ws.on("close", () => {
        clients.delete(ws);
        console.log("客户端已断开");
    });
    
    // 发送欢迎消息
    ws.send("欢迎连接 WebSocket 服务器");
});

// 广播函数
function broadcast(message, sender) {
    clients.forEach((client) => {
        if (client !== sender && client.readyState === WebSocket.OPEN) {
            client.send(message);
        }
    });
}

console.log("WebSocket 服务器运行在 ws://localhost:8080");

2.3 心跳机制

长连接需要心跳检测来保持活跃和发现断线。WebSocket 协议定义了 Ping/Pong 帧用于此目的：

class HeartbeatWebSocket {
    constructor(url) {
        this.url = url;
        this.ws = null;
        this.heartbeatInterval = null;
        this.missedHeartbeats = 0;
        this.maxMissedHeartbeats = 3;
        this.reconnect();
    }
    
    reconnect() {
        this.ws = new WebSocket(this.url);
        
        this.ws.onopen = () => {
            console.log("连接成功，启动心跳");
            this.missedHeartbeats = 0;
            this.startHeartbeat();
        };
        
        this.ws.onmessage = (event) => {
            // 处理 Pong 响应
            if (event.data === "pong") {
                this.missedHeartbeats = 0;
                return;
            }
            // 处理业务消息
            this.handleMessage(event.data);
        };
        
        this.ws.onclose = () => {
            this.stopHeartbeat();
            // 自动重连
            setTimeout(() => this.reconnect(), 5000);
        };
    }
    
    startHeartbeat() {
        this.heartbeatInterval = setInterval(() => {
            if (this.ws.readyState === WebSocket.OPEN) {
                this.missedHeartbeats++;
                
                if (this.missedHeartbeats >= this.maxMissedHeartbeats) {
                    console.log("心跳超时，重新连接");
                    this.ws.close();
                    return;
                }
                
                // 发送 Ping
                this.ws.send("ping");
            }
        }, 30000); // 每 30 秒发送一次
    }
    
    stopHeartbeat() {
        if (this.heartbeatInterval) {
            clearInterval(this.heartbeatInterval);
            this.heartbeatInterval = null;
        }
    }
    
    handleMessage(data) {
        // 子类实现具体消息处理
        console.log("收到消息:", data);
    }
}

2.4 消息协议设计

在实际应用中，我们需要定义清晰的消息格式。推荐使用 JSON 格式：

// 消息类型定义
const MessageType = {
    CHAT: "chat",           // 聊天消息
    SYSTEM: "system",       // 系统消息
    NOTIFICATION: "notification", // 通知
    COMMAND: "command",     // 命令
    ACK: "ack"             // 确认应答
};

// 创建消息
function createMessage(type, payload, options = {}) {
    return JSON.stringify({
        type: type,
        payload: payload,
        timestamp: Date.now(),
        id: options.id || generateMessageId(),
        ...options
    });
}

// 解析消息
function parseMessage(data) {
    try {
        const message = JSON.parse(data);
        
        // 验证消息格式
        if (!message.type || !message.timestamp) {
            throw new Error("无效的消息格式");
        }
        
        return message;
    } catch (error) {
        console.error("消息解析失败:", error);
        return null;
    }
}

// 消息路由
class MessageRouter {
    constructor() {
        this.handlers = new Map();
    }
    
    // 注册消息处理器
    on(type, handler) {
        if (!this.handlers.has(type)) {
            this.handlers.set(type, []);
        }
        this.handlers.get(type).push(handler);
    }
    
    // 处理消息
    handle(message) {
        const handlers = this.handlers.get(message.type);
        if (handlers) {
            handlers.forEach(handler => handler(message));
        }
    }
}

// 使用示例
const router = new MessageRouter();

router.on(MessageType.CHAT, (message) => {
    displayChatMessage(message.payload);
});

router.on(MessageType.NOTIFICATION, (message) => {
    showNotification(message.payload);
});

三、实战案例

案例一：实时聊天应用

构建一个完整的实时聊天室，支持多人在线、消息广播和历史记录：

// 服务器端 - chat-server.js
const WebSocket = require("ws");
const http = require("http");

const server = http.createServer();
const wss = new WebSocket.Server({ server });

// 聊天室管理
const chatRooms = new Map();

class ChatRoom {
    constructor(name) {
        this.name = name;
        this.members = new Map();
        this.history = [];
        this.maxHistory = 100;
    }
    
    join(userId, ws, username) {
        this.members.set(userId, { ws, username });
        this.broadcast({
            type: "system",
            content: `${username} 加入了聊天室`
        }, userId);
        
        // 发送历史消息
        this.history.forEach(msg => {
            ws.send(JSON.stringify(msg));
        });
    }
    
    leave(userId) {
        const member = this.members.get(userId);
        if (member) {
            this.members.delete(userId);
            this.broadcast({
                type: "system",
                content: `${member.username} 离开了聊天室`
            });
        }
    }
    
    broadcast(message, excludeUserId = null) {
        const messageStr = JSON.stringify(message);
        
        // 保存到历史
        if (message.type === "chat") {
            this.history.push(message);
            if (this.history.length > this.maxHistory) {
                this.history.shift();
            }
        }
        
        this.members.forEach((member, userId) => {
            if (userId !== excludeUserId && member.ws.readyState === WebSocket.OPEN) {
                member.ws.send(messageStr);
            }
        });
    }
}

wss.on("connection", (ws, req) => {
    let currentUser = null;
    let currentRoom = null;
    
    ws.on("message", (data) => {
        const msg = JSON.parse(data);
        
        switch (msg.type) {
            case "join":
                // 加入聊天室
                if (!chatRooms.has(msg.room)) {
                    chatRooms.set(msg.room, new ChatRoom(msg.room));
                }
                currentRoom = chatRooms.get(msg.room);
                currentUser = msg.userId;
                currentRoom.join(msg.userId, ws, msg.username);
                break;
                
            case "chat":
                // 发送聊天消息
                if (currentRoom) {
                    currentRoom.broadcast({
                        type: "chat",
                        userId: currentUser,
                        content: msg.content,
                        timestamp: Date.now()
                    });
                }
                break;
        }
    });
    
    ws.on("close", () => {
        if (currentRoom && currentUser) {
            currentRoom.leave(currentUser);
        }
    });
});

server.listen(8080, () => {
    console.log("聊天服务器运行在 ws://localhost:8080");
});

案例二：协作编辑器

实现多人实时协作编辑，使用操作转换（OT）算法处理并发冲突：

// 协作编辑核心逻辑
class CollaborativeEditor {
    constructor() {
        this.document = "";
        this.operations = [];
        this.clients = new Map();
    }
    
    // 应用操作
    applyOperation(clientId, operation) {
        // 转换操作以处理冲突
        const transformedOp = this.transformOperation(operation, clientId);
        
        // 应用到文档
        this.document = this.applyToDocument(this.document, transformedOp);
        
        // 记录操作
        this.operations.push({
            ...transformedOp,
            clientId,
            timestamp: Date.now()
        });
        
        // 广播给其他客户端
        this.broadcastOperation(transformedOp, clientId);
    }
    
    // 操作转换
    transformOperation(operation, clientId) {
        let transformed = { ...operation };
        
        // 获取该客户端已知的最后操作索引
        const lastKnownIndex = this.clients.get(clientId)?.lastOpIndex || 0;
        
        // 对后续操作进行转换
        for (let i = lastKnownIndex; i < this.operations.length; i++) {
            transformed = this.transformAgainst(transformed, this.operations[i]);
        }
        
        return transformed;
    }
    
    // 转换冲突的操作
    transformAgainst(op1, op2) {
        if (op1.type === "insert" && op2.type === "insert") {
            if (op1.position <= op2.position) {
                return op1;
            }
            return {
                ...op1,
                position: op1.position + op2.text.length
            };
        }
        // 处理删除操作...
        return op1;
    }
    
    // 广播操作
    broadcastOperation(operation, excludeClientId) {
        const message = JSON.stringify({
            type: "operation",
            operation
        });
        
        this.clients.forEach((client, id) => {
            if (id !== excludeClientId && client.ws.readyState === WebSocket.OPEN) {
                client.ws.send(message);
            }
        });
    }
}

案例三：实时数据监控面板

构建服务器性能监控仪表板，实时展示 CPU、内存等指标：

// 服务器端 - 监控数据推送
const WebSocket = require("ws");
const os = require("os");

const wss = new WebSocket.Server({ port: 8080 });

// 采集系统指标
function collectMetrics() {
    return {
        cpu: os.loadavg(),
        memory: {
            total: os.totalmem(),
            free: os.freemem(),
            used: process.memoryUsage()
        },
        uptime: os.uptime(),
        timestamp: Date.now()
    };
}

// 定时推送监控数据
wss.on("connection", (ws) => {
    // 立即发送当前数据
    ws.send(JSON.stringify({
        type: "metrics",
        data: collectMetrics()
    }));
    
    // 定时推送
    const interval = setInterval(() => {
        if (ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({
                type: "metrics",
                data: collectMetrics()
            }));
        }
    }, 1000);
    
    ws.on("close", () => {
        clearInterval(interval);
    });
});

// 客户端 - 数据可视化
class MetricsDashboard {
    constructor(wsUrl) {
        this.ws = new WebSocket(wsUrl);
        this.charts = {};
        this.initCharts();
        
        this.ws.onmessage = (event) => {
            const message = JSON.parse(event.data);
            if (message.type === "metrics") {
                this.updateCharts(message.data);
            }
        };
    }
    
    initCharts() {
        // 初始化图表（使用 Chart.js 或其他库）
        this.charts.cpu = createLineChart("cpu-chart");
        this.charts.memory = createLineChart("memory-chart");
    }
    
    updateCharts(metrics) {
        // 更新 CPU 图表
        this.charts.cpu.addDataPoint(metrics.timestamp, metrics.cpu[0]);
        
        // 更新内存图表
        const memoryPercent = (1 - metrics.memory.free / metrics.memory.total) * 100;
        this.charts.memory.addDataPoint(metrics.timestamp, memoryPercent);
    }
}

四、性能优化与最佳实践

4.1 连接管理

大规模应用需要有效管理大量 WebSocket 连接：

// 连接池管理
class ConnectionPool {
    constructor(maxConnections = 10000) {
        this.connections = new Map();
        this.maxConnections = maxConnections;
    }
    
    add(id, ws) {
        if (this.connections.size >= this.maxConnections) {
            // 移除最旧的连接
            const oldestId = this.connections.keys().next().value;
            this.remove(oldestId);
        }
        
        this.connections.set(id, {
            ws,
            createdAt: Date.now(),
            lastActivity: Date.now()
        });
    }
    
    remove(id) {
        const conn = this.connections.get(id);
        if (conn && conn.ws.readyState === WebSocket.OPEN) {
            conn.ws.close();
        }
        this.connections.delete(id);
    }
    
    // 清理超时连接
    cleanup(timeout = 300000) {
        const now = Date.now();
        this.connections.forEach((conn, id) => {
            if (now - conn.lastActivity > timeout) {
                this.remove(id);
            }
        });
    }
}

4.2 安全性考虑

WebSocket 安全最佳实践：

// 服务器端安全配置
const WebSocket = require("ws");
const jwt = require("jsonwebtoken");

const wss = new WebSocket.Server({
    port: 8080,
    // 只允许来自特定源的连接
    verifyClient: (info, callback) => {
        const token = new URL(info.req.url, "http://example.com").searchParams.get("token");
        
        try {
            const decoded = jwt.verify(token, process.env.JWT_SECRET);
            info.req.user = decoded;
            callback(true);
        } catch (error) {
            callback(false, 401, "Unauthorized");
        }
    }
});

wss.on("connection", (ws, req) => {
    // 从验证后的请求中获取用户信息
    const user = req.user;
    
    // 限流
    const rateLimiter = new RateLimiter(100, 60000); // 每分钟 100 条消息
    
    ws.on("message", (data) => {
        if (!rateLimiter.check(user.id)) {
            ws.send(JSON.stringify({
                type: "error",
                message: "消息发送过于频繁"
            }));
            return;
        }
        
        // 处理消息...
    });
});

总结

WebSocket 技术为现代 Web 应用提供了强大的实时通信能力。通过本文的学习，我们掌握了以下核心要点：

技术优势：

  • 全双工通信，实时性更强
  • 持久连接，减少网络开销
  • 轻量协议，传输效率更高

实现要点：

  • 理解握手过程和连接生命周期
  • 设计合理的消息协议和路由机制
  • 实现健壮的心跳检测和重连策略
  • 做好连接管理和安全防护

应用场景：

  • 实时聊天和协作编辑
  • 数据监控和推送通知
  • 在线游戏和实时交互

WebSocket 技术已经非常成熟，各大浏览器和服务器框架都提供了良好支持。在实际项目中，需要根据业务需求选择合适的技术方案，同时关注性能优化和安全防护。掌握 WebSocket，让你的应用拥有真正的实时能力！

本文链接：https://www.kkkliao.cn/?id=910 转载需授权！

分享到：

版权声明：本文由廖万里的博客发布，如需转载请注明出处。


返回列表

上一篇：Docker 容器化技术完全指南：从入门到实战

下一篇：RabbitMQ 消息队列实战完全指南：从入门到精通

“WebSocket 实时通信技术完全指南：从入门到实战” 的相关文章

如何配置mybatis并且自动生成实体类pojo和mapper3年前 (2022-11-04)
Spring框架提供的多种属性注入方式3年前 (2022-11-09)
Python如何实现多线程，多线程概述3年前 (2023-05-31)
如何将 Kali Linux 写入到U盘1年前 (2025-02-25)
万策易支付- 专业的USDT支付系统1年前 (2025-03-08)
Cursor AI 编程助手完整教程 - 让 AI 帮你写代码2天前

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

© 2022-2026 天桥区万策云网络工作室及济南高新区万策网络工作室提供技术支持
鲁公网安备 37010502001945号
 鲁ICP备2026009861号-1

Powered By Z-BlogPHP. Theme by TOYEAN.