掌握WebSocket应按“能连上→能收发→能稳住→能用好”路径推进：先用Node.js+ws库与原生API实现最简连接和消息收发；再理解HTTP升级握手及wss原理；接着添加重连、心跳、错误隔离等健壮性机制；最后结合框架封装并落地业务场景。
掌握 WebSocket 通信不需要从协议 RFC 开始啃，而是按“能连上 → 能收发 → 能稳住 → 能用好”的路径推进。核心是边理解握手本质，边写真实可运行的代码，避免陷入纯理论空转。
一、先跑通最简连接和消息收发
这是入门第一关，目标是让浏览器控制台打出 Connected 和收到的任意一条消息。
- 服务端用 Node.js +
ws库（轻量、无额外抽象），几行代码就能启一个回显服务器 - 前端直接用原生
WebSocket构造函数，注意协议前缀：ws://（开发）或wss://（上线） - 必须监听
open、message、error、close四个基础事件，缺一不可——很多初学者卡在没监听open就急着send，结果报错 - 发送文本用
ws.send('hello')；接收时event.data是字符串或Blob，JSON 数据需手动JSON.parse
二、理解握手过程和跨域/协议切换逻辑
WebSocket 不是凭空出现的新协议，它借了 HTTP 的“壳”完成启动。搞懂这个，才能避开常见报错。
- 客户端发起的是一个带
Upgrade: websocket和Sec-WebSocket-Key的 HTTP 请求 - 服务端响应必须是
HTTP/1.1 101 Switching Protocols，并携带计算出的Sec-WebSocket-Accept - 浏览器开发者工具的 Network 面板里能看到这个握手请求（Filter 输入
ws可过滤），状态码为 101 即成功 -
wss不是“加密的 WebSocket”，而是指走 TLS 的 WebSocket，等同于 HTTPS 之于 HTTP；生产环境必须用wss，否则现代浏览器会拦截
三、补上健壮性：重连、心跳、错误隔离
能连通只是开始，真实项目里网络抖动、服务重启、NAT 超时都会断连。熟练者和新手的关键分水岭就在这里。
- 手动实现重连：记录尝试次数、指数退避延迟（如 1s → 2s → 4s），并在
onclose中触发，而非依赖库自动机制 - 心跳保活：客户端定时发
ping帧（或自定义{type:'ping'}消息），服务端响应pong或回传ack；超时未响应则主动断开重连 - 不要把所有业务逻辑塞进同一个 WebSocket 实例；不同模块（如聊天、通知、状态同步）建议用不同子协议（
new WebSocket(url, ['chat'])）或消息类型字段隔离
四、进阶落地：结合框架与业务场景
脱离玩具项目，进入真实协作系统时，需要结构化组织和可观测能力。
- 前端可封装
WebSocketClient类：统一管理连接状态、消息序列化/反序列化、事件总线式分发（如on('user:joined', handler)） - 后端选型明确区分需求：
ws库适合高性能轻量场景；Socket.IO提供房间、广播、自动重连等开箱功能，但协议不标准 - 典型业务模式要动手写一遍：在线客服的消息路由（用户→坐席）、协作文档的 OT 操作广播、行情推送的订阅/取消订阅模型
- 上线前必查：Nginx 是否配置了
proxy_set_header Upgrade $http_upgrade和proxy_set_header Connection "upgrade"，否则握手失败
