WebSocket介绍 - 技术栈

WebSocket 是一种网络通信协议，它在单个 TCP 连接上提供全双工（full-duplex）通信信道。与传统的 HTTP 请求 - 响应模式不同，WebSocket 允许服务器和客户端在连接建立后随时互相发送数据，非常适合需要实时交互的应用场景（如在线聊天、实时游戏、股票行情推送、协同编辑等）。

以下是 WebSocket 的核心特点和工作机制：

1. 核心特点

持久连接：一旦握手成功，连接会一直保持打开状态，直到某一方主动关闭。
双向通信：服务器可以主动向客户端推送数据，无需客户端先发起请求。
低延迟：避免了 HTTP 轮询（Polling）或长轮询（Long Polling）带来的额外头部开销和延迟。
轻量级帧：数据传输使用轻量级的二进制或文本帧，头部开销极小（通常只有 2-14 字节）。

2. 工作原理

WebSocket 的通信过程主要分为两个阶段：

A. 握手阶段 (Handshake)

客户端通过 HTTP 协议发起一个特殊的升级请求，服务器如果支持 WebSocket，会返回一个状态码为 101 Switching Protocols 的响应，从而将协议从 HTTP 升级为 WebSocket。

客户端请求示例：

http

编辑

复制代码

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

服务器响应示例：

http

编辑

复制代码

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

B. 数据传输阶段

握手完成后，TCP 连接保持不变，双方可以通过这个连接随时发送数据帧（Frame）。数据可以是文本（Text）或二进制（Binary）。

3. 前端使用示例 (JavaScript)

在现代浏览器中，可以使用原生的 WebSocket API：

javascript

编辑

复制代码

// 1. 创建连接
const socket = new WebSocket('ws://example.com/socket');

// 2. 监听连接打开事件
socket.addEventListener('open', function (event) {
    console.log('连接已建立');
    // 发送数据
    socket.send('Hello Server!');
});

// 3. 监听接收消息事件
socket.addEventListener('message', function (event) {
    console.log('收到消息:', event.data);
});

// 4. 监听错误事件
socket.addEventListener('error', function (event) {
    console.error('发生错误:', event);
});

// 5. 监听连接关闭事件
socket.addEventListener('close', function (event) {
    console.log('连接已关闭');
});

4. 常见应用场景

即时通讯 (IM)：微信、Slack 等聊天软件的网页版。
实时数据监控：股票交易大屏、服务器性能监控仪表盘。
在线协作：Google Docs、Figma 等多人同时编辑工具。
multiplayer 在线游戏：需要极低延迟的状态同步。
直播弹幕：高并发下的实时消息推送。

5. 与 HTTP/2 和 SSE 的区别

vs HTTP/2 Server Push: HTTP/2 主要是服务器推送资源，且仍是请求 - 响应模型的优化；WebSocket 是完全独立的双向协议。
vs SSE (Server-Sent Events) : SSE 仅支持单向通信（服务器 -> 客户端），基于 HTTP 长连接，实现简单，适合新闻推送等场景；WebSocket 支持双向，功能更强大但实现稍复杂。