前端 WebSocket 实战指南：告别轮询，拥抱实时通信
为什么需要 WebSocket
各位前端同行，咱们今天聊聊前端 WebSocket。别告诉我你还在用轮询获取实时数据，那感觉就像每隔一分钟就去敲门问'好了没'——烦人又低效。
最近看到一个项目，实时聊天功能用轮询实现，每秒请求一次服务器，我差点当场去世。我就想问：你是在做实时通信还是在做 DDoS 攻击？
反面教材：轮询的代价
// 反面教材：轮询获取数据
function startPolling() {
setInterval(async () => {
const response = await fetch('/api/messages');
const messages = await response.json();
updateMessages(messages);
}, 1000); // 每秒请求一次
}
经验之谈：这代码，我看了都替你的服务器着急。每秒轮询一次，你是想让服务器变成蜜蜂吗？带宽和连接数会瞬间爆炸。
前端 WebSocket 的正确姿势
1. 基础 WebSocket 封装
原生 WebSocket API 虽然强大，但直接裸写容易遇到重连、心跳等坑。建议封装一个类来管理状态。
// 正确姿势：基础 WebSocket 封装
class WebSocketClient {
constructor(url) {
this.url = url;
this.ws = null;
this.reconnectAttempts = 0;
this.maxReconnectAttempts = 5;
this.listeners = new Map();
}
connect() {
. = (.);
.. = {
.();
. = ;
.();
};
.. = {
data = .(event.);
.(data., data.);
};
.. = {
.();
.();
.();
};
.. = {
.(, error);
.(, error);
};
}
() {
(. && .. === .) {
..(.({ type, payload }));
}
}
() {
(!..(event)) {
..(event, []);
}
..(event).(callback);
}
() {
(..(event)) {
..(event).( (data));
}
}
() {
(. < .) {
.++;
.();
( .(), );
}
}
() {
(.) {
..();
}
}
}
ws = ();
ws.(, { .(); });
ws.(, { .(, data); });
ws.();
