前端WebSocket实战：别再只会用HTTP了
毒舌时刻
这代码写得跟网红滤镜似的——仅供参考。
各位前端同行，咱们今天聊聊前端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 class WebSocketClient { constructor(url) { this.url = url; this.ws = null; this.reconnectAttempts = 0; this.maxReconnectAttempts = 5; this.listeners = new Map(); } connect() { this.ws = new WebSocket(this.url); this.ws.onopen = () => { console.log('WebSocket连接成功'); this.reconnectAttempts = 0; this.emit('open'); }; this.ws.onmessage = (event) => { const data = JSON.parse(event.data); this.emit(data.type, data.payload); }; this.ws.onclose = () => { console.log('WebSocket连接关闭'); this.emit('close'); this.reconnect(); }; this.ws.onerror = (error) => { console.error('WebSocket错误:', error); this.emit('error', error); }; } send(type, payload) { if (this.ws && this.ws.readyState === WebSocket.OPEN) { this.ws.send(JSON.stringify({ type, payload })); } } on(event, callback) { (!this.listeners.has(event)) { this.listeners.set(event, []); } this.listeners.get(event).push(callback); } emit(event, data) { (this.listeners.has(event)) { this.listeners.get(event).forEach(callback => callback(data)); } } reconnect() { (this.reconnectAttempts < this.maxReconnectAttempts) { this.reconnectAttempts++; console.(`尝试重连... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`); setTimeout(() => this.connect(), ); } } disconnect() { (this.ws) { this.ws.(); } } } // 使用 const ws = new WebSocketClient(); ws.on(, () => { console.(); }); ws.on(, (data) => { console.(, data); }); ws.connect();
