Real-World Architecture Pattern

Webhooks + SSE

How to build real-time UIs with a backend, queue, and workers

The Full Picture

Real-Time Architecture

Click play to start

FrontendReact App

Backend APINext.js / Express

QueueRedis / SQS / RabbitMQ

WorkerBackground Process

event log

> waiting for sequence to start...

Server-Sent Events

SSE: The Frontend Connection

The browser opens a persistent connection. The server pushes events down as they happen.

Server (API)

idle

// events will appear here

Frontend (React)

Report GeneratorIdle

report_42.pdf2.4 MB

charts.png890 KB

Implementation

How to Build It

// useReportStatus.ts
import { useEffect, useState } from "react"

export function useReportStatus(reportId: string) {
  const [status, setStatus] = useState("pending")
  const [progress, setProgress] = useState(0)

  useEffect(() => {
    // Open SSE connection to backend
    const source = new EventSource(
      `/api/reports/${reportId}/stream`
    )

    source.addEventListener("progress", (e) => {
      const data = JSON.parse(e.data)
      setProgress(data.percent)
      setStatus(data.step)
    })

    source.addEventListener("complete", (e) => {
      const data = JSON.parse(e.data)
      setProgress(100)
      setStatus("done")
      source.close()
    })

    source.onerror = () => source.close()
    return () => source.close()
  }, [reportId])

  return { status, progress }
}