17370845950

WebSocket连接必须用new WebSocket()创建，协议限于ws/wss，需等待onopen后发送消息，binaryType需设为arraybuffer处理二进制数据，断线重连需指数退避并限制次数。

WebSocket 连接必须用 new WebSocket() 创建，不能用 fetch 或 XMLHttpRequest

WebSocket 是独立于 HTTP 的全双工协议，浏览器不支持用传统请求方式“发起”连接。你看到的 ws:// 或 wss:// 地址，只能传给 WebSocket 构造函数——其他任何 API 都无法建立真正的 WebSocket 连接。

• fetch('ws://example.com') 会直接报错：TypeError: Invalid URL
• new WebSocket('http://...') 会失败，协议必须是 ws 或 wss
• 连接过程不可取消，没有类似 AbortController 的机制
• 首次握手依赖 HTTP Upgrade，所以服务端必须明确支持 WebSocket 协议（如 Node.js 的 ws、socket.io 或 Nginx 正确配置 Upgrade 头）

监听 onmessage 前必须确保 readyState === 1，否则消息会丢失

WebSocket 初始化后处于 CONNECTING（值为 0），此时调用 send() 会抛出异常，而 onmessage 回调即使已注册，也不会触发——因为连接尚未就绪。很多实时功能失效，根源就是没等连接完成就开始发/收数据。

• 正确做法：在 onopen 回调里开始发送初始化消息或启用 UI 交互
• 错误写法：

  const ws = new WebSocket('wss://api.example.com');
  ws.onmessage = e => console.log(e.data); // ✅ 注册了
  ws.send('hello'); // ❌ 此时 readyState 很可能还是 0，报错


• 安全判断：

  if (ws.readyState === WebSocket.OPEN) {
    ws.send(data);
  } else {
    console.warn('WebSocket not ready, current state:', ws.readyState);
  }

服务端推送的二进制数据默认转成 Blob，需手动设 binaryType = 'arraybuffer'

WebSocket 收到二进制帧（如图片、音频、Protobuf 序列化数据）时，浏览器默认把 event.data 当作 Blob 处理。如果后端发的是 ArrayBuffer，前端却按 Blob 解析，就会卡在 blob.arrayBuffer() 异步流程里，破坏实时性。

• 立即生效的设置：

  const ws = new WebSocket('wss://api.example.com');
  ws.binaryType = 'arraybuffer'; // 必须在 onopen 前或连接建立后立刻设
  ws.onmessage = e => {
    if (e.data instanceof ArrayBuffer) {
      const view = new Uint8Array(e.data);
      console.log('Received raw bytes:', view);
    }
  };

• 不设 binaryType 时，e.data 是 Blob，必须用 e.data.arrayBuffer().then(...)，引入 Promise 延迟
• 该设置对文本消息无影响，string 类型仍正常接收

断线重连不能只靠 onclose，要主动轮询 readyState 并限制重试次数

onclose 只在连接已关闭后触发，但它不区分“服务端主动断开”和“网络闪断”。单纯监听它再 new WebSocket() 重建，容易陷入无限重连循环（比如 DNS 故障、防火墙拦截导致反复失败）。

• 推荐模式：用 setTimeout + 指数退避，在 onclose 和 onerror 中统一触发重连逻辑
• 必须加最大重试次数（如 5 次）和总超时（如 2 分钟），避免耗尽客户端资源
• 每次重连前检查 ws.readyState，跳过重复新建：

  let reconnectCount = 0;
  const MAX_RECONNECT = 5;
  function connect() {
  ws = new WebSocket('wss://api.example.com');
  ws.onopen = () => { reconnectCount = 0; };
  ws.onclose = () => {
  if (reconnectCount < MAX_RECONNECT) {
  reconnectCount++;
  setTimeout(connect, Math.min(1000  Math.pow(2, reconnectCount), 30000));
  }
  };
  ws.onerror = () => { / 同上 */ };
  }

WebSocket 的真实复杂度不在连接本身，而在状态同步、消息去重、心跳保活、序列化协议选型这些环节。别让 onmessage 成为唯一关注点。