Activity 10: Real-time Updates and Polling

This StackBlitz template demonstrates various real-time data update mechanisms including polling, WebSockets, and Server-Sent Events.

🚀 Quick Start

1. Click "Fork" to create your own copy
2. Wait for dependencies to install
3. Click "Open in New Tab" to view the demo
4. Choose a real-time data source to explore

📁 Project Structure

activity-10-polling/
├── index.html              # Main demo interface
├── polling-manager.js       # Universal polling system
├── dashboard.js            # Dashboard controls and notifications
├── data-sources.js         # API data fetchers
├── visualizer.js           # Live data visualization
├── real-time-demos.js      # WebSocket and SSE demos
├── app.js                  # Main application logic
├── package.json            # Dependencies and scripts
└── README.md              # This file

🎯 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

🛰️ Available Demos

One. ISS Tracker

• Polls International Space Station location every 10 seconds
• Shows real-time position on world map
• Displays astronaut information

2. Cryptocurrency Tracker

• Monitors Bitcoin, Ethereum, and Cardano prices
• Updates every 15 seconds with price changes
• Shows 24-hour percentage changes

3. Pokemon Team Monitor

• Tracks Pokemon team statistics
• Demonstrates less frequent polling (30 seconds)
• Shows team composition and average stats

4. WebSocket Demo

• Simulates bidirectional real-time communication
• Shows connection status and message flow
• Demonstrates server push notifications

5. Server-Sent Events Demo

• Simulates one-way server-to-client streaming
• Shows event types and real-time updates
• Demonstrates connection management

⚡ Key Features

Smart Polling Manager

• Adaptive Intervals: Frequency adjusts based on data changes
• Performance Modes: Eco, Normal, and Performance settings
• Battery Awareness: Reduces polling on low battery
• Visibility Detection: Pauses when tab is hidden
• Error Recovery: Exponential backoff on failures

Live Dashboard

• Real-time Controls: Pause, resume, manual refresh
• Performance Statistics: Response times, error rates
• Notifications: Success, warning, and error alerts
• Data Visualization: Live charts with Chart.js

Connection Management

• Online/Offline Detection: Pauses polling when offline
• Connection Retries: Automatic reconnection attempts
• Status Indicators: Visual connection state feedback

🎮 Interactive Controls

Performance Modes

• 🌱 Eco Mode: Reduces polling frequency for battery savings
• ⚡ Normal Mode: Standard polling intervals
• 🚀 Performance Mode: Increased polling for real-time apps

Manual Controls

• 🔄 Manual Refresh: Force immediate data updates
• ⏸️ Pause All: Stop all active polling
• ▶️ Resume All: Restart all pollers

📊 Monitoring Dashboard

Track your polling performance with:

• Active Pollers: Number of running data sources
• Total Requests: Cumulative API calls made
• Average Response Time: Performance metrics
• Error Rate: Failure percentage

🔧 Technical Implementation

Polling Strategies

{
  'iss': { defaultInterval: 10000, adaptiveRange: [5000, 30000] },
  'crypto': { defaultInterval: 15000, adaptiveRange: [5000, 60000] },
  'pokemon': { defaultInterval: 30000, adaptiveRange: [10000, 60000] }
}

Adaptive Behavior

• Data Changes: Increases frequency when data changes frequently
• Stable Data: Decreases frequency when data is stable
• Error Handling: Exponential backoff on consecutive failures
• Resource Awareness: Adjusts based on battery and visibility

Real-time Technologies Comparison

🎯 Try These Challenges

Easy Challenges

1. Add a new data source (weather, stock prices)
2. Customize polling intervals for different scenarios
3. Create custom notifications for specific data conditions

Medium Challenges

1. Implement data persistence with localStorage
2. Add data export functionality for historical analysis
3. Create custom visualizations for your data

Hard Challenges

1. Build a real WebSocket server and connect to it
2. Implement Server-Sent Events server with Express.js
3. Add predictive analytics based on data trends

🚀 Extension Ideas

• Multi-currency Support: Track different cryptocurrency exchanges
• Weather Monitoring: Add multiple city weather tracking
• Sports Scores: Real-time game and player statistics
• Social Media Feeds: Live tweet or post monitoring
• IoT Device Monitoring: Sensor data from connected devices

🛠️ Development Tips

Testing Real-time Features

1. Use browser dev tools to simulate network conditions
2. Test offline/online scenarios by toggling network
3. Monitor memory usage with long-running polls
4. Verify battery detection on mobile devices

Performance Optimization

1. Implement data deduplication to avoid unnecessary updates
2. Use request prioritization for critical vs. nice-to-have data
3. Add connection pooling for multiple data sources
4. Implement smart caching with TTL strategies

Error Handling Best Practices

1. Graceful degradation when APIs are unavailable
2. User-friendly error messages with retry options
3. Exponential backoff to prevent API rate limiting
4. Circuit breaker pattern for repeatedly failing services

📚 Learning Resources

• MDN WebSocket API
• Server-Sent Events Guide
• Chart.js Documentation
• Real-time Web Technologies

🎉 What You'll Learn

By the end of this activity, you'll have hands-on experience with:

• Building intelligent polling systems that adapt to data patterns
• Implementing WebSocket connections for bidirectional communication
• Using Server-Sent Events for server push notifications
• Creating live data visualizations with automatic updates
• Managing connection states and error recovery
• Optimizing real-time applications for performance and battery life

Ready to explore the exciting world of real-time web applications? Start by clicking one of the demo buttons above! 🚀