Real-Time Dashboard: WebSocket or SSE?

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.

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

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.

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.