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。

立即学习“Java免费学习笔记（深入）”；

常见错误现象：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 自动兜底。