Real-time Event Stream Monitor

Build a real-time monitoring application that connects to a Gradio streaming endpoint and processes Server-Sent Events (SSE) with support for multiple protocol versions.

Requirements

Your application should connect to a Gradio API endpoint that generates streaming data and:

1. Display all incoming events in real-time, categorizing them by type (data, status, log)
2. Track and display protocol information when available in status messages
3. Count and report the total number of messages received for each event type
4. Handle connection lifecycle gracefully, including cleanup on completion or errors
5. Support cancellation of the stream if needed

Input

• Gradio application URL (string)
• Endpoint name or ID (string or number)
• Input data for the endpoint (array)

Output

Your application should output:

• Each received event with its type and relevant content
• Protocol version information when detected
• Summary statistics showing total counts per event type

Implementation

@generates

API

/**
 * Monitors a streaming Gradio endpoint and processes SSE events
 * @param appUrl - The URL of the Gradio application
 * @param endpoint - The endpoint name or numeric ID
 * @param data - Input data array for the endpoint
 * @returns Promise that resolves when stream completes with event counts
 */
export async function monitorStream(
  appUrl: string,
  endpoint: string | number,
  data: unknown[]
): Promise<{
  dataEvents: number;
  statusEvents: number;
  logEvents: number;
}>;

/**
 * Monitors a streaming endpoint with cancellation support
 * @param appUrl - The URL of the Gradio application
 * @param endpoint - The endpoint name or numeric ID
 * @param data - Input data array for the endpoint
 * @param timeoutMs - Optional timeout in milliseconds after which to cancel
 * @returns Promise that resolves when stream completes or is cancelled
 */
export async function monitorStreamWithTimeout(
  appUrl: string,
  endpoint: string | number,
  data: unknown[],
  timeoutMs?: number
): Promise<{
  dataEvents: number;
  statusEvents: number;
  logEvents: number;
  cancelled: boolean;
}>;

Test Cases

Basic Stream Monitoring

• Given a valid Gradio app URL and streaming endpoint, the monitor connects successfully and receives events @test
• When events are received, they are categorized correctly by type (data, status, log) @test
• The monitor returns accurate counts of events received for each type @test

Protocol Detection

• When a status message contains protocol information, it is extracted and displayed @test

Connection Management

• The monitor properly closes the connection when the stream completes @test
• When a timeout is specified, the stream is cancelled after the timeout period @test

Dependencies { .dependencies }

@gradio/client { .dependency }

Provides client functionality for connecting to Gradio applications and handling SSE streaming.

@satisfied-by