WebSocket实现浏览器与服务器双向通信教程

WebSocket 是一种独立于 HTTP 的 TCP 协议，通过一次 HTTP 握手升级后建立持久、全双工的通信通道，彻底摆脱传统请求-响应模式，让服务器能主动、低延迟地向浏览器推送数据——这正是实时聊天、协同编辑和动态仪表盘等场景的核心需求；但它的强大也伴随着复杂性：从严格的服务端协议支持、Nginx 反向代理配置，到前端连接管理（手动重连、心跳保活、二进制数据处理）、错误恢复与生命周期兜底，每一步都需精细把控，稍有疏忽就会遭遇握手失败、静默断连或数据乱码；想真正用好 WebSocket，远不止调用 `new WebSocket()` 那么简单。

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));
  }
};

WebSocket 的复杂点不在连接建立，而在连接生命周期管理：重连策略、心跳保活、消息队列缓冲、多 tab 同步、离线缓存。这些几乎每个业务都要重复实现，别指望浏览器 API 自动兜底。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~