Server-Sent Events

Subscribe to real-time job status updates using Server-Sent Events (SSE).

Overview

Server-Sent Events provide a persistent connection for streaming job updates from the server to your client in real-time.

Real-Time Updates

Get instant notifications as job status changes

Progress Tracking

Monitor processing progress for long-running jobs

Simple Protocol

Built on standard HTTP, easy to implement

Stream Job Updates

GET /api/v1/jobs/{id}/stream

Event Types

Event	Description
`status`	Job status changed
`progress`	Processing progress update
`complete`	Job completed (success or failure)
`error`	Error occurred

Example Stream

event: status
data: {"status":"pending","message":"Job queued"}

event: status
data: {"status":"processing","message":"Processing started"}

event: progress
data: {"percent":50,"message":"Processing frame 50/100"}

event: complete
data: {"status":"completed","result":{...}}

Client Implementation

const eventSource = new EventSource(
  `http://localhost:8080/api/v1/jobs/${jobId}/stream`
);

eventSource.addEventListener('status', (e) => {
  const data = JSON.parse(e.data);
  console.log('Status:', data.status);
  updateUI(data);
});

eventSource.addEventListener('progress', (e) => {
  const data = JSON.parse(e.data);
  console.log('Progress:', data.percent + '%');
  updateProgressBar(data.percent);
});

eventSource.addEventListener('complete', (e) => {
  const data = JSON.parse(e.data);
  console.log('Completed:', data);
  eventSource.close();
  showResult(data);
});

eventSource.addEventListener('error', (e) => {
  console.error('Error:', e);
  eventSource.close();
});

import { useEffect, useState } from 'react';

function JobMonitor({ jobId }) {
  const [status, setStatus] = useState('pending');
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const eventSource = new EventSource(
      `/api/v1/jobs/${jobId}/stream`
    );

    eventSource.addEventListener('status', (e) => {
      const data = JSON.parse(e.data);
      setStatus(data.status);
    });

    eventSource.addEventListener('progress', (e) => {
      const data = JSON.parse(e.data);
      setProgress(data.percent);
    });

    eventSource.addEventListener('complete', (e) => {
      eventSource.close();
    });

    return () => eventSource.close();
  }, [jobId]);

  return (
    <div>
      <p>Status: {status}</p>
      <progress value={progress} max="100" />
    </div>
  );
}

import sseclient
import requests
import json

response = requests.get(
    f'http://localhost:8080/api/v1/jobs/{job_id}/stream',
    stream=True,
    headers={'Accept': 'text/event-stream'}
)

client = sseclient.SSEClient(response)
for event in client.events():
    data = json.loads(event.data)

    if event.event == 'status':
        print(f"Status: {data['status']}")
    elif event.event == 'progress':
        print(f"Progress: {data['percent']}%")
    elif event.event == 'complete':
        print(f"Completed: {data}")
        break

Use Cases

Progress Bars

Show real-time progress in your UI

Live Dashboards

Monitor multiple jobs simultaneously

Notifications

Trigger UI notifications on status changes

Best Practices

Next Steps

Learn about Webhooks
Explore Job Management
Check Job Status