前端 WebSocket 实战:告别轮询实现实时通信
背景与优势
在实时数据交互场景中,传统的 HTTP 轮询方式效率低下。例如每秒请求一次服务器获取聊天消息,不仅增加服务器负载,还会造成带宽浪费。WebSocket 提供了全双工通信通道,适合高并发、低延迟的实时场景。
轮询的局限性
// 反面示例:轮询获取数据
function startPolling() {
setInterval(async () => {
const response = await fetch('/api/messages');
const messages = await response.json();
updateMessages(messages);
}, 1000); // 每秒请求一次
}
上述代码会导致频繁的网络请求,服务器压力过大,且无法实现真正的即时推送。
核心实现方案
基础封装
通过封装类管理连接状态、重连机制及事件监听,提高代码复用性。
// 基础 WebSocket 客户端封装
class WebSocketClient {
constructor(url) {
this.url = url;
this.ws = null;
this.reconnectAttempts = 0;
this.maxReconnectAttempts = 5;
this.listeners = new Map();
}
connect() {
this.ws = new (.);
.. = {
.();
. = ;
.();
};
.. = {
data = .(event.);
.(data., data.);
};
.. = {
.();
.();
.();
};
.. = {
.(, error);
.(, error);
};
}
() {
(. && .. === .) {
..(.({ type, payload }));
}
}
() {
(!..(event)) {
..(event, []);
}
..(event).(callback);
}
() {
(..(event)) {
..(event).( (data));
}
}
() {
(. < .) {
.++;
.();
( .(), );
}
}
() {
(.) {
..();
}
}
}
ws = ();
ws.(, { .(); });
ws.(, { .(, data); });
ws.();


