Sebastian Krüger
25d9029d14
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 1m11s
Features added: - Created SSE (Server-Sent Events) endpoint at /api/supervisor/events - Polls supervisor every 2 seconds for state changes - Sends process-update events when state changes detected - Sends heartbeat events to keep connection alive - Includes error handling with error events - Created useEventSource hook for managing SSE connections - Automatic reconnection with exponential backoff - Configurable max reconnection attempts (default 10) - Connection status tracking (connecting, connected, disconnected, error) - Clean event listener management with proper cleanup - Heartbeat monitoring for connection health - Created ConnectionStatus component - Visual status indicator with icons (Wifi, WifiOff, Loader, AlertCircle) - Color-coded states (green=connected, yellow=connecting, red=error) - Shows reconnection attempt count - Manual reconnect button when disconnected/error - Integrated real-time updates into dashboard and processes pages - Auto-refresh process data when state changes occur - Connection status indicator in page headers - No manual refresh needed for live updates - Implemented proper cleanup on unmount - EventSource properly closed - Reconnection timeouts cleared - No memory leaks 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import { NextRequest } from 'next/server';
|
|
import { createSupervisorClient } from '@/lib/supervisor/client';
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
/**
|
|
* Server-Sent Events endpoint for real-time process state updates
|
|
* Polls supervisor every 2 seconds and sends state changes to clients
|
|
*/
|
|
export async function GET(request: NextRequest) {
|
|
const encoder = new TextEncoder();
|
|
let intervalId: NodeJS.Timeout | null = null;
|
|
let previousState: string | null = null;
|
|
|
|
const stream = new ReadableStream({
|
|
async start(controller) {
|
|
// Helper to send SSE message
|
|
const sendEvent = (event: string, data: any) => {
|
|
const message = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
|
|
controller.enqueue(encoder.encode(message));
|
|
};
|
|
|
|
// Send initial connection message
|
|
sendEvent('connected', { timestamp: Date.now() });
|
|
|
|
// Poll supervisor for state changes
|
|
const pollSupervisor = async () => {
|
|
try {
|
|
const client = createSupervisorClient();
|
|
const processes = await client.getAllProcessInfo();
|
|
|
|
// Create state snapshot
|
|
const currentState = JSON.stringify(
|
|
processes.map((p) => ({
|
|
name: `${p.group}:${p.name}`,
|
|
state: p.state,
|
|
pid: p.pid,
|
|
statename: p.statename,
|
|
}))
|
|
);
|
|
|
|
// Send update if state changed
|
|
if (currentState !== previousState) {
|
|
sendEvent('process-update', {
|
|
processes,
|
|
timestamp: Date.now(),
|
|
});
|
|
previousState = currentState;
|
|
}
|
|
|
|
// Send heartbeat every poll
|
|
sendEvent('heartbeat', { timestamp: Date.now() });
|
|
} catch (error: any) {
|
|
console.error('SSE polling error:', error);
|
|
sendEvent('error', {
|
|
message: error.message || 'Failed to fetch process state',
|
|
timestamp: Date.now(),
|
|
});
|
|
}
|
|
};
|
|
|
|
// Initial poll
|
|
await pollSupervisor();
|
|
|
|
// Poll every 2 seconds
|
|
intervalId = setInterval(pollSupervisor, 2000);
|
|
},
|
|
|
|
cancel() {
|
|
if (intervalId) {
|
|
clearInterval(intervalId);
|
|
}
|
|
},
|
|
});
|
|
|
|
return new Response(stream, {
|
|
headers: {
|
|
'Content-Type': 'text/event-stream',
|
|
'Cache-Control': 'no-cache, no-transform',
|
|
'Connection': 'keep-alive',
|
|
'X-Accel-Buffering': 'no', // Disable nginx buffering
|
|
},
|
|
});
|
|
}
|