前端 WebSocket 实战：告别轮询，拥抱实时通信
为什么需要 WebSocket
在实际项目中，如果还在用 HTTP 轮询来实现实时数据获取，不仅延迟高，还会给服务器带来不必要的压力。想象一下，每隔一秒就去问一次'好了没'，这种低效的交互方式在即时通讯、股票行情等场景下是难以接受的。
轮询的代价
// 轮询方案示例
function startPolling() {
setInterval(async () => {
const response = await fetch('/api/messages');
const messages = await response.json();
updateMessages(messages);
}, 1000); // 每秒请求一次，带宽消耗巨大
}
这种实现方式会导致频繁的网络请求，服务器资源浪费严重。相比之下，WebSocket 提供了全双工通信通道，一旦连接建立，双方可以随时发送数据，无需反复握手。
原生 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() {
this. = (.);
.. = {
.();
. = ;
.();
};
.. = {
data = .(event.);
.(data., data.);
};
.. = {
.();
.();
.();
};
.. = {
.(, error);
.(, error);
};
}
() {
(. && .. === .) {
..(.({ type, payload }));
}
}
() {
(!..(event)) {
..(event, []);
}
..(event).(callback);
}
() {
(..(event)) {
..(event).( (data));
}
}
() {
(. < .) {
.++;
.();
( .(), );
}
}
() {
(.) {
..();
}
}
}
ws = ();
ws.(, .());
ws.(, .(, data));
ws.();
