TL;DR
Verwenden Sie Server-Sent Events (SSE), um API-Antworten über HTTP zu streamen. Senden Sie Content-Type: text/event-stream und schreiben Sie Events als data: {json}\n\n. SSE eignet sich für das Streaming von KI-Antworten, Fortschrittsaktualisierungen und Live-Feeds. Modern PetstoreAPI verwendet SSE für KI-Haustierempfehlungen und Statusaktualisierungen von Bestellungen.
Einleitung
Ihre API generiert KI-Empfehlungen für Haustiere. Die Antwort dauert 10 Sekunden. Lassen Sie Benutzer warten, oder streamen Sie Ergebnisse, sobald sie generiert werden?
Mit Server-Sent Events (SSE) streamen Sie Antworten in Echtzeit. Benutzer sehen die Ergebnisse sofort, während die KI sie generiert, was ein besseres Erlebnis schafft.
Modern PetstoreAPI verwendet SSE für KI-Haustierempfehlungen, Statusaktualisierungen von Bestellungen und Bestandsänderungen.
Wenn Sie Streaming-APIs testen, unterstützt Apidog SSE-Tests und -Validierung.
Grundlagen von SSE
SSE ist ein HTTP-basiertes unidirektionales Streaming vom Server zum Client.
SSE-Format
Content-Type: text/event-stream
Cache-Control: no-cache
data: {"message":"First chunk"}\n\n
data: {"message":"Second chunk"}\n\n
data: {"message":"Third chunk"}\n\n
Jedes Event:
- Beginnt mit
data: - Enthält die Nutzlast
- Endet mit
\n\n(zwei Zeilenumbrüche)
Benannte Events
event: recommendation
data: {"petId":"019b4132","score":0.95}
event: recommendation
data: {"petId":"019b4127","score":0.89}
event: complete
data: {"total":2}
Event-IDs
id: 1
data: {"message":"First"}
id: 2
data: {"message":"Second"}
Der Client kann nach einer Unterbrechung ab der letzten ID fortfahren.
Implementierung des SSE-Servers
Node.js/Express Beispiel
app.get('/v1/pets/recommendations/stream', async (req, res) => {
// Set SSE headers
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// Send recommendations as they're generated
const recommendations = await generateRecommendations(req.query.userId);
for (const rec of recommendations) {
res.write(`data: ${JSON.stringify(rec)}\n\n`);
await sleep(100); // Simulate streaming delay
}
// Send completion event
res.write(`event: complete\ndata: {"total":${recommendations.length}}\n\n`);
res.end();
});
Python/FastAPI Beispiel
from fastapi import FastAPI
from fastapi.responses import StreamingResponse
import json
import asyncio
app = FastAPI()
@app.get("/v1/pets/recommendations/stream")
async def stream_recommendations(user_id: str):
async def generate():
recommendations = await get_recommendations(user_id)
for rec in recommendations:
yield f"data: {json.dumps(rec)}\n\n"
await asyncio.sleep(0.1)
yield f"event: complete\ndata: {json.dumps({'total': len(recommendations)})}\n\n"
return StreamingResponse(
generate(),
media_type="text/event-stream",
headers={
"Cache-Control": "no-cache",
"Connection": "keep-alive"
}
)
Implementierung des SSE-Clients
JavaScript/Browser
const eventSource = new EventSource(
'https://petstoreapi.com/v1/pets/recommendations/stream?userId=user-456'
);
eventSource.onmessage = (event) => {
const data = JSON.parse(event.data);
displayRecommendation(data);
};
eventSource.addEventListener('complete', (event) => {
const data = JSON.parse(event.data);
console.log(`Received ${data.total} recommendations`);
eventSource.close();
});
eventSource.onerror = (error) => {
console.error('SSE error:', error);
eventSource.close();
};
React Hook
import { useEffect, useState } from 'react';
function useSSE(url) {
const [data, setData] = useState([]);
const [complete, setComplete] = useState(false);
useEffect(() => {
const eventSource = new EventSource(url);
eventSource.onmessage = (event) => {
const item = JSON.parse(event.data);
setData(prev => [...prev, item]);
};
eventSource.addEventListener('complete', () => {
setComplete(true);
eventSource.close();
});
return () => eventSource.close();
}, [url]);
return { data, complete };
}
// Usage
function Recommendations({ userId }) {
const { data, complete } = useSSE(
`https://petstoreapi.com/v1/pets/recommendations/stream?userId=${userId}`
);
return (
<div>
{data.map(rec => (
<PetCard key={rec.petId} pet={rec} />
))}
{!complete && <Spinner />}
</div>
);
}
Wie Modern PetstoreAPI SSE verwendet
KI-Haustierempfehlungen
Streamen Sie KI-generierte Empfehlungen:
GET /v1/pets/recommendations/stream?userId=user-456
Accept: text/event-stream
event: recommendation
data: {"petId":"019b4132","name":"Fluffy","score":0.95,"reason":"Matches your preference for cats"}
event: recommendation
data: {"petId":"019b4127","name":"Buddy","score":0.89,"reason":"Similar to pets you liked"}
event: complete
data: {"total":2,"processingTime":850}
Statusaktualisierungen von Bestellungen
Streamen Sie die Bestellabwicklungsschritte:
GET /v1/orders/019b4132/status/stream
Accept: text/event-stream
data: {"status":"payment_processing","timestamp":"2026-03-13T10:30:00Z"}
data: {"status":"payment_confirmed","timestamp":"2026-03-13T10:30:02Z"}
data: {"status":"preparing_shipment","timestamp":"2026-03-13T10:30:05Z"}
event: complete
data: {"status":"shipped","trackingNumber":"1Z999AA10123456784"}
Bestandsänderungen
Streamen Sie Bestandsaktualisierungen in Echtzeit:
GET /v1/inventory/stream
Accept: text/event-stream
event: stock-change
data: {"petId":"019b4132","oldStock":5,"newStock":4}
event: price-change
data: {"petId":"019b4127","oldPrice":299.99,"newPrice":279.99}
Siehe Modern PetstoreAPI SSE-Dokumentation.
Testen von SSE mit Apidog
Apidog unterstützt SSE-Tests:
- SSE-Anfrage erstellen
- Setzen Sie
Accept: text/event-stream - Verbinden und Events in Echtzeit anzeigen
- Event-Format validieren
- Wiederverbindung testen
Bewährte Methoden
1. Richtige Header setzen
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
res.setHeader('X-Accel-Buffering', 'no'); // Nginx-Buffering deaktivieren
2. Heartbeats senden
Verbindung am Leben halten:
const heartbeat = setInterval(() => {
res.write(': heartbeat\n\n');
}, 15000);
res.on('close', () => clearInterval(heartbeat));
3. Fehler elegant behandeln
eventSource.onerror = (error) => {
if (eventSource.readyState === EventSource.CLOSED) {
// Verbindung geschlossen, wird automatisch wiederhergestellt
} else {
// Anderer Fehler
console.error('SSE error:', error);
}
};
4. Event-IDs zum Fortsetzen verwenden
let lastEventId = 0;
app.get('/stream', (req, res) => {
const startId = parseInt(req.headers['last-event-id'] || '0');
for (let i = startId + 1; i <= 100; i++) {
res.write(`id: ${i}\ndata: {"message":"Event ${i}"}\n\n`);
}
});
5. Verbindungen schließen
// Client
eventSource.addEventListener('complete', () => {
eventSource.close();
});
// Server
res.on('close', () => {
// Ressourcen bereinigen
});
Fazit
SSE ist perfekt für das Streaming von API-Antworten. Es ist einfacher als WebSocket für die unidirektionale Kommunikation, funktioniert über HTTP und handhabt die Wiederverbindung automatisch.
Modern PetstoreAPI verwendet SSE für KI-Streaming, Bestellaktualisierungen und Live-Feeds. Testen Sie SSE-Endpunkte mit Apidog.
FAQ
Kann SSE durch Unternehmensfirewalls funktionieren?
Ja, SSE verwendet standardmäßiges HTTP/HTTPS, daher funktioniert es durch die meisten Firewalls und Proxies.
Wie lange können SSE-Verbindungen offen bleiben?
Unbegrenzt, aber verwenden Sie Heartbeats alle 15-30 Sekunden, um Verbindungen über Proxies hinweg am Leben zu erhalten.
Kann ich Binärdaten über SSE senden?
Nein, SSE ist nur Text. Kodieren Sie Binärdaten Base64-kodiert oder verwenden Sie stattdessen WebSocket.
Unterstützt SSE bidirektionale Kommunikation?
Nein, SSE ist nur server-zu-client. Clients verwenden reguläre HTTP-Anfragen für die Client-zu-Server-Kommunikation.
Wie viele SSE-Verbindungen kann ein Browser haben?
Browser begrenzen SSE-Verbindungen pro Domain (typischerweise 6). Verwenden Sie Multiplexing oder WebSocket für viele Verbindungen.