WebSocket实时通信从入门到实战：告别轮询，3步搞定即时推送

ws.onopen = () => {
console.log('连接成功');
ws.send('Hello Server');
};

这段代码看起来没问题对吧？我当时就这么写的，结果生产环境一上线，用户反馈说"消息发不出去"、"连接动不动就断了"。

第一个坑：没有心跳机制

WebSocket连接看着是连着的，实际上可能已经断了。网络波动、代理服务器超时，都会让连接"假死"。客户端还以为连着呢，消息发出去没人接收。

解决方案：加上心跳检测

connect() {
this.ws = new WebSocket(this.url);

this.ws.onopen = () => {
console.log('WebSocket连接成功');
this.startHeartbeat();
};

this.ws.onmessage = (event) => {
const data = JSON.parse(event.data);
// 处理心跳响应
if (data.type === 'pong') {
this.lastHeartbeatTime = Date.now();
return;
}
// 处理业务消息
this.handleMessage(data);
};

this.ws.onclose = () => {
console.log('WebSocket连接关闭');
this.stopHeartbeat();
this.reconnect(); // 后面会讲重连
};

this

.ws.onerror = (error) => {
console.error('WebSocket错误:', error);
this.stopHeartbeat();
};
}

startHeartbeat() {
this.heartbeatTimer = setInterval(() => {
// 如果超过60秒没收到心跳响应，认为连接已断
if (Date.now() - this.lastHeartbeatTime > 60000) {
console.warn('心跳超时，准备重连');
this.ws.close();
return;
}
this.ws.send(JSON.stringify({ type: 'ping' }));
}, this.heartbeatInterval);
}

这个设计真的反人类？其实不是，HTTP也是这么干的。TCP连接本身就需要心跳来维持，只是HTTP被封装好了你看不到罢了。

第二个坑：断线重连策略

用户切换网络、手机息屏再亮屏，WebSocket必然断。我第一次写的重连逻辑是"断了就立刻重连"，结果服务器被DDOS了——所有客户端同时重连，直接把服务器干趴下。

改进方案：指数退避重连

reconnect() {
if (this.reconnecting) return;
this.reconnecting = true;

// 指数退避：第一次等1秒，第二次2秒，第三次4秒...最多30秒
const maxDelay = 30000;
let delay = Math.min(1000 * Math.pow(2, this.retryCount), maxDelay);

setTimeout(() => {
this.retryCount++;
this.connect();
this.reconnecting = false;
}, delay);
}

（核心配图：一张指数退避重连的时序图，横轴是时间，纵轴是重连延迟，曲线越来越平缓）

第三个坑：消息丢失

WebSocket断连期间发的消息全丢了。用户说"我明明发了消息，服务器没收到"。这个问题排查了一个下午才找到原因。

解决方案：消息队列 + 确认机制

send(message) {
const msgId = ++this.messageId;
const payload = {
id: msgId,
type: 'message',
data: message,
timestamp: Date.now()
};

// 如果连接断开，加入队列
if (this.ws.readyState !== WebSocket.OPEN) {
this.messageQueue.push(payload);
console.warn('连接断开，消息已入队:', msgId);
return;
}

// 发送消息并记录待确认
this.ws.send(JSON.stringify(payload));
this.pendingMessages.set(msgId, {
payload,
retryCount: 0,
timestamp: Date.now()
});

// 启动超时检测
this.startMessageTimeout(msgId);
}

startMessageTimeout(msgId) {
const pending = this.pendingMessages.get(msgId);
if (!pending) return;

setTimeout(() => {
const current = this.pendingMessages.get(msgId);
if (!current) return; // 已经确认了

if (current.retryCount >= this.maxRetry) {
console.error('消息发送失败，已达最大重试次数:', msgId);
this.pendingMessages.delete(msgId);
return;
}

// 重发
current.retryCount++;
this.ws.send(JSON.stringify(current.payload));
this.startMessageTimeout(msgId);

handleMessage(data) {
// 处理消息确认
if (data.type === 'ack') {
this.pendingMessages.delete(data.messageId);
return;
}
// 处理业务消息
// ...
}

官方文档这段文档不够清晰，我翻了好几个RFC文档才搞清楚这些细节。关键是人家文档只告诉你WebSocket怎么用，不告诉你实际项目中会遇到什么问题。

还有个技巧：连接池管理

如果你的应用需要管理多个WebSocket连接（比如多页面、多频道），建议搞个连接管理器：

createConnection(url, options = {}) {
if (this.connections.has(url)) {
console.warn('连接已存在，返回现有连接');
return this.connections.get(url);
}

const client = new WebSocketClient(url);
client.connect();
this.connections.set(url, client);
return client;
}

destroyConnection(url) {
const client = this.connections.get(url);
if (client) {
client.close();
this.connections.delete(url);
}
}