WebSocket 是一种独立的全双工 TCP 协议，与 HTTP 的根本区别在于连接持久化：HTTP 每次请求-响应后断连，WebSocket 建立后长期复用同一通道，无需重复携带 HTTP 头。
WebSocket 是什么？和 HTTP 有什么根本区别？
WebSocket 不是“升级版的 AJAX”，而是一种独立的、全双工的 TCP 连接协议。它一旦建立，客户端和服务端就能随时互相发消息，不需要像 fetch 或 XMLHttpRequest 那样每次通信都带完整 HTTP 头、走请求-响应周期。
关键区别在于连接生命周期：HTTP 连接用完即断；WebSocket 连接维持住，复用同一通道。这也意味着：不能用 curl 直连测试（得用 wscat 或浏览器控制台），也不能靠 Nginx 默认配置直接代理（需显式开启 Upgrade 和 Connection 头转发）。
怎么在浏览器里创建并使用 WebSocket？
前端只需实例化 WebSocket 构造函数，传入 wss:// 或 ws:// 地址。注意：开发时若后端没配 HTTPS，wss:// 会直接失败，此时必须用 ws://localhost:3000 这类明文地址（且确保浏览器允许不安全内容）。
常见操作要点：
立即学习“Java免费学习笔记（深入）”；
-
onopen回调里才能安全调用send()，否则可能报InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state -
onmessage收到的是MessageEvent，真实数据在event.data里——它可能是字符串，也可能是Blob或ArrayBuffer，取决于服务端发的内容类型 - 主动关闭用
close()，不要靠页面卸载自动断连；否则服务端可能长时间收不到close帧，导致连接泄漏
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
ws.send(JSON.stringify({ type: 'join', user: 'alice' }));
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('收到:', data);
};
ws.onerror = (err) => console.error('WebSocket 错误:', err);为什么刚连上就触发 onclose？常见服务端配置坑
前端看到 WebSocket connection to 'ws://...' failed 或连上立刻断开，90% 是服务端没正确处理协议升级。比如用 Node.js 的 http.Server 而非 ws.Server，或 Express 中间件拦截了 Upgrade 请求。
以 ws 库为例，必须让服务器监听 upgrade 事件，并手动完成握手：
- 检查
req.headers.upgrade是否为websocket - 检查
req.headers.connection是否含Upgrade - 调用
socket.write()返回 101 Switching Protocols 响应头 - 之后才能把
socket交给ws实例接管
用现成库如 ws 或 uWebSockets.js 可跳过手写握手，但 Nginx 反向代理时仍要加这两行：
proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";
如何安全地重连？别用 setInterval 硬轮询
网络抖动或服务重启时，WebSocket 断开是常态。但直接在 onclose 里 new WebSocket(...) 会引发雪崩重连（尤其多标签页时）。合理做法是引入退避策略 + 连接状态锁：
- 记录上次连接时间，每次重试前等待
Math.min(1000 * 2 ** 尝试次数, 30000)毫秒 - 设置
isConnecting = true标志，防止onclose触发多次并发重连 - 限制最大重试次数（比如 5 次），之后提示用户“请检查网络”而非无限卡住
- 如果页面切到后台（
document.hidden === true），暂停重连逻辑，避免浪费资源
真正难的不是连上，而是连上后同步状态：服务端可能已推送新消息，而客户端还没来得及绑定 onmessage。所以首次连接成功后，最好主动发个 { type: 'sync' } 请求最新快照。
