表单提交不能直接发到 websocket，需拦截 submit 事件、阻止默认行为、序列化数据并调用 ws.send()；须确保 ws.readystate === websocket.open，推荐 json 格式并带 type 字段，服务端需手动解析。
表单提交不能直接发到 WebSocket
WebSocket 是双向长连接，不支持 HTTP 的 form 默认提交机制。浏览器原生 <form method="POST" action="/xxx"></form> 会触发完整页面请求，根本不会走 WebSocket。想“提交到 WebSocket”，本质是拦截表单默认行为，手动收集数据，再用 ws.send() 发送。
用 JavaScript 拦截表单并发送到 WebSocket
关键步骤：监听 submit 事件 → event.preventDefault() 阻止刷新 → 序列化表单字段 → 调用 ws.send()。注意 WebSocket 必须已连接，否则 send() 会报错 "InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state"。
- 推荐用
new FormData(formElement)提取字段，它自动处理input、select、textarea和文件（但文件需额外转为 Blob 或 base64） - 发送前检查
ws.readyState === WebSocket.OPEN，未连接时可缓存数据或提示用户 - 服务端收到的是纯字符串或 JSON，不是 multipart/form-data；前端通常要
JSON.stringify()后再 send
const ws = new WebSocket("wss://example.com/chat");
const form = document.getElementById("myForm");
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(form));
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
}
});
服务端接收时需自行解析协议格式
WebSocket 不定义应用层语义，你发 JSON，服务端就得按 JSON 解析；你发 key1=value1&key2=value2，服务端就得自己做 query string 解析。没有 Content-Type 头，也没有 body-parser 自动帮你干活。
- 建议统一用 JSON，并在首字段加
type区分操作，比如{"type":"login","username":"a","password":"b"} - 避免直接转发原始
FormData的append()结果（含二进制边界），浏览器FormData的get()只返回字符串值，文件需单独处理 - Node.js 用
ws库时，ws.on("message", (data) => { ... })的data是Buffer或string，需手动toString()再JSON.parse()
文件上传需要额外编码和分块处理
WebSocket 本身支持二进制帧（Blob、ArrayBuffer），但不能像 HTTP 那样带 headers 或自动分段。大文件直传易阻塞通道、无进度反馈、失败难恢复。
- 小文件（
- 大文件应先上传到 HTTP 接口获取 token 或临时 URL，再通过 WebSocket 发送元信息（如
{"type":"file_ready","id":"abc123"}） - 真要用 WebSocket 传二进制，得自己设计分片协议：加序号、校验、重传逻辑，远比用
fetch+FormData复杂
真正需要实时响应的表单（如聊天输入、协作编辑），用 WebSocket 是合理的；但登录、注册、资料提交这类操作，HTTP 仍更简单可靠。别为了“用 WebSocket”而硬套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
