WebSocket Integration for Real-Time Frontend Updates

[ElioNeto]

WebSocket Integration for Real-Time Frontend Updates

Integrate WebSocket connectivity into the Angular frontend to receive real-time updates from the backend (PubSub events, CDC events, compaction status, etc.).

Backend Endpoints Needed

WS /ws/events               — Main event stream (requires auth token as query param)
                             Events: key_change, compaction_status, health_change, sync_event

Event Types

// Key change notification
{ "type": "key_change", "operation": "put|delete", "key": "...", "cf": "default", "timestamp": 123456 }

// Compaction status
{ "type": "compaction_status", "status": "started|completed|failed", "cf": "default", "details": {} }

// Health change
{ "type": "health_change", "probe": "liveness|readiness|startup", "status": "healthy|unhealthy" }

// Sync event
{ "type": "sync_event", "status": "started|completed|conflict", "details": {} }

Frontend Requirements

WebSocket Service

• Connection: Connect when user is authenticated
• Reconnection: Exponential backoff on disconnection
• Authentication: Send token on connect
• Heartbeat: Ping/pong to keep connection alive
• Fallback: Polling when WebSocket unavailable

Integration Points

• Dashboard: Live update stats when keys change
• Key Explorer: Notify when another client modifies a key
• Compaction Page: Real-time compaction progress
• Health Page: Instant health status changes
• Snapshots: Real-time snapshot creation events

Service Architecture

// Proposed service
@Injectable({ providedIn: root })
export class WebSocketService {
  // Observable streams
  events$: Observable<ServerEvent>;
  connectionStatus$: Observable<connected | disconnected | reconnecting>;
  
  // Subscribe to specific event types
  onKeyChanges(): Observable<KeyChangeEvent>;
  onCompactionEvents(): Observable<CompactionEvent>;
  onHealthEvents(): Observable<HealthEvent>;
  
  // Connection management
  connect(token: string): void;
  disconnect(): void;
}

Acceptance Criteria

• WebSocket connects on authentication
• Events are received and parsed correctly
• Components react to events (stats update, etc.)
• Reconnection works on connection loss
• Fallback to polling when WebSocket fails
• Disconnect on logout
• Unit tests for service

Parent Epic

#290

[ElioNeto]

Resolved via feat/notes-engine-v2 branch (PR #321)

[ElioNeto]

Skipping - requires WebSocket transport layer implementation. Needs manual triage for backend WebSocket support.

[ElioNeto]

Resolved by commit 925d7d6 in feat/notes-engine-v2 (PR #321)