WebSocket 入门实战：从握手到双向实时通信

聊天、看行情、多人改同一份文档，都需要服务器主动把新数据推给浏览器。传统 HTTP 是请求—响应模式，浏览器不问，服务器就不答，只能反复轮询。WebSocket 正是为此而生：一次握手建立连接后，双方可以随时双向收发消息。

一、WebSocket 是什么

WebSocket 是建立在单个 TCP 连接上的全双工通信协议。它与 HTTP 合作：先由 HTTP 发起握手，升级成功后把连接交给 WebSocket。连接一旦建立，双方都可以随时发送消息，不用等对方先开口。

二、握手过程分三步

第一步，浏览器发带 Upgrade 头的 HTTP 请求，请求升级连接，并带上随机生成的 Sec-WebSocket-Key。第二步，服务器校验后返回 101 状态码，并把 Key 加一段固定字符串做哈希，放到 Sec-WebSocket-Accept 头里返回。第三步，浏览器核对无误，连接正式建立。

三、浏览器端最小示例

下面几行就是核心用法：创建连接、打开后发送、收到消息后处理。发送前先判断 readyState 是否为 OPEN。

const ws = new WebSocket("wss://服务器地址/chat");
ws.onopen = () => ws.send("你好");
ws.onmessage = (e) => console.log("收到：", e.data);

四、心跳与断线重连

长连接最怕静默断开。常见做法是客户端每 30 秒发一个心跳，服务端回 pong，连续两次收不到回应就认为连接已死。断线后用指数退避重连：第一次等 1 秒，第二次 2 秒，第三次 4 秒。重连后把断线期间没发出的消息按顺序补发。

五、落地时容易踩的三个坑

第一，代理和 Nginx 默认不转发 Upgrade 头，需要显式配置，否则握手会失败。第二，鉴权放在握手阶段完成。第三，大消息会被拆成多个帧，接收端要按顺序拼好再处理；还要区分文本帧和二进制帧。

六、小结

核心就三句话：用 HTTP 握手升级连接，用帧在一条连接上双向传消息，用心跳和重连保证连接可用。先跑通一收一发，再补上心跳与重连，实时功能就成型了。