WebSocket连接需在onopen中发送首条消息且设binaryType,URL必须为ws/wss协议,HTTPS页禁用ws,wss需有效证书,参数需encodeURIComponent,非标端口不可省略。

直接用 new WebSocket() 就能建立连接,但不处理 readyState 和事件监听,90% 的连接会“看似成功实则发不出消息”。
WebSocket 构造函数的 URL 必须是 ws:// 或 wss://
浏览器强制校验协议头,http:// 或 https:// 会立刻报错:Failed to construct 'WebSocket': The URL's scheme must be either 'ws' or 'wss'。
- 开发时可用
ws://localhost:8080,但仅限本地测试;ws://在 HTTPS 页面中会被 Chrome/Firefox 拦截 - 生产环境必须用
wss://,且证书有效(自签名证书会导致连接失败) - 带参数合法:
wss://api.example.com/ws?token=abc123,但需确保token值已encodeURIComponent() - 非标准端口不能省略:
ws://example.com:3001不能写成ws://example.com
onopen 回调里才能安全调用 send()
new WebSocket() 立即返回对象,但底层握手异步进行,此时 readyState 是 0(CONNECTING),直接 send() 必报 InvalidStateError: Still in CONNECTING state。
- 所有首条消息(如鉴权、上线通知)必须放在
onopen里触发 - 用户点击发送按钮时,也应加守卫:
if (socket.readyState === WebSocket.OPEN) socket.send(...) - 调试可随时在控制台查状态:
socket.readyState——1才真正就绪 - 不要在
onopen外部写socket.send(),哪怕只隔一行代码
onmessage 收到的数据类型由服务端决定
前端不控制 event.data 是字符串还是 Blob,服务端发什么,浏览器就给什么——但你可以提前指定解析方式。
- 服务端发文本(如
ws.send('hello')),event.data默认是string - 服务端发二进制(如
ws.send(buffer, { binary: true })),默认是Blob;想拿ArrayBuffer,需在连接后立刻设:socket.binaryType = 'arraybuffer' - JSON 消息务必
JSON.stringify()后再send(),否则对象会变成[object Object] -
onerror不代表连接失败,它常在onopen前反复触发(DNS 失败、SSL 握手失败等);真正终结靠onclose及其event.code
最容易被忽略的是 binaryType 的初始值和 readyState 的竞争条件:前者决定你拿到的是 Blob 还是 ArrayBuffer,后者决定你第一句话能不能发出去——这两个值在连接生命周期里只变一次,错过就只能等下次重连。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











