怎么用javascript操作websocket_javascript如何实现实时通信_网络技术

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 成为唯一关注点。

# javascript # java # js # 前端 # node.js # node # nginx # 防火墙 # 浏览器 # websocket

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】