Realtime features in apps: WebSockets vs polling

class RealtimeClient { constructor(url, options = {}) { this.url = url; this.options = { reconnectDelay: 1000, maxReconnectAttempts: 5, heartbeatInterval: 30000, ...options }; this.reconnectAttempts = 0; this.connect(); } connect() { this.ws = new WebSocket(this.url); this.ws.onopen = () => { console.log('WebSocket connected'); this.reconnectAttempts = 0; this.startHeartbeat(); }; this.ws.onmessage = (event) => { const data = JSON.parse(event.data); this.handleMessage(data); }; this.ws.onclose = () => { this.stopHeartbeat(); this.attemptReconnect(); }; this.ws.onerror = (error) => { console.error('WebSocket error:', error); }; } attemptReconnect() { if (this.reconnectAttempts < this.options.maxReconnectAttempts) { setTimeout(() => { this.reconnectAttempts++; this.connect(); }, this.options.reconnectDelay * Math.pow(2, this.reconnectAttempts)); } } startHeartbeat() { this.heartbeatTimer = setInterval(() => { if (this.ws.readyState === WebSocket.OPEN) { this.ws.send(JSON.stringify({ type: 'ping' })); } }, this.options.heartbeatInterval); } send(data) { if (this.ws.readyState === WebSocket.OPEN) { this.ws.send(JSON.stringify(data)); } } }

class SmartPolling { constructor(endpoint, options = {}) { this.endpoint = endpoint; this.options = { initialInterval: 1000, maxInterval: 30000, backoffMultiplier: 1.5, ...options }; this.currentInterval = this.options.initialInterval; this.isPolling = false; this.lastEtag = null; } start() { this.isPolling = true; this.poll(); } stop() { this.isPolling = false; if (this.timeoutId) { clearTimeout(this.timeoutId); } } async poll() { if (!this.isPolling) return; try { const headers = {}; if (this.lastEtag) { headers['If-None-Match'] = this.lastEtag; } const response = await fetch(this.endpoint, { headers }); if (response.status === 304) { // No new data, increase polling interval this.increaseInterval(); } else if (response.ok) { // New data received, reset interval this.currentInterval = this.options.initialInterval; this.lastEtag = response.headers.get('ETag'); const data = await response.json(); this.handleData(data); } } catch (error) { console.error('Polling error:', error); this.increaseInterval(); } this.scheduleNextPoll(); } increaseInterval() { this.currentInterval = Math.min( this.currentInterval * this.options.backoffMultiplier, this.options.maxInterval ); } scheduleNextPoll() { this.timeoutId = setTimeout(() => this.poll(), this.currentInterval); } }