javascript的websocket如何使用_它如何实现浏览器与服务器的双向通信【教程】_技术教程

WebSocket 是独立于 HTTP 的 TCP 协议，通过 HTTP 握手升级后实现双向实时通信；与 HTTP 的请求-响应模型不同，它支持服务器主动推送，适用于聊天、协作编辑等低延迟场景。

WebSocket 是什么，和 HTTP 有什么根本区别

WebSocket 不是 HTTP 的升级版，而是一个独立的 TCP 协议通道。它在建立连接时用一次 HTTP 握手（Upgrade: websocket），之后就完全脱离 HTTP 栈，不再有请求-响应模型。这意味着服务器能主动推数据给浏览器，不用轮询或 SSE 那种“伪实时”方式。

关键判断：如果你需要低延迟、高频率、双向自由通信（比如聊天、协作编辑、实时仪表盘），WebSocket 是合理选择；如果只是偶尔拉一次状态，用 fetch 更轻量。

如何创建并维持一个可用的 WebSocket 连接

浏览器端用 new WebSocket(url) 即可发起连接，但真正可用要处理好三个环节：连接建立、消息收发、异常恢复。

url 必须以 ws:// 或 wss:// 开头，不能是 http:// —— 否则直接抛 SecurityError
连接成功后触发 onopen，此时才能调用 send()；在此之前调用会静默失败
断线后 onclose 触发，但 readyState 变为 CLOSED，不会自动重连 —— 必须手动实现重试逻辑
建议加心跳：每 30 秒发一次 ping 消息（服务端需响应 pong），避免 NAT 超时断连

const ws = new WebSocket('wss://api.example.com/ws');

ws.onopen = () => {
  console.log('已连接');
  ws.send(JSON.stringify({ type: 'auth', token: 'xxx' }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('收到:', data);
};

ws.onerror = (err) => {
  console.error('WebSocket 错误:', err);
};

ws.onclose = () => {
  console.log('连接关闭，5秒后重连');
  setTimeout(() => {
    // 实际项目中应限制重试次数 + 指数退避
    location.reload(); // 简化示例
  }, 5000);
};

服务端必须支持 WebSocket 协议，不是所有后端都开箱即用

Node.js 的 http 模块本身不支持 WebSocket，必须用专门库（如 ws、socket.io）；Python 的 Flask 或 Django 默认也不支持，得配 gevent-websocket 或 django-channels。

常见错误现象：WebSocket connection to 'wss://...' failed: Error during WebSocket handshake: Unexpected response code: 404 —— 大概率是服务端没监听该路径，或反向代理（Nginx）没透传 Upgrade 头。

Nginx 配置必须包含：proxy_http_version 1.1;、proxy_set_header Upgrade $http_upgrade;、proxy_set_header Connection "upgrade";
服务端路由路径（如 /ws）必须和前端 WebSocket 构造函数里的路径严格一致
若用 socket.io，前端必须用 socket.io-client，不能直接用原生 WebSocket —— 它们协议不兼容

发送与接收二进制数据时容易忽略的细节

WebSocket 原生支持 ArrayBuffer 和 Blob，但默认 event.data 是字符串。想传图片、音频或 protobuf，必须显式设置 binaryType。

发送前：用 ws.binaryType = 'arraybuffer' 或 'blob'，否则 send() 会尝试把二进制转成字符串，导致乱码
接收时：即使设置了 binaryType，event.data 类型仍取决于服务端发的是什么 —— 服务端发 ArrayBuffer，前端才收到 ArrayBuffer
大文件分片传输需自行设计协议（如加 chunk_id、total_chunks 字段），WebSocket 层不保证消息边界

ws.binaryType = 'arraybuffer';

ws.onmessage = (event) => {
  if (event.data instanceof ArrayBuffer) {
    const view = new Uint8Array(event.data);
    console.log('收到二进制数据:', view.slice(0, 10));
  }
};