71 lines
2.5 KiB
Markdown
71 lines
2.5 KiB
Markdown
# Server Data Polling Implementation
|
|
|
|
## Overview
|
|
Implemented a centralized server data management system that fetches and polls server status data globally across the entire application.
|
|
|
|
## Changes Made
|
|
|
|
### 1. Created ServerContext (`src/contexts/ServerContext.tsx`)
|
|
- **Purpose**: Global state management for server data
|
|
- **Features**:
|
|
- Fetches A2S data for all servers on app initialization
|
|
- Polls server data every 2 seconds to keep status fresh
|
|
- Provides data to any component via React Context
|
|
- Handles loading states and error management
|
|
|
|
### 2. Updated Main App (`src/main.tsx`)
|
|
- Wrapped the entire app with `<ServerProvider>` to make server data available globally
|
|
- Server data starts loading immediately when the app opens, regardless of which page
|
|
|
|
### 3. Refactored Servers Page (`src/pages/Servers.tsx`)
|
|
- Removed local data fetching logic
|
|
- Now uses `useServers()` hook to access global server data
|
|
- No duplicate API calls - reuses data already being polled
|
|
- Maintains all existing functionality (filtering, loading skeletons, etc.)
|
|
|
|
## Benefits
|
|
|
|
### Performance
|
|
- ✅ Data loads immediately on app start (any page: index, blog, servers, etc.)
|
|
- ✅ No delay when navigating to /servers page - data already available
|
|
- ✅ Automatic updates every 2 seconds keep data fresh
|
|
- ✅ Single polling loop instead of multiple instances
|
|
|
|
### User Experience
|
|
- ✅ Server data pre-loaded before user navigates to servers page
|
|
- ✅ Real-time status updates without manual refresh
|
|
- ✅ Consistent data across all pages that might display server info
|
|
- ✅ Smooth loading transitions with skeleton placeholders
|
|
|
|
### Code Quality
|
|
- ✅ Centralized data management (single source of truth)
|
|
- ✅ Reusable across multiple components
|
|
- ✅ Clean separation of concerns
|
|
- ✅ Easy to extend (add more server-related features)
|
|
|
|
## How It Works
|
|
|
|
```
|
|
App Starts → ServerProvider initializes
|
|
↓
|
|
Fetches all server data via A2S API
|
|
↓
|
|
Sets up 2-second polling interval
|
|
↓
|
|
Any component can access data via useServers() hook
|
|
↓
|
|
Data automatically updates every 2 seconds
|
|
```
|
|
|
|
## API Calls
|
|
- **Initial Load**: 9 parallel A2S queries (one per server)
|
|
- **Polling**: Same 9 queries every 2 seconds
|
|
- **Bandwidth**: ~4.5 requests/second (distributed)
|
|
|
|
## Future Enhancements (Optional)
|
|
- Add configurable polling interval
|
|
- Implement smart polling (slower when tab inactive)
|
|
- Add WebSocket support for real-time updates
|
|
- Cache data in localStorage for faster initial loads
|
|
- Add server health monitoring and alerts
|