WebSocket是独立于HTTP的全双工TCP协议,仅握手阶段借用HTTP Upgrade头,后续通信脱离HTTP请求/响应模型,需专用API、服务端支持及手动重连。

WebSocket 是什么,和 HTTP 有什么根本区别?
WebSocket 不是 HTTP 的升级版,也不是“带长连接的 AJAX”。它是一个独立的、基于 TCP 的全双工通信协议,握手阶段借用了 HTTP(用 Upgrade: websocket 头),但一旦连接建立,后续数据就完全脱离 HTTP 格式,不再有请求/响应模型,客户端和服务端可以随时互发消息。
这意味着:
– 你不能用 fetch() 或 XMLHttpRequest 模拟 WebSocket 行为;
– 服务端必须明确支持 WebSocket 协议(比如 Node.js 用 ws 库,Python 用 websockets);
– 浏览器里没有“重连自动机制”,断线后得自己处理 onclose 并调用 new WebSocket(...)。
如何创建并维持一个可用的 WebSocket 连接?
直接 new WebSocket(url) 很简单,但生产环境必须处理状态、错误和重连。关键点:
-
url必须以ws://(开发)或wss://(生产)开头,不能是http:// - 连接未就绪时发消息会触发
onerror,必须等readyState === WebSocket.OPEN才能send() -
onopen只表示握手成功,不代表服务端已准备好业务逻辑;建议约定一个handshake消息来回确认 - 不要依赖
onerror判断断连——它不总触发;主要靠onclose+ 定时ping(服务端发、客户端响应)来探测死链
const socket = new WebSocket('wss://api.example.com/ws');
socket.onopen = () => {
console.log('Connected');
socket.send(JSON.stringify({ type: 'handshake', token: 'xxx' }));
};
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'pong') return; // 心跳响应
console.log('Received:', data);
};
socket.onclose = (event) => {
console.log('Disconnected', event.code, event.reason);
// 这里触发重连逻辑(带退避)
};
为什么 send() 有时静默失败,或消息顺序错乱?
WebSocket.send() 是异步且无返回值的,失败不会抛异常,只可能触发 onerror(但不可靠)。更常见问题是:
立即学习“Java免费学习笔记(深入)”;
- 发送时
readyState是CLOSING或CLOSED→ 消息直接丢弃,无提示 - 高频调用
send()而没做节流 → 浏览器内部缓冲区溢出,部分消息被静默截断(尤其在弱网下) - 服务端未按顺序处理消息 → WebSocket 本身保证帧顺序,但如果你在服务端用多线程/多进程处理不同消息,业务层顺序就无法保障
建议做法:
– 发送前检查 socket.readyState === WebSocket.OPEN;
– 对关键操作加客户端序列号(如 { id: Date.now(), action: 'submit' }),服务端回执确认;
– 避免连续 send(),用 setTimeout 或 Promise.resolve().then() 让出 JS 主线程。
一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!
如何安全地传递结构化数据?
WebSocket 原生只收发 string 或 ArrayBuffer,JSON 是最常用选择,但要注意:
- 别直接
socket.send(obj)—— 会转成[object Object]字符串,服务端解析失败 - 大对象 JSON.stringify() 可能卡顿主线程,超 1MB 建议分片或改用
ArrayBuffer+Uint8Array - 服务端若未校验
Content-Type或长度,恶意客户端可发超长字符串导致 OOM
推荐封装一层:
function sendJSON(socket, data) {
if (socket.readyState !== WebSocket.OPEN) return false;
try {
socket.send(JSON.stringify(data));
return true;
} catch (e) {
console.error('Send failed:', e);
return false;
}
}
真实项目中,协议层往往还需加版本号、签名、压缩标记(如 { v: 2, s: 'sha256...', d: { ... } }),这些都得前后端对齐。
WebSocket 看似简单,但真正稳定运行的关键不在连接建立那一刻,而在连接生命周期里的每一次 send、每一条 onmessage 解析、每一个 onclose 后的决策——这些细节没兜住,实时性就只是幻觉。









