当前位置：首页 > AI > 正文内容

WebSocket 实时通信全攻略：从原理到实践

廖万里5小时前AI1

WebSocket 实战教程

"实时通信是现代 Web 应用的核心能力。WebSocket 让浏览器和服务器之间的双向通信变得简单高效。"

一、什么是 WebSocket？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。与传统的 HTTP 请求-响应模式不同，WebSocket 允许服务器主动向客户端推送数据，非常适合实时应用场景。

1.1 WebSocket 与 HTTP 的区别

HTTP 协议：客户端发起请求，服务器响应，一次请求一次响应，无法主动推送。

WebSocket 协议：建立连接后，客户端和服务器都可以随时发送消息，实现双向实时通信。

二、WebSocket 应用场景

即时聊天：微信网页版、在线客服系统
实时数据：股票行情、体育比分直播
协作办公：在线文档、白板协作
在线游戏：多人联机、实时对战

三、WebSocket 基础实战

3.1 创建 WebSocket 连接

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

// 连接成功
ws.onopen = function(event) {
    console.log("WebSocket 连接已建立");
    ws.send("Hello, Server!");
};

// 接收消息
ws.onmessage = function(event) {
    console.log("收到消息:", event.data);
};

// 连接关闭
ws.onclose = function(event) {
    console.log("WebSocket 连接已关闭");
};

3.2 发送和接收消息

// 发送文本消息
ws.send("这是一条文本消息");

// 发送 JSON 数据
const data = {
    type: "chat",
    content: "你好！",
    timestamp: Date.now()
};
ws.send(JSON.stringify(data));

四、Node.js 服务端实现

const WebSocket = require("ws");

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

wss.on("connection", function(ws) {
    console.log("新客户端连接");
    
    ws.on("message", function(message) {
        console.log("收到消息:", message.toString());
        
        // 广播给所有客户端
        wss.clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message.toString());
            }
        });
    });
});

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

五、心跳检测机制

class WebSocketClient {
    constructor(url) {
        this.url = url;
        this.ws = null;
        this.connect();
    }
    
    connect() {
        this.ws = new WebSocket(this.url);
        
        this.ws.onopen = () => {
            console.log("连接成功");
            this.startHeartbeat();
        };
        
        this.ws.onclose = () => {
            this.reconnect();
        };
    }
    
    startHeartbeat() {
        setInterval(() => {
            if (this.ws.readyState === WebSocket.OPEN) {
                this.ws.send("ping");
            }
        }, 30000);
    }
    
    reconnect() {
        setTimeout(() => this.connect(), 5000);
    }
}