ÖNEMLİ (TL;DR)
HTTP üzerinden API yanıtlarını yayınlamak için Sunucu Tarafından Gönderilen Olayları (SSE) kullanın. Content-Type: text/event-stream gönderin ve olayları data: {json}\n\n şeklinde yazın. SSE, yapay zeka yanıt akışı, ilerleme güncellemeleri ve canlı yayınlar için çalışır. Modern PetstoreAPI, yapay zeka evcil hayvan önerileri ve sipariş durumu güncellemeleri için SSE kullanır.
Giriş
API'nız evcil hayvanlar için yapay zeka önerileri oluşturuyor. Yanıt 10 saniye sürüyor. Kullanıcıları bekletir misiniz, yoksa sonuçları oluştukça mı yayınlarsınız?
Sunucu Tarafından Gönderilen Olaylar (SSE) ile yanıtları gerçek zamanlı olarak yayınlarsınız. Yapay zeka sonuçları oluşturdukça kullanıcılar anında görür ve bu da daha iyi bir deneyim yaratır.
Modern PetstoreAPI, yapay zeka evcil hayvan önerileri, sipariş durumu güncellemeleri ve envanter değişiklikleri için SSE kullanır.
Yayın API'larını test ediyorsanız, Apidog SSE testi ve doğrulamasını destekler.
SSE Temelleri
SSE, sunucudan istemciye HTTP tabanlı tek yönlü bir yayın akışıdır.
SSE Biçimi
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
Her olay:
data:ile başlar- Yükü içerir
\n\n(iki yeni satır) ile biter
Adlandırılmış Olaylar
event: recommendation
data: {"petId":"019b4132","score":0.95}
event: recommendation
data: {"petId":"019b4127","score":0.89}
event: complete
data: {"total":2}
Olay Kimlikleri
id: 1
data: {"message":"First"}
id: 2
data: {"message":"Second"}
İstemci, bağlantı kesilirse son kimlikten devam edebilir.
SSE Sunucusunu Uygulama
Node.js/Express Örneği
app.get('/v1/pets/recommendations/stream', async (req, res) => {
// SSE başlıklarını ayarla
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// Öneriler oluştukça gönder
const recommendations = await generateRecommendations(req.query.userId);
for (const rec of recommendations) {
res.write(`data: ${JSON.stringify(rec)}\n\n`);
await sleep(100); // Yayın gecikmesini simüle et
}
// Tamamlama olayını gönder
res.write(`event: complete\ndata: {"total":${recommendations.length}}\n\n`);
res.end();
});
Python/FastAPI Örneği
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"
}
)
SSE İstemci Uygulaması
JavaScript/Tarayıcı
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 };
}
// Kullanım
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>
);
}
Modern PetstoreAPI SSE'yi Nasıl Kullanır?
Yapay Zeka Evcil Hayvan Önerileri
Yapay zeka tarafından oluşturulan önerileri yayınlayın:
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}
Sipariş Durumu Güncellemeleri
Sipariş işleme adımlarını yayınlayın:
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"}
Envanter Değişiklikleri
Gerçek zamanlı envanter güncellemelerini yayınlayın:
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}
Modern PetstoreAPI SSE belgelerine bakın.
Apidog ile SSE Test Etme
Apidog SSE testini destekler:
- SSE isteği oluşturun
Accept: text/event-streamolarak ayarlayın- Bağlanın ve olayları gerçek zamanlı görüntüleyin
- Olay biçimini doğrulayın
- Yeniden bağlantıyı test edin
En İyi Uygulamalar
1. Doğru Başlıkları Ayarlayın
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 arabelleğini devre dışı bırak
2. Kalp Atışı Gönderin
Bağlantıyı canlı tutun:
const heartbeat = setInterval(() => {
res.write(': heartbeat\n\n');
}, 15000);
res.on('close', () => clearInterval(heartbeat));
3. Hataları Zarifçe Yönetin
eventSource.onerror = (error) => {
if (eventSource.readyState === EventSource.CLOSED) {
// Bağlantı kapandı, otomatik olarak yeniden bağlanacak
} else {
// Diğer hata
console.error('SSE error:', error);
}
};
4. Devam Etmek İçin Olay Kimliklerini Kullanın
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. Bağlantıları Kapatın
// İstemci
eventSource.addEventListener('complete', () => {
eventSource.close();
});
// Sunucu
res.on('close', () => {
// Kaynakları temizle
});
Sonuç
SSE, API yanıtlarını yayınlamak için mükemmeldir. Tek yönlü iletişim için WebSocket'ten daha basittir, HTTP üzerinden çalışır ve yeniden bağlantıyı otomatik olarak yönetir.
Modern PetstoreAPI, yapay zeka akışı, sipariş güncellemeleri ve canlı yayınlar için SSE kullanır. SSE uç noktalarını Apidog ile test edin.
Sıkça Sorulan Sorular
SSE kurumsal güvenlik duvarları üzerinden çalışabilir mi?
Evet, SSE standart HTTP/HTTPS kullanır, bu nedenle çoğu güvenlik duvarı ve proxy üzerinden çalışır.
SSE bağlantıları ne kadar süre açık kalabilir?
Süresiz olarak, ancak proxy'ler aracılığıyla bağlantıları canlı tutmak için her 15-30 saniyede bir kalp atışı gönderin.
SSE üzerinden ikili veri gönderebilir miyim?
Hayır, SSE yalnızca metin tabanlıdır. İkili verileri Base64 kodlayın veya bunun yerine WebSocket kullanın.
SSE çift yönlü iletişimi destekler mi?
Hayır, SSE yalnızca sunucudan istemciye doğrudur. İstemciler, istemciden sunucuya iletişim için normal HTTP isteklerini kullanır.
Bir tarayıcı kaç SSE bağlantısına sahip olabilir?
Tarayıcılar, alan başına SSE bağlantılarını sınırlar (genellikle 6). Birçok bağlantı için çoklama (multiplexing) veya WebSocket kullanın.