Add real-time session updates via Server-Sent Events

Implements push-based real-time updates for the Sessions page. New sessions now appear instantly without manual reload or polling.

Changes:
- Add SSE event emitter for session creation notifications
- Create SSE stream endpoint at /api/websites/[id]/sessions/stream
- Emit session events in tracking endpoint when sessions are created
- Add useSessionStream hook to connect to SSE and invalidate queries
- Fix LoadingPanel to prevent flicker during background refetches
This commit is contained in:
Arthur Sepiol 2025-12-10 16:02:44 +03:00
parent 81e27fc18c
commit ef9a382cdd
7 changed files with 78 additions and 5 deletions

View file

@ -79,6 +79,7 @@ export * from './useNavigation';
export * from './usePagedQuery';
export * from './usePageParameters';
export * from './useRegionNames';
export * from './useSessionStream';
export * from './useSlug';
export * from './useSticky';
export * from './useTimezone';

View file

@ -0,0 +1,18 @@
import { useEffect } from 'react';
import { useQueryClient } from '@tanstack/react-query';
export function useSessionStream(websiteId: string) {
const queryClient = useQueryClient();
useEffect(() => {
if (!websiteId) return;
const eventSource = new EventSource(`/api/websites/${websiteId}/sessions/stream`);
eventSource.onmessage = () => {
queryClient.invalidateQueries({ queryKey: ['sessions'] });
};
return () => eventSource.close();
}, [websiteId, queryClient]);
}