HTML中使用WebSocket发送数据的方法详解

本文深入解析了HTML中WebSocket.send()方法的正确使用方式，涵盖可发送的数据类型（DOMString、ArrayBuffer、Blob、TypedArray）、常见误用陷阱（如直接发送对象、undefined或null导致报错或静默失败）、JSON序列化的关键要点（避免重复编码、统一封装结构）、二进制数据的高效构造与传输策略（TextEncoder、arrayBuffer()及Uint8Array的合理选用），以及发送失败的核心原因排查（连接状态校验、onopen时机、网络中间件配置、DevTools帧验证），强调send本身简单，真正难点在于精准的状态管理、严谨的类型处理和跨环境兼容性保障。

WebSocket.send() 能发什么类型的数据

send() 方法接受 DOMString、ArrayBuffer、Blob 或 TypedArray（如 Uint8Array）。不能直接传普通对象或 JSON.stringify() 以外的字符串化结果——比如传 {a:1} 会报 TypeError: Failed to execute 'send' on 'WebSocket': InvalidStateError，因为对象不是合法类型。

常见错误是误以为能直接 send 对象，实际必须先序列化；也有人传 undefined 或 null，这会导致静默失败或连接关闭。

• 文本数据：用 string 或 JSON.stringify(obj)
• 二进制数据：优先用 ArrayBuffer 或 Uint8Array，避免用 Blob（需额外 blob.arrayBuffer()，增加异步开销）
• 发送前务必检查 ws.readyState === WebSocket.OPEN，否则 send() 会抛错

发送 JSON 文本时要不要手动加双引号或换行

不需要。只要传的是合法 string，服务端收到的就是原始字节流，不带额外包装。比如 ws.send('{"id":42}') 和 ws.send(JSON.stringify({id:42})) 效果完全一样。

容易踩的坑是重复序列化：ws.send(JSON.stringify(JSON.stringify(obj)))，导致服务端收到的是带转义的字符串，比如 "{\"id\":42}"，解析时报错 Unexpected token \ in JSON。

• 确保只调用一次 JSON.stringify()
• 如果后端要求固定字段（如 {"type":"msg","data":...}），建议封装成函数统一处理，避免每次手写
• 调试时可在控制台打印 typeof data 和 data.constructor.name 确认类型

发送 ArrayBuffer 和 Uint8Array 的区别与选择

两者都可发二进制，但语义不同：ArrayBuffer 是内存块容器，Uint8Array 是视图。调用 ws.send(buf) 时，浏览器内部会按 ArrayBuffer 处理；传 Uint8Array 会自动取其 .buffer。

性能上没实质差异，但 Uint8Array 更常用，尤其配合 TextEncoder 或 fetch().arrayBuffer() 使用。注意别传错引用：修改原 Uint8Array 内容后又发它，可能发出去的是已改数据（因共享底层 buffer）。

• 构造二进制消息推荐：new TextEncoder().encode("hello") → 得到 Uint8Array
• 从图片等资源读取：await file.arrayBuffer() → 直接得 ArrayBuffer
• 避免：ws.send(new Uint8Array([1,2,3]).buffer.slice(0,2)) —— slice() 返回新 ArrayBuffer，但内容可能被截断或对齐异常

为什么 send 后服务端收不到，或者收到空数据

最常见原因是连接未就绪就发数据。WebSocket 建立是异步的，new WebSocket(url) 后立即 send()，大概率触发 InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state。

另一个隐蔽问题是跨域或代理拦截：某些 Nginx 配置未透传 Upgrade 请求头，导致连接降级为 HTTP，此时 send() 看似成功，实则发到了错误 endpoint，服务端根本没收到。

• 必须在 ws.onopen = () => { ws.send(...) } 或 ws.addEventListener('open', ...) 中发首条消息
• 发完可监听 ws.onerror 和 ws.onclose，检查 event.code（如 1006 表示连接异常中断）
• 用浏览器 DevTools 的 Network → WS → Frames 标签，确认 Frames 列表里真有你发的那条记录，且 Type 是 text 或 binary

WebSocket 的 send() 行为本身很直白，真正复杂的是状态管理、类型转换时机和网络中间件的兼容性。尤其是二进制场景下，buffer 生命周期、视图偏移、编码一致性，稍不注意就会在某个浏览器或某次部署后突然出问题。

好了，本文到此结束，带大家了解了《HTML中使用WebSocket发送数据的方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！