前端WebSocket实战：别再只会用HTTP了

前端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) { if (!this.listeners.has(event)) { this.listeners.set(event, []); } this.listeners.get(event).push(callback); } emit(event, data) { if (this.listeners.has(event)) { this.listeners.get(event).forEach(callback => callback(data)); } } reconnect() { if (this.reconnectAttempts < this.maxReconnectAttempts) { this.reconnectAttempts++; console.log(`尝试重连... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`); setTimeout(() => this.connect(), 3000); } } disconnect() { if (this.ws) { this.ws.close(); } } } // 使用 const ws = new WebSocketClient('wss://api.example.com/ws'); ws.on('open', () => { console.log('连接成功'); }); ws.on('message', (data) => { console.log('收到消息:', data); }); ws.connect(); 

2. React中使用WebSocket

// 正确姿势：React中使用WebSocket import { useEffect, useRef, useState, useCallback } from 'react'; function useWebSocket(url) { const [isConnected, setIsConnected] = useState(false); const [messages, setMessages] = useState([]); const ws = useRef(null); useEffect(() => { ws.current = new WebSocket(url); ws.current.onopen = () => setIsConnected(true); ws.current.onclose = () => setIsConnected(false); ws.current.onmessage = (event) => { const data = JSON.parse(event.data); setMessages(prev => [...prev, data]); }; return () => { ws.current.close(); }; }, [url]); const sendMessage = useCallback((message) => { if (ws.current && ws.current.readyState === WebSocket.OPEN) { ws.current.send(JSON.stringify(message)); } }, []); return { isConnected, messages, sendMessage }; } // 使用 function ChatRoom() { const { isConnected, messages, sendMessage } = useWebSocket('wss://chat.example.com'); const [input, setInput] = useState(''); const handleSend = () => { sendMessage({ type: 'chat', content: input }); setInput(''); }; return ( <div> <div>状态: {isConnected ? '已连接' : '未连接'}</div> <div className="messages"> {messages.map((msg, i) => ( <div key={i}>{msg.content}</div> ))} </div> <input value={input} onChange={e => setInput(e.target.value)} /> <button onClick={handleSend}>发送</button> </div> ); } 

3. 使用Socket.io

// 正确姿势：使用Socket.io import { io } from 'socket.io-client'; const socket = io('https://api.example.com', { transports: ['websocket'], autoConnect: true, reconnection: true, reconnectionAttempts: 5, reconnectionDelay: 3000 }); // 连接事件 socket.on('connect', () => { console.log('连接成功, ID:', socket.id); }); // 断开连接 socket.on('disconnect', () => { console.log('连接断开'); }); // 监听消息 socket.on('message', (data) => { console.log('收到消息:', data); }); // 发送消息 socket.emit('chat message', { text: 'Hello' }); // 加入房间 socket.emit('join room', 'room-1'); // 离开房间 socket.emit('leave room', 'room-1'); 

毒舌点评：早这么写，你的实时通信早做好了。别告诉我你还在用轮询，那你还是趁早去用短信吧。

实战技巧：WebSocket指南

1. WebSocket使用场景

• 实时聊天：即时通讯
• 实时数据：股票、比分
• 协同编辑：多人协作
• 在线游戏：实时对战

2. 最佳实践

1. 重连机制：断线自动重连
2. 心跳检测：保持连接活跃
3. 消息确认：确保消息送达
4. 错误处理：优雅处理异常

最后想说的

WebSocket不是新技术，是实时通信的标准。别再只会用HTTP了——WebSocket一下，你的应用会实时起来。

WebSocket就像电话，HTTP就像写信。紧急的事打电话，不急的事写信。别什么事都写信，学会打电话。