⚡Echtzeit

Server-Sent Events / Streaming

Live-Updates ohne WebSocket-Overhead

Server-Sent Events sind der einfachste Weg fuer Live-Updates vom Server zum Client. Kein WebSocket-Setup, keine extra Library. Perfekt fuer Chat-Streams, Notifications und Live-Dashboards.

Pro-Tip — Der schnelle Weg

SSE ist unidirektional, nur Server zu Client. Wenn du bidirektionale Kommunikation brauchst, nutze WebSockets. Fuer die meisten Use Cases wie Chat-Streaming reicht SSE voellig aus.

Seite 1

Streaming Route erstellen

Erstelle einen Route Handler der einen ReadableStream zurueckgibt. Der Stream bleibt offen und sendet Events bis er geschlossen wird.

// app/api/stream/route.ts
export async function GET() {
const stream = new ReadableStream({
async start(controller) {
const encoder = new TextEncoder();
for (let i = 0; i < 10; i++) {
controller.enqueue(encoder.encode(`data: Nachricht ${i}\n\n`));
await new Promise(r => setTimeout(r, 1000));
}
controller.close();
},
});
return new Response(stream, {
headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', Connection: 'keep-alive' },
});
}

Client-Side EventSource

Nutze die native EventSource API im Browser um den Stream zu empfangen. Sie reconnected automatisch bei Verbindungsabbruch.

'use client';
import { useEffect, useState } from 'react';

export function LiveFeed() {
const [messages, setMessages] = useState<string[]>([]);

useEffect(() => {
const es = new EventSource('/api/stream');
es.onmessage = (e) => setMessages(prev => [...prev, e.data]);
es.onerror = () => es.close();
return () => es.close();
}, []);

return <ul>{messages.map((m, i) => <li key={i}>{m}</li>)}</ul>;
}

KI-Chat Streaming

Der haeufigste Use Case: KI-Antworten Token fuer Token streamen. Hier ein Beispiel mit der OpenAI API.

export async function POST(request: Request) {
const { prompt } = await request.json();
const response = await openai.chat.completions.create({
model: 'gpt-4',
messages: [{ role: 'user', content: prompt }],
stream: true,
});
const stream = new ReadableStream({
async start(controller) {
const encoder = new TextEncoder();
for await (const chunk of response) {
const text = chunk.choices[0]?.delta?.content || '';
controller.enqueue(encoder.encode(`data: ${text}\n\n`));
}
controller.close();
},
});
return new Response(stream, { headers: { 'Content-Type': 'text/event-stream' } });
}

Streaming mit fetch konsumieren

Fuer POST-Requests kannst du nicht EventSource nutzen. Lies den Stream stattdessen mit fetch und einem Reader.

async function streamChat(prompt: string) {
const res = await fetch('/api/chat', {
method: 'POST',
body: JSON.stringify({ prompt }),
});
const reader = res.body!.getReader();
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
const text = decoder.decode(value);
console.log(text); // Token fuer Token
}
}

Seite 2

Warum das funktioniert

Einfacher als WebSockets weil es normales HTTP nutzt
Automatische Reconnection ist im Browser eingebaut
Perfekt fuer KI-Streaming wo nur der Server sendet
Kein extra Server-Setup noetig, funktioniert mit normalen Route Handlers

Tipps

EventSource reconnected automatisch, du musst keinen Retry-Mechanismus bauen
Sende ein keep-alive Ping alle 30 Sekunden damit die Verbindung nicht abbricht
SSE funktioniert ueber HTTP, kein spezielles Protokoll oder Port noetig
Fuer mehrere Event-Typen nutze benannte Events mit event: field

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen