📡 Activity 10: Real-time Updates and Polling - Discovery Challenge

Overview

This template demonstrates intelligent polling systems for real-time data updates including adaptive intervals, performance optimization, and multiple real-time technologies (polling, WebSockets, Server-Sent Events).

🎯 Learning Objectives

After completing this activity, you'll understand:

• Intelligent Polling: Adaptive intervals based on data changes
• Performance Optimization: Battery and visibility aware polling
• Real-time Visualization: Live charts and data displays
• WebSocket Communication: Bidirectional real-time connections
• Server-Sent Events: One-way real-time streams
• Error Handling: Robust error recovery and exponential backoff

🚀 Getting Started (See Results in 30 Seconds!)

Prerequisites

• Understanding of asynchronous JavaScript and Promises
• Basic knowledge of API polling concepts
• Familiarity with real-time data scenarios

Installation

1. Clone or download this template
2. Open in any code editor
3. Start local server: python3 -m http.server 8000
4. Open browser to http://localhost:8000

🎯 What's Already Working

Watch real-time data updates in action:

• ✅ Basic Polling Setup: ISS tracker and crypto prices update automatically
• ✅ Multiple Data Sources: Pokemon, ISS, cryptocurrency tracking
• ✅ Live Dashboard: Real-time statistics and controls
• ✅ Data Visualization: Charts update automatically with Chart.js
• ✅ Connection Monitoring: Online/offline detection
• ⚠️ Performance Modes: Eco/Normal/Performance settings (TODO: Wire up behavior)
• ⚠️ Adaptive Intervals: Dynamic polling frequency (TODO: Implement adjustment logic)
• ⚠️ Battery Awareness: Low battery detection (TODO: Implement polling reduction)
• ⚠️ Error Recovery: Exponential backoff (TODO: Add retry logic)

📋 Tasks to Complete

Your mission is to enhance this polling system with intelligent features. Complete these tasks to master real-time data management:

TODO 1: Implement Performance Mode Behavior (Medium)

File: polling-manager.js Location: shouldPoll() and getSkipDelay() methods Current State: Performance mode selector exists but doesn't affect polling Your Task: Implement mode-specific polling adjustments:

• Eco Mode: Multiply intervals by 2x (save battery)
• Normal Mode: Use default intervals
• Performance Mode: Divide intervals by 0.5x (faster updates)

Success Criteria:

• Switching modes visibly changes update frequency
• Eco mode reduces API calls by ~50%
• Performance mode increases update speed noticeably
• Dashboard shows different intervals per mode

Hints:

• Check this.globalState.performanceMode in shouldPoll()
• Adjust poller.adaptiveInterval based on mode
• Update dashboard to show current mode's multiplier

TODO 2: Add Adaptive Interval Logic (Hard)

File: polling-manager.js Location: executePoll() method after data fetch Current State: Intervals are fixed regardless of data changes Your Task: Implement dynamic interval adjustment:

• Detect if data changed using hash comparison
• Increase frequency (shorter interval) when data changes often
• Decrease frequency (longer interval) when data is stable
• Stay within adaptiveRange bounds

Success Criteria:

• Rapidly changing data (crypto prices) polls faster
• Stable data (Pokemon stats) polls slower
• Intervals stay within configured ranges
• Dashboard shows adaptive interval changes

Hints:

• Compare poller.lastDataHash with new data hash
• Track change frequency over last 5 polls
• Adjust poller.adaptiveInterval by +/-20% per change detection
• Use Math.min() and Math.max() to enforce ranges

TODO 3: Implement Battery-Aware Polling (Medium)

File: polling-manager.js Location: setupGlobalHandlers() and shouldPoll() methods Current State: Battery API is detected but polling continues regardless Your Task: Reduce polling when battery is low:

• Get battery level using Battery Status API
• When ``battery < 20``%, multiply all intervals by 3x
• When ``battery < 10``%, pause all low-priority pollers
• Resume normal polling when charging or ``battery > 20``%

Success Criteria:

• Polling slows when battery drops below 20%
• Low-priority pollers pause below 10%
• Dashboard shows battery status and impact
• Polling resumes when battery recovers

Hints:

• Use navigator.getBattery() API
• Listen for levelchange and chargingchange events
• Check poller.priority for low-priority pollers
• Add battery indicator to dashboard UI

TODO 4: Add Exponential Backoff Error Recovery (Hard)

File: polling-manager.js Location: executePoll() error handler Current State: Errors are logged but polling continues at same rate Your Task: Implement exponential backoff on failures:

• Track consecutive errors in poller.errorCount
• Double the interval after each failure (up to 5x original)
• Reset interval after successful request
• Stop polling after 5 consecutive failures

Success Criteria:

• Failed requests trigger longer delays
• Interval doubles with each failure (1x -> 2x -> 4x -> 8x)
• Success resets interval to normal
• Poller stops after 5 failures, shows error state

Hints:

• Calculate backoff: originalInterval * Math.pow(2, errorCount)
• Cap backoff at 5x: Math.min(backoffInterval, originalInterval * 5)
• Reset errorCount = 0 on success
• Disable poller and show notification after 5 failures

TODO 5: Create Stale Data Warning System (Easy)

File: dashboard.js Location: updateDataDisplay() method Current State: Old data displays without warning Your Task: Add visual indicators for stale data:

• Calculate time since last successful update
• Show yellow warning if ``data > 2``x polling interval old
• Show red error if ``data > 5``x polling interval old
• Display "Last updated: X seconds ago" tooltip

Success Criteria:

• Fresh data has no indicator (green/normal)
• Stale data (>2x interval) shows yellow warning badge
• Very stale data (>5x interval) shows red error badge
• Hover shows exact last update time

Hints:

• Calculate staleness: Date.now() - poller.lastUpdate
• Compare to poller.interval * 2 and poller.interval * 5
• Add CSS classes: .data-fresh, .data-stale, .data-very-stale
• Use title attribute for tooltip with timestamp

🛰️ Available Demos

One. ISS Tracker

Polls International Space Station location every 10 seconds. Watch the real-time position update on the world map and see astronaut information.

2. Cryptocurrency Tracker

Monitors Bitcoin, Ethereum, and Cardano prices with 15-second updates. Perfect for testing adaptive intervals with price volatility.

3. Pokemon Team Monitor

Tracks Pokemon team statistics with 30-second polling. Good for testing stable data scenarios.

4. WebSocket Demo

Simulates bidirectional real-time communication. Compare latency vs traditional polling.

5. Server-Sent Events Demo

Demonstrates one-way server-to-client streaming. Alternative to polling for server push scenarios.

📊 Interactive Dashboard Features

The dashboard provides real-time monitoring:

• Active Pollers: Count of running data sources
• Total Requests: Cumulative API calls
• Average Response Time: Performance metrics
• Error Rate: Failure percentage
• Manual Controls: Pause, resume, and force refresh buttons

🚀 Extension Challenges

Once you've completed the main TODOs, try these advanced features:

Easy Extensions

1. Add New Data Source: Integrate weather API with 60-second polling
2. Custom Notifications: Alert when crypto price ``changes > 5``%
3. Pause on Hover: Stop polling when user hovers over data display
4. Polling History: Show last 10 poll results in a timeline

Medium Extensions

1. Data Persistence: Cache last successful data in localStorage
2. Export Functionality: Download polling history as JSON/CSV
3. Custom Visualizations: Add line charts for price trends
4. Request Prioritization: Critical data polls first during high load

Hard Extensions

1. Real WebSocket Server: Build Node.js server with Socket.io
2. Server-Sent Events: Implement Express.js SSE endpoint
3. Predictive Polling: ML-based interval prediction using data patterns
4. Multi-tab Coordination: Share polling across browser tabs with Broadcast Channel API
5. Service Worker Polling: Background polling even when page is closed

🛠️ Development Tips

Testing Your Implementation

1. Network Throttling: Use DevTools to simulate slow connections
2. Offline Testing: Toggle network to test error recovery
3. Battery Simulation: Use DevTools Sensors to simulate low battery
4. Memory Monitoring: Check for leaks in Performance tab
5. Multiple Data Sources: Test with all 5 demos running simultaneously

Debugging Strategies

• Console logs show detailed polling lifecycle events
• Dashboard displays real-time statistics for verification
• Use breakpoints in executePoll() to inspect intervals
• Monitor Network tab to confirm request timing
• Check Application > Local Storage for cached data

Performance Optimization Tips

1. Implement data deduplication to skip unnecessary UI updates
2. Batch multiple updates to reduce DOM manipulations
3. Use requestAnimationFrame for smooth chart animations
4. Debounce rapid state changes (mode switches, battery events)
5. Clear old chart data to prevent memory growth

📚 Key Concepts Reference

Polling Strategies Comparison

When to Use Each Pattern

• Traditional Polling: Weather data, news feeds, non-critical updates
• Adaptive Polling: Stock prices, social media, changing data frequency
• WebSockets: Chat apps, collaborative editing, gaming
• Server-Sent Events: Live scores, notifications, one-way data streams

Battery API Best Practices

• Always check navigator.getBattery() support
• Default to normal mode if Battery API unavailable
• Never completely stop critical pollers (just slow them)
• Resume immediately when device starts charging

📁 File Structure

activity-10-polling/
├── index.html              # Main demo interface with data sections
├── polling-manager.js      # Universal polling system (YOUR FOCUS)
├── dashboard.js            # Dashboard controls and notifications (TODO 5)
├── data-sources.js         # API data fetchers (mock APIs)
├── visualizer.js           # Live data visualization (Chart.js)
├── real-time-demos.js      # WebSocket and SSE simulations
├── app.js                  # Main application initialization
├── package.json            # Dependencies (Chart.js)
└── README.md              # This file

🎉 What You'll Build

By completing this activity, you'll have:

• ✅ Intelligent polling system with adaptive intervals
• ✅ Battery-aware performance optimization
• ✅ Robust error recovery with exponential backoff
• ✅ Multiple performance modes (Eco/Normal/Performance)
• ✅ Real-time visualization with live charts
• ✅ Comprehensive monitoring dashboard
• ✅ Production-ready polling patterns for any API

📚 Learning Resources

• MDN Polling Best Practices
• Battery Status API
• Page Visibility API
• WebSocket vs Polling
• Chart.js Real-time Data

Ready to build production-grade polling systems? Start with TODO 1 and work your way through each challenge!