Server-Sent Events

Einfach erklärt

Klassische HTTP-Anfragen sind Request-Response: Der Client fragt, der Server antwortet, die Verbindung ist geschlossen. Für Echtzeit-Updates müsste der Client ständig neu anfragen (Polling) – ineffizient.

SSE hält die Verbindung offen: Der Server kann jederzeit neue Daten senden, ohne dass der Client erneut fragt. Das ist der Grund, warum ChatGPT Tokens einzeln erscheinen statt alles auf einmal: Das Modell streamt über SSE, Token für Token.

SSE vs. WebSockets vs. Polling:

Aspekt	Polling	SSE	WebSockets
Richtung	Client → Server	Server → Client	Bidirektional
Protokoll	HTTP	HTTP	WS
Reconnect	Manuell	Automatisch	Manuell
Komplexität	Niedrig	Niedrig	Mittel
Use Case	Einfache Updates	Streaming, Feeds	Chat, Games

Technischer Deep Dive

Server-Implementierung (Node.js / Express)

app.get('/api/generate', async (req, res) => {
  const { prompt } = req.query;

  // SSE-Headers setzen
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // LLM-Stream
  const stream = await openai.chat.completions.create({
    model: 'gpt-5',
    messages: [{ role: 'user', content: prompt }],
    stream: true,
  });

  for await (const chunk of stream) {
    const token = chunk.choices[0]?.delta?.content || '';
    if (token) {
      res.write(`data: ${JSON.stringify({ token })}\n\n`);
    }
  }

  res.write('data: [DONE]\n\n');
  res.end();
});

Client-Implementierung (Browser)

const source = new EventSource(`/api/generate?prompt=${encodeURIComponent(prompt)}`);
let output = '';

source.onmessage = (event) => {
  if (event.data === '[DONE]') {
    source.close();
    return;
  }
  const { token } = JSON.parse(event.data);
  output += token;
  document.getElementById('output').textContent = output;
};

source.onerror = () => source.close();

SSE-Datenformat

id: 1
event: token
data: {"token": "Hallo"}

id: 2
event: token
data: {"token": " Welt"}

data: [DONE]