Typical situation: a React dashboard only updates after pressing F5. Managers lose up to 15% of conversions due to outdated order statuses. With a 5-second delay, losses can reach 8% of revenue. We develop dashboards with live updates via WebSocket or SSE — data refreshes instantly after changes on the server. In our practice, we achieved an update delivery time of 50 ms under 1000 concurrent connections and 99.9% stability. Schedule a free diagnostics of your current solution to assess potential savings.
How to Choose Between WebSocket and SSE?
WebSocket is bidirectional, suitable for interactive dashboards with filters. SSE is unidirectional, simpler, works over HTTP/2, and automatically reconnects. For passive metric monitoring, SSE is optimal: less overhead, easier scaling.
| Criteria | WebSocket | SSE | Polling |
|---|---|---|---|
| Direction | Bidirectional | Unidirectional (server→client) | Unidirectional |
| HTTP/2 | Supports upgrade | Native, via HTTP | Full HTTP |
| Auto-reconnection | Need to implement manually | Built-in | No |
| Compatibility | All modern browsers | Nearly all (except IE) | 100% |
| Complexity | Medium | Low | Low |
For most dashboards, SSE is enough — cheaper to implement and easier to maintain. We use WebSocket when bidirectional communication is required (e.g., chats or collaborative editing boards).
Why Redis Pub/Sub Is an Ideal Broker for Real-Time?
Note: when a dashboard must receive updates from multiple microservices, directly pushing to SSE connections complicates the architecture. Redis Pub/Sub acts as a lightweight bus: each service publishes an event to a channel, and the SSE endpoint subscribes to relevant channels. This reduces server load and simplifies debugging. According to Redis documentation, Pub/Sub provides message distribution without storage.
Key Components of a Dashboard
SSE Endpoint
// GET /api/dashboard/stream
app.get('/api/dashboard/stream', authenticate, async (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
res.setHeader('X-Accel-Buffering', 'no'); // for nginx
const sendEvent = (event: string, data: unknown) => {
res.write(`event: ${event}\n`);
res.write(`data: ${JSON.stringify(data)}\n\n`);
};
// Send initial data
const initial = await dashboardService.getMetrics(req.user.id);
sendEvent('init', initial);
// Subscribe to Redis pub/sub for updates
const subscriber = redis.duplicate();
await subscriber.subscribe(`dashboard:${req.user.id}`);
subscriber.on('message', (channel, message) => {
const update = JSON.parse(message);
sendEvent(update.type, update.data);
});
// Heartbeat every 30 seconds to prevent connection close
const heartbeat = setInterval(() => {
res.write(':heartbeat\n\n');
}, 30000);
req.on('close', () => {
clearInterval(heartbeat);
subscriber.unsubscribe();
subscriber.quit();
});
});
React Hook for SSE
function useDashboardStream(userId: string) {
const [metrics, setMetrics] = useState<DashboardMetrics | null>(null);
const [isConnected, setIsConnected] = useState(false);
useEffect(() => {
const eventSource = new EventSource('/api/dashboard/stream', {
withCredentials: true
});
eventSource.addEventListener('init', (e) => {
setMetrics(JSON.parse(e.data));
setIsConnected(true);
});
eventSource.addEventListener('metrics:updated', (e) => {
const update = JSON.parse(e.data);
setMetrics(prev => prev ? { ...prev, ...update } : update);
});
eventSource.addEventListener('order:new', (e) => {
const order = JSON.parse(e.data);
setMetrics(prev => prev ? {
...prev,
todayOrders: prev.todayOrders + 1,
todayRevenue: prev.todayRevenue + order.total
} : null);
});
eventSource.onerror = () => {
setIsConnected(false);
// EventSource automatically reconnects
};
return () => eventSource.close();
}, [userId]);
return { metrics, isConnected };
}
Widgets
function DashboardPage() {
const { metrics, isConnected } = useDashboardStream(user.id);
return (
<div className="dashboard-grid">
<ConnectionIndicator isConnected={isConnected} />
<MetricCard
title="Orders Today"
value={metrics?.todayOrders ?? 0}
delta={metrics?.ordersVsYesterday}
/>
<MetricCard
title="Revenue"
value={formatCurrency(metrics?.todayRevenue ?? 0)}
delta={metrics?.revenueVsYesterday}
/>
<LiveOrderFeed orders={metrics?.recentOrders ?? []} />
<RealtimeChart
data={metrics?.hourlyRevenue ?? []}
title="Hourly Revenue"
/>
</div>
);
}
Dashboard Development Process
| Stage | Actions | Result |
|---|---|---|
| Analysis | Define metrics, update frequency, number of users | Technical specification for metrics and architecture |
| Transport Selection | Choose SSE or WebSocket based on scenario | Justified choice |
| Broker Setup | Deploy Redis Pub/Sub | Event bus |
| Endpoint Development | SSE handler with authentication and heartbeat | Ready endpoint |
| Hook Creation | React hook with event subscription | Reusable hook |
| Widgets | MetricCard, LiveFeed, RealtimeChart | UI components |
| Testing | Load testing up to 1000 concurrent connections | Performance report |
What Mistakes Are Commonly Made When Developing Real-Time Dashboards?
- Lack of heartbeat: proxy servers (Nginx, Cloudflare) close connections after 60–120 seconds of idle. Heartbeat every 30 seconds solves the problem.
- Mixing business logic with SSE handler: move event publishing to a separate service or middleware.
- Storing connections in memory of a single process: for horizontal scaling, use Redis Pub/Sub or a custom broker.
How does auto-reconnection work?
When the connection drops, EventSource (SSE) automatically retries the request. We configure exponential backoff (1s, 2s, 4s...) and buffer missed events on Redis so that after recovery the client gets the latest data.What Is Included in the Work
- Architecture design (transport, broker, protocol selection).
- SSE/WebSocket endpoint development with authentication and heartbeat.
- Backend module for event publishing via Redis Pub/Sub.
- React hook with handlers for all event types and states (connected, reconnecting, error).
- Widgets set (MetricCard, LiveFeed, RealtimeChart) with responsive layout.
- Integration with existing APIs (REST or GraphQL) for initial data load.
- Code documentation and deployment instructions.
- Load testing (up to 1000 concurrent connections).
- Handover of access to repository, staging, and production environments.
- Training of the client's team to maintain the dashboard.
Timelines and Cost
A basic version (SSE + Redis + React hook + 3–5 widgets) takes 1 to 2 weeks. A full-featured dashboard with filters, export, and multiple metric types takes 3–4 weeks. Cost is calculated individually based on project complexity. Traffic savings reach up to 40% with SSE, and server load reduction up to 30%. Operational costs are reduced by 25%.
Why Do Clients Trust Us?
We have been developing real-time solutions for e-commerce and SaaS for over 5 years. Our portfolio includes 50+ projects with dashboards for major marketplaces and logistics systems. We guarantee connection stability (99.9% uptime), data updates within 50 ms, and server load reduction up to 30% through optimal transport selection. Contact us to assess your project — we will propose a turnkey architecture.