📌 第一部分：WebSocket 概览与定位

1.1 定义与全称

WebSocket 是一种在单个 TCP 连接上提供全双工通信的网络协议，由 Ian Hickson 于 2008 年提出，2011 年成为 RFC 6455 标准。WebSocket 允许服务器主动向客户端推送数据，是实现 实时 Web 应用 的核心技术。

1.2 核心定位

WebSocket 的核心定位是 实时的双向通信。它提供了：

• 全双工通信（双向同时传输）
• 持久连接（一次握手，持续通信）
• 低延迟（无需 HTTP 请求头）
• 轻量级消息帧
• 跨域支持（CORS）
• 子协议支持（如 MQTT、STOMP）

1.3 主要应用领域

• 实时聊天： 即时通讯、客服系统
• 在线游戏： 多人对战、实时状态同步
• 直播互动： 弹幕、打赏、实时投票
• 协同编辑： Google Docs、在线白板
• 实时数据： 股票行情、物联网数据
• 通知推送： 系统通知、消息提醒

1.4 知名案例

• Slack： 实时聊天使用 WebSocket
• Discord： 语音和文字实时通信
• Google Docs： 协同编辑使用 WebSocket
• GitHub： 实时通知推送
• 国内： 腾讯、阿里、字节跳动大量使用

---

⚙️ 第二部分：协议原理

2.1 通信流程

1. 握手（Handshake）： 客户端发送 HTTP Upgrade 请求
2. 协议升级： 服务器返回 101 Switching Protocols
3. 数据帧传输： 双向全双工通信
4. 关闭连接： 任意一方发送关闭帧

2.2 握手请求

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

// 服务器响应
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

2.3 数据帧结构

• FIN： 消息结束标志
• Opcode： 帧类型（文本、二进制、关闭、Ping/Pong）
• Mask： 掩码（客户端到服务器必须掩码）
• Payload Length： 消息长度
• Payload Data： 实际数据

---

⚙️ 第三部分：前端与后端实现

3.1 前端 JavaScript 实现

// 创建 WebSocket 连接
const ws = new WebSocket('ws://localhost:8080/chat');

// 连接建立
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 连接已关闭', event.code);
};

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

// 发送消息
ws.send('{"type":"chat","content":"Hello World"}');

// 关闭连接
ws.close();

// 检查连接状态
console.log(ws.readyState); // 0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED

3.2 Node.js 后端实现（ws 库）

// 使用 ws 库
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

// 处理客户端连接
wss.on('connection', function connection(ws, req) {
    console.log('客户端已连接');
    
    // 接收消息
    ws.on('message', function incoming(message) {
        console.log('收到消息: %s', message);
        
        // 广播给所有客户端
        wss.clients.forEach(function each(client) {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
    
    // 发送消息
    ws.send('欢迎连接到 WebSocket 服务器!');
    
    // 连接关闭
    ws.on('close', function() {
        console.log('客户端已断开');
    });
});

// 心跳检测
wss.on('connection', function connection(ws) {
    ws.isAlive = true;
    ws.on('pong', function() {
        ws.isAlive = true;
    });
});

const interval = setInterval(function ping() {
    wss.clients.forEach(function each(ws) {
        if (ws.isAlive === false) {
            return ws.terminate();
        }
        ws.isAlive = false;
        ws.ping();
    });
}, 30000);

3.3 PHP 后端实现（Swoole）

// 使用 Swoole 实现 WebSocket
use Swoole\WebSocket\Server;

$server = new Server('0.0.0.0', 9502);

// 处理连接打开
$server->on('open', function($server, $request) {
    echo "连接建立: {$request->fd}\n";
    $server->push($request->fd, "欢迎来到 WebSocket 服务器!");
});

// 处理接收消息
$server->on('message', function($server, $frame) {
    echo "收到消息: {$frame->data}\n";
    
    // 广播给所有客户端
    foreach ($server->connections as $fd) {
        if ($fd !== $frame->fd) {
            $server->push($fd, $frame->data);
        }
    }
});

// 处理连接关闭
$server->on('close', function($server, $fd) {
    echo "连接关闭: {$fd}\n";
});

$server->start();

3.4 Python 后端实现（websockets 库）

# 使用 websockets 库
import asyncio
import websockets

async def handler(websocket, path):
    async for message in websocket:
        print(f"收到消息: {message}")
        # 广播给所有客户端
        for ws in websockets.clients:
            if ws != websocket:
                await ws.send(message)

async def main():
    async with websockets.serve(handler, "localhost", 8765):
        await asyncio.Future()  # 永久运行

asyncio.run(main())

3.5 Java 后端实现（Spring Boot）

// Spring Boot WebSocket 配置
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
}

// WebSocket 控制器
@Controller
public class WebSocketController {

    @MessageMapping("/chat")
    @SendTo("/topic/messages")
    public String handleMessage(String message) {
        return "收到: " + message;
    }
}

---

⚖️ 第四部分：WebSocket 与其他技术对比

4.1 WebSocket vs HTTP 长轮询

• WebSocket： 持久连接、双向通信、低延迟
• 长轮询： HTTP 请求响应模式、单向、高延迟
• 建议： 实时场景用 WebSocket，简单场景用长轮询

4.2 WebSocket vs SSE（Server-Sent Events）

• WebSocket： 双向通信、支持二进制
• SSE： 单向（服务器到客户端）、HTTP 协议
• 建议： 双向用 WebSocket，单向推送用 SSE

4.3 WebSocket vs WebRTC

• WebSocket： 信令传输、文本/二进制消息
• WebRTC： P2P 音视频、数据通道
• 建议： 文本消息用 WebSocket，音视频用 WebRTC

4.4 WebSocket vs MQTT

• WebSocket： Web 实时通信、通用
• MQTT： IoT 场景、轻量级、发布/订阅
• 建议： Web 应用用 WebSocket，IoT 用 MQTT

---

🧠 第五部分：学习建议

推荐学习资源

• MDN WebSocket 文档： MDN WebSocket API
• RFC 6455： WebSocket 协议规范
• ws 库： Node.js WebSocket 实现
• Swoole 文档： PHP WebSocket 实现

---

🎯 总结升华