feat: implement real-time dashboard updates via WebSockets

web/src/hooks/use-dashboard-stats.ts

@@ -40,8 +40,7 @@ interface UseDashboardStatsResult {
 }
 
 /**
- * Custom hook to fetch and auto-refresh dashboard statistics
- * Polls the API every 30 seconds
+ * Custom hook to fetch and auto-refresh dashboard statistics using WebSockets with HTTP fallback
  */
 export function useDashboardStats(): UseDashboardStatsResult {
     const [stats, setStats] = useState<DashboardStats | null>(null);
@@ -51,11 +50,7 @@ export function useDashboardStats(): UseDashboardStatsResult {
     const fetchStats = async () => {
         try {
             const response = await fetch("/api/stats");
-
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
             const data = await response.json();
             setStats(data);
             setError(null);
@@ -71,11 +66,65 @@ export function useDashboardStats(): UseDashboardStatsResult {
         // Initial fetch
         fetchStats();
 
-        // Set up polling every 30 seconds
-        const interval = setInterval(fetchStats, 30000);
+        // WebSocket setup
+        const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+        const wsUrl = `${protocol}//${window.location.host}/ws`;
+        let socket: WebSocket | null = null;
+        let reconnectTimeout: Timer | null = null;
+
+        const connect = () => {
+            socket = new WebSocket(wsUrl);
+
+            socket.onopen = () => {
+                console.log("🟢 [WS] Connected to dashboard live stream");
+                setError(null);
+                if (reconnectTimeout) {
+                    clearTimeout(reconnectTimeout);
+                    reconnectTimeout = null;
+                }
+            };
+
+            socket.onmessage = (event) => {
+                try {
+                    const message = JSON.parse(event.data);
+
+                    if (message.type === "STATS_UPDATE") {
+                        setStats(message.data);
+                    } else if (message.type === "NEW_EVENT") {
+                        setStats(prev => {
+                            if (!prev) return prev;
+                            return {
+                                ...prev,
+                                recentEvents: [message.data, ...prev.recentEvents].slice(0, 10)
+                            };
+                        });
+                    }
+                } catch (e) {
+                    console.error("Error parsing WS message:", e);
+                }
+            };
+
+            socket.onclose = () => {
+                console.log("🟠 [WS] Connection lost. Attempting reconnect in 5s...");
+                reconnectTimeout = setTimeout(connect, 5000);
+            };
+
+            socket.onerror = (err) => {
+                console.error("🔴 [WS] Socket error:", err);
+                socket?.close();
+            };
+        };
+
+        connect();
 
         // Cleanup on unmount
-        return () => clearInterval(interval);
+        return () => {
+            if (socket) {
+                socket.onclose = null; // Prevent reconnect on intentional close
+                socket.close();
+            }
+            if (reconnectTimeout) clearTimeout(reconnectTimeout);
+        };
     }, []);
 
     return { stats, loading, error };