WebSocket核心在于解决HTTP单向通信痛点：①为什么用——HTTP一问一答、轮询耗资源，WS实现服务端主动推送；②怎么连——复用HTTP握手，客户端发Upgrade请求，服务端返回101切换协议；③怎么稳——必加心跳（ping/pong）与指数退避重连；④怎么用——send()发text/binary，onmessage收完整消息，大文件优先binary。
直接画核心知识点思维导图，不用堆砌所有细节，重点抓住“为什么用、怎么连、怎么稳、怎么用”四条主线。下面这四个分支就是最实用的骨架，每个都带关键动作和避坑提示。
为什么需要 WebSocket：HTTP 的局限倒逼升级
HTTP 是单向请求-响应，服务端不能主动推数据。轮询浪费资源，长轮询连接反复断开重建，状态难维护。WebSocket 本质是一次握手、持久连接、双向通信——它解决的是“服务端想说话时，有没有那条畅通的电话线”这个问题。画导图时，这里只需标出三个对比点：HTTP（无状态、一问一答）、长轮询（伪推送、连接不持续）、WebSocket（有状态、全双工）。
怎么建立连接：握手过程必须理解
WebSocket 并非凭空而来，它复用 HTTP 协议完成升级。客户端发一个带 Upgrade: websocket 和 Sec-WebSocket-Key 的 GET 请求；服务端校验后返回 101 Switching Protocols，并附上 Sec-WebSocket-Accept 值（是 Key 经固定算法生成的 Base64）。这个过程必须成功，否则连接失败。导图中可简化为三步：客户端发起升级请求 → 服务端验证并响应 101 → 连接切换为 WebSocket 协议。注意：跨域不是协议问题，而是浏览器同源策略限制，需服务端显式允许 Origin。
怎么保持稳定：心跳 + 断线重连是刚需
真实网络中，NAT 超时、代理中断、弱网抖动都会让连接静默断开。仅靠 onclose 事件不够，必须主动探测。常见做法是：客户端定时发 ping 帧（或自定义文本消息如 {"type":"ping"}），服务端收到立刻回 pong（或 {"type":"pong"}）。若连续 N 次未收到响应，则判定断连，触发重连逻辑。重连建议加退避策略（如 1s、2s、4s、8s…），避免雪崩。导图里这一块要突出两个关键词：心跳帧类型（ping/pong 或业务约定） 和 重连机制（带延迟+最大次数）。
怎么收发消息：文本/二进制 + 消息边界意识
WebSocket 支持 text（UTF-8 字符串）和 binary（ArrayBuffer / Blob）两类消息，前端用 ws.send() 发送，ws.onmessage 接收。注意：服务端推送的每一条 onmessage 都是完整帧，但大消息可能被自动分片（fragmented），浏览器会自动拼合，开发者通常无需处理；若手动控制分片（如发送超大文件），就要监听 onmessage 的 event.data 类型并缓存分片。导图此处标清楚：send() 输入类型、onmessage 输出类型、分片透明性（默认合并）、大文件传输建议用 binary。
