
Echtzeit-Webfunktionen erfordern entwederWebSocketsoderVom Server gesendete Ereignisse (SSE). Beide übertragen Daten vom Server zum Client, funktionieren jedoch unterschiedlich. Im Jahr 2026 hat SSE für KI-Streaming an Popularität gewonnen, während WebSockets für die bidirektionale Kommunikation weiterhin unverzichtbar sind. Dieser Leitfaden erklärt beides mit Code und hilft Ihnen bei der Auswahl.
📋 Table of Contents
WebSockets: Vollduplex
WebSockets erstellen eine dauerhafte TCP-Verbindung. Sowohl Client als auch Server können jederzeit Nachrichten senden – echter Vollduplex. Verwendet für: Chat-Apps, Tools für die Zusammenarbeit, Live-Gaming, Handelsplattformen.
# FastAPI WebSocket server
from fastapi import FastAPI, WebSocket
app = FastAPI()
connected = []
@app.websocket('/ws')
async def websocket_endpoint(ws: WebSocket):
await ws.accept()
connected.append(ws)
try:
while True:
data = await ws.receive_text()
# Broadcast to all clients
for client in connected:
await client.send_text(f'Message: {data}')
except:
connected.remove(ws)
// Browser WebSocket client
const ws = new WebSocket('wss://example.com/ws');
ws.onopen = () => console.log('Connected');
ws.onmessage = (e) => console.log('Received:', e.data);
ws.onerror = (e) => console.error('Error:', e);
ws.onclose = () => console.log('Disconnected');
// Send message
ws.send('Hello server!');
Vom Server gesendete Ereignisse (SSE): Einweg-Push
SSE verwendet eine reguläre HTTP-Verbindung, über die der Server Ereignisse streamt. Der Client kann keine Daten zurücksenden (verwenden Sie hierfür separate HTTP-Anfragen). Stellt die Verbindung beim Trennen automatisch wieder her. Funktioniert über HTTP/2-Multiplexing. Verwendet für: Live-Feeds, KI-Antwort-Streaming, Benachrichtigungen, Fortschrittsbalken.
# FastAPI SSE server
from fastapi import FastAPI
from fastapi.responses import StreamingResponse
import asyncio
app = FastAPI()
@app.get('/stream')
async def stream():
async def event_generator():
for i in range(10):
yield f'data: Message {i}\n\n'
await asyncio.sleep(1)
return StreamingResponse(
event_generator(),
media_type='text/event-stream'
)
// Browser SSE client
const evtSource = new EventSource('/stream');
evtSource.onmessage = (e) => {
console.log('Received:', e.data);
};
evtSource.onerror = (e) => {
console.error('Error:', e);
// EventSource auto-reconnects after error
};
// Close when done
evtSource.close();
KI-Streaming mit SSE (Muster 2026)
LLM-APIs (Claude, OpenAI) streamen Antworten über SSE. Hier ist das Muster, um Claude-Streaming an den Browser weiterzuleiten.
import anthropic
from fastapi.responses import StreamingResponse
client = anthropic.Anthropic()
@app.post('/ask')
async def ask(question: str):
async def generate():
with client.messages.stream(
model='claude-sonnet-4-5',
max_tokens=1024,
messages=[{'role': 'user', 'content': question}]
) as stream:
for text in stream.text_stream:
yield f'data: {text}\n\n'
yield 'data: [DONE]\n\n'
return StreamingResponse(generate(), media_type='text/event-stream')
Vergleich
- WebSockets:Bidirektionales, persistentes TCP, Binär oder Text, manuelle Wiederverbindung
- SSE:Nur Server-zu-Client, HTTP, nur Text, automatische Wiederverbindung, einfacher
- WebSockets-Overhead:Komplexeres Setup (Upgrade-Handshake, Statusverwaltung)
- SSE-Overhead:Minimal – funktioniert mit jedem HTTP-Server, CDN-freundlich
Wann sollte welches
- verwendet werden? WebSockets:Chat, Multiplayer-Spiele, gemeinsame Bearbeitung (Google Docs-Stil)
- SSE:KI-Antwort-Streaming, Live-Feeds, Benachrichtigungen, Fortschrittsaktualisierungen
- Weder:Eine Abfrage alle 30 Sekunden oder mehr ist einfacher und reicht für Aktualisierungen mit geringer Häufigkeit
oft aus Fazit
Im Jahr 2026 ist SSE die richtige Wahl für die meisten Echtzeitfunktionen – einfacher, funktioniert über HTTP/2, CDN-freundlich und perfekt für KI-Streaming. Wählen Sie WebSockets nur, wenn Sie echte bidirektionale Kommunikation benötigen. Beginnen Sie mit SSE und aktualisieren Sie auf WebSockets, wenn Sie an seine Grenzen stoßen.
🔗 Share this article
✍️ Leave a Comment