17370845950

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 这类明文地址（且确保浏览器允许不安全内容）。

常见操作要点：

• 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' } 请求最新快照。