前端 WebSocket 新方法：别再用传统轮询了
什么是前端 WebSocket 新方法？
前端 WebSocket 新方法是指在前端开发中，随着技术的发展，出现的新的 WebSocket 应用技术和方法。别以为 WebSocket 只是简单的实时通信，那是十年前的玩法了。
为什么需要关注前端 WebSocket 新方法？
- 实时性：WebSocket 提供了真正的实时通信能力
- 性能优化：WebSocket 减少了 HTTP 请求的开销
- 功能扩展：WebSocket 支持更复杂的实时应用场景
- 用户体验：WebSocket 提供了更好的用户体验
- 开发效率：新的 WebSocket 库提高了开发效率
前端 WebSocket 新方法
1. 原生 WebSocket API
使用原生 WebSocket API 进行实时通信，提供了最基础的 WebSocket 功能。
// 连接 WebSocket const ws = new WebSocket('wss://echo.websocket.org'); // 连接成功 ws.onopen = function(event) { console.log('WebSocket connected'); ws.send('Hello WebSocket!'); }; // 接收消息 ws.onmessage = function(event) { console.log('Message received:', event.data); }; // 连接关闭 ws.onclose = function(event) { console.log('WebSocket closed:', event.code, event.reason); }; // 连接错误 ws.onerror = function(error) { console.error('WebSocket error:', error); }; // 发送消息 function sendMessage(message) { if (ws.readyState === WebSocket.OPEN) { ws.send(message); } else { console.error('WebSocket is not connected'); } } // 关闭连接 function closeConnection() { ws.close(); }2. Socket.IO
Socket.IO 是一个流行的 WebSocket 库，提供了更丰富的功能和更好的兼容性。
// 安装 Socket.IO // npm install socket.io-client import { io } from 'socket.io-client'; // 连接 Socket.IO const socket = io('https://example.com'); // 连接成功 socket.on('connect', () => { console.log('Socket.IO connected'); socket.emit('message', 'Hello Socket.IO!'); }); // 接收消息 socket.on('message', (data) => { console.log('Message received:', data); }); // 连接断开 socket.on('disconnect', () => { console.log('Socket.IO disconnected'); }); // 发送消息 function sendMessage(message) { socket.emit('message', message); } // 关闭连接 function closeConnection() { socket.disconnect(); }3. SockJS
SockJS 是一个 WebSocket 模拟库，在不支持 WebSocket 的环境中提供类似的功能。
// 安装 SockJS // npm install sockjs-client import SockJS from 'sockjs-client'; // 连接 SockJS const sock = new SockJS('https://example.com/sockjs'); // 连接成功 sock.onopen = function() { console.log('SockJS connected'); sock.send('Hello SockJS!'); }; // 接收消息 sock.onmessage = function(e) { console.log('Message received:', e.data); }; // 连接关闭 sock.onclose = function() { console.log('SockJS closed'); }; // 发送消息 function sendMessage(message) { sock.send(message); } // 关闭连接 function closeConnection() { sock.close(); }4. WebSocket 心跳机制
实现 WebSocket 心跳机制，确保连接的稳定性。
// WebSocket 心跳机制 class WebSocketClient { constructor(url) { this.url = url; this.ws = null; this.heartbeatInterval = null; this.reconnectInterval = 3000; this.heartbeatTime = 30000; // 30秒 } connect() { this.ws = new WebSocket(this.url); this.ws.onopen = () => { console.log('WebSocket connected'); this.startHeartbeat(); }; this.ws.onmessage = (event) => { console.log('Message received:', event.data); }; this.ws.onclose = () => { console.log('WebSocket closed'); this.stopHeartbeat(); this.reconnect(); }; this.ws.onerror = (error) => { console.error('WebSocket error:', error); }; } startHeartbeat() { this.heartbeatInterval = setInterval(() => { if (this.ws.readyState === WebSocket.OPEN) { this.ws.send('ping'); } }, this.
