UI Feature
WebSocket
Real-time WebSocket Updates
Subscribe to live metrics, training progress, and index updates with sub-second latency.
Real-time event flow with WebSocket connections
Overview
MLGraph's real-time system uses WebSockets to push updates to the UI without polling. Metrics, job progress, and index changes are streamed instantly, giving you true live visibility into your system.
Event Channels
metrics
System and performance metrics:
- • QPS, latency percentiles
- • CPU, memory, disk usage
- • Cache hit rates
- • Active connections
jobs
Background job progress:
- • Training progress
- • Import/export status
- • Merge operations
- • Replication sync
indexes
Index state changes:
- • Vector count updates
- • Shard transitions
- • Configuration changes
- • Health status
alerts
System alerts and warnings:
- • Resource thresholds
- • Node failures
- • Replication lag
- • Error spikes
React Hook
The useWebSocket hook manages connection lifecycle, automatic reconnection, and message parsing.
import { useWebSocket } from '@/hooks/useWebSocket';
function MetricsDashboard() {
const {
connected,
data,
subscribe,
unsubscribe
} = useWebSocket('/ws/events');
useEffect(() => {
subscribe(['metrics', 'alerts']);
return () => unsubscribe(['metrics', 'alerts']);
}, []);
if (!connected) {
return <ConnectionStatus status="reconnecting" />;
}
return (
<div>
<MetricCard value={data.metrics?.qps} label="QPS" />
<MetricCard value={data.metrics?.latency_p99} label="P99" />
<AlertList alerts={data.alerts} />
</div>
);
}Connection Management
Automatic Features
- Auto-reconnect: Exponential backoff with jitter (1s, 2s, 4s... up to 30s)
- Heartbeat: Ping/pong every 30s to detect stale connections
- State sync: Full state snapshot on reconnect to catch missed events
- Multiplexing: Single connection for all channels, message routing by type
Message Format
// Incoming message format
{
"type": "metrics",
"timestamp": "2024-12-22T10:30:00Z",
"data": {
"qps": 1250,
"latency_p50": 2.3,
"latency_p99": 15.7,
"memory_used_gb": 12.4,
"disk_io_mbps": 450
}
}
// Subscribe message
{
"action": "subscribe",
"channels": ["metrics", "jobs"]
}
// Unsubscribe message
{
"action": "unsubscribe",
"channels": ["alerts"]
}