WebSocket ve Server-Sent Events: Gerçek Zamanlı API'ler için Hangisi Daha İyi?

TL;DR

Tek yönlü sunucudan istemciye bildirimler ve canlı akışlar gibi güncellemeler için Sunucu Tarafından Gönderilen Olayları (SSE) kullanın. Sohbet ve oyun gibi çift yönlü iletişim için WebSocket kullanın. SSE daha basittir ve HTTP üzerinden çalışır. WebSocket daha karmaşıktır ancak iki yönlü mesajlaşmayı destekler. Modern PetstoreAPI, farklı gerçek zamanlı kullanım durumları için her ikisini de uygular.

Giriş

API'nızda gerçek zamanlı güncellemelere ihtiyacınız var. Bir evcil hayvanın durumu "mevcut"tan "evlat edinildi"ye değişir; istemcilerin bunu hemen bilmesi gerekir. WebSocket mi yoksa Sunucu Tarafından Gönderilen Olaylar (SSE) mı kullanırsınız?

Çoğu geliştirici, "daha güçlü" olduğu için varsayılan olarak WebSocket'i kullanır. Ancak SSE genellikle daha iyi bir seçimdir. Daha basittir, standart HTTP üzerinden çalışır ve bağlantı kopmalarını otomatik olarak yönetir. WebSocket, ihtiyacınız olmayan bir karmaşıklık ekler.

Modern PetstoreAPI her iki protokolü de uygular. Evcil hayvan durumu güncellemeleri ve sipariş bildirimleri için SSE. Canlı açık artırma teklifleri ve gerçek zamanlı sohbet için WebSocket. Her protokol farklı kullanım durumlarına hizmet eder.

💡

Gerçek zamanlı API'lar oluşturuyor veya test ediyorsanız, Apidog hem SSE hem de WebSocket testini destekler. Olay akışlarını test edebilir, mesaj formatlarını doğrulayabilir ve yeniden bağlantı senaryolarını simüle edebilirsiniz.

button

Bu kılavuzda, SSE ve WebSocket arasındaki farkları öğrenecek, Modern PetstoreAPI'den gerçek örnekler görecek ve her protokolü ne zaman kullanacağınızı keşfedeceksiniz.

Sunucu Tarafından Gönderilen Olaylar (SSE) Nedir?

SSE, sunucudan istemciye olay akışı için HTTP tabanlı bir protokoldür.

SSE Nasıl Çalışır?

İstemci bir bağlantı açar ve olaylar gerçekleştikçe onları alır:

const eventSource = new EventSource('https://petstoreapi.com/v1/pets/notifications');

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Pet update:', data);
};

eventSource.addEventListener('adoption', (event) => {
  const data = JSON.parse(event.data);
  console.log('Pet adopted:', data.petId);
});

Sunucu olayları gönderir:

GET /v1/pets/notifications
Accept: text/event-stream

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache

event: adoption
data: {"petId":"019b4132","userId":"user-456"}

event: status-change
data: {"petId":"019b4127","status":"AVAILABLE"}

SSE Özellikleri

1. Tek yönlü iletişim

Sunucu istemciye gönderir. İstemci, SSE bağlantısı üzerinden geri mesaj gönderemez (ancak normal HTTP isteklerini kullanabilir).

2. HTTP Üzerine Kurulmuştur

Standart HTTP kullanır. Proxy'ler, güvenlik duvarları ve CDN'ler üzerinden çalışır.

3. Otomatik yeniden bağlantı

Bağlantı koparsa, tarayıcı otomatik olarak yeniden bağlanır.

4. Yeniden Başlatma için Olay Kimlikleri

Sunucu olay kimlikleri gönderebilir. İstemci, son alınan olaydan devam eder:

id: 123
event: adoption
data: {"petId":"019b4132"}

id: 124
event: status-change
data: {"petId":"019b4127"}

Bağlantı kesilirse, istemci devam etmek için Last-Event-ID: 124 başlığını gönderir.

5. Basit protokol

Metin tabanlı format. curl ile hata ayıklaması kolaydır:

curl -N -H "Accept: text/event-stream" \
  https://petstoreapi.com/v1/pets/notifications

SSE Sınırlamaları

1. Yalnızca tek yönlü

İstemci, SSE aracılığıyla mesaj gönderemez. İstemciden sunucuya iletişim için ayrı HTTP istekleri gerekir.

2. Yalnızca metin

SSE metin gönderir. İkili veriler base64 ile kodlanmalıdır.

3. Tarayıcı bağlantı limitleri

Tarayıcılar etki alanı başına SSE bağlantılarını sınırlar (genellikle 6). Çoğu uygulama için sorun teşkil etmez.

4. Dahili sıkıştırma yok

HTTP sıkıştırması çalışır, ancak WebSocket gibi protokol düzeyinde sıkıştırma yoktur.

WebSocket Nedir?

WebSocket, kalıcı bir bağlantı üzerinden tam çift yönlü, çift yönlü bir protokoldür.

WebSocket Nasıl Çalışır?

İstemci ve sunucu her zaman mesaj gönderebilir:

const ws = new WebSocket('wss://petstoreapi.com/auctions/019b4132');

// Send message to server
ws.send(JSON.stringify({
  type: 'bid',
  amount: 500
}));

// Receive messages from server
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Auction update:', data);
};

ws.onclose = () => {
  console.log('Connection closed');
  // Manual reconnection logic needed
};

Sunucu her zaman gönderebilir:

{"type":"bid","userId":"user-456","amount":550}
{"type":"outbid","newAmount":550}

İstemci her zaman gönderebilir:

{"type":"bid","amount":600}
{"type":"watch","petId":"019b4132"}

WebSocket Özellikleri

1. Çift yönlü

Hem istemci hem de sunucu her zaman mesaj gönderebilir. Gerçek iki yönlü iletişim.

2. Düşük gecikme süresi

Kalıcı bağlantı. Mesaj başına HTTP yükü yok. Oyun, sohbet, canlı işbirliği için idealdir.

3. İkili veri desteği

İkili verileri doğrudan gönderebilir. Base64 kodlamasına gerek yoktur.

4. Özel protokol

ws:// veya wss:// (güvenli) kullanır. İlk el sıkışmadan sonra HTTP değildir.

5. Çerçeve tabanlı

Mesajlar çerçevelenir. Kısmi mesajlar gönderilebilir ve yeniden birleştirilebilir.

WebSocket Sınırlamaları

1. Karmaşık kurulum

WebSocket sunucusu gerektirir. HTTP uç noktalarından daha karmaşıktır.

2. Manuel yeniden bağlantı

Otomatik yeniden bağlantı yok. Yeniden deneme mantığını uygulamanız gerekir.

3. Proxy sorunları

Bazı kurumsal proxy'ler WebSocket'i engeller. HTTP proxy'leri ws://'yi anlamaz.

4. Durum bilgisi olan (Stateful)

Sunucu bağlantıları izlemelidir. Durum bilgisi olmayan HTTP'ye göre ölçeklendirmesi daha zordur.

5. HTTP özellikleri yok

El sıkışmadan sonra HTTP önbelleğe alma, durum kodları veya standart başlıklar kullanılamaz.

Yan Yana Karşılaştırma

Özellik	SSE	WebSocket
Yön	Sunucu → İstemci	Çift Yönlü
Protokol	HTTP	Özel (ws://)
Yeniden Bağlantı	Otomatik	Manuel
Tarayıcı Desteği	Tüm modern	Tüm modern
Proxy Dostu	Evet	Bazen
Karmaşıklık	Basit	Karmaşık
İkili Veri	Hayır (yalnızca metin)	Evet
Gecikme Süresi	Düşük	Çok düşük
Ölçeklenebilirlik	Yüksek (durumsuz)	Orta (durum bilgisi olan)
Kullanım Durumu	Bildirimler, akışlar	Sohbet, oyun, işbirliği

Modern PetstoreAPI Her İkisini Nasıl Kullanır?

Modern PetstoreAPI, farklı senaryolar için hem SSE hem de WebSocket'i uygular.

Evcil Hayvan Güncellemeleri için SSE

Uç nokta: GET /v1/pets/notifications

const events = new EventSource(
  'https://petstoreapi.com/v1/pets/notifications?userId=user-456'
);

events.addEventListener('adoption', (e) => {
  const data = JSON.parse(e.data);
  showNotification(`${data.petName} was adopted!`);
});

events.addEventListener('status-change', (e) => {
  const data = JSON.parse(e.data);
  updatePetStatus(data.petId, data.status);
});

Sunucu uygulaması:

app.get('/v1/pets/notifications', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const userId = req.query.userId;

  // Subscribe to pet updates
  const subscription = petUpdates.subscribe(userId, (event) => {
    res.write(`event: ${event.type}\n`);
    res.write(`data: ${JSON.stringify(event.data)}\n\n`);
  });

  req.on('close', () => {
    subscription.unsubscribe();
  });
});

Kullanım durumları:

Evcil hayvan durumu değişiklikleri (mevcut → sahiplenildi)
Sipariş bildirimleri (verildi, gönderildi, teslim edildi)
Envanter güncellemeleri
Fiyat değişiklikleri

Canlı Açık Artırmalar için WebSocket

Uç nokta: wss://petstoreapi.com/auctions/{auctionId}

const ws = new WebSocket('wss://petstoreapi.com/auctions/019b4132');

// Place bid
function placeBid(amount) {
  ws.send(JSON.stringify({
    type: 'bid',
    amount
  }));
}

// Receive updates
ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);

  switch (msg.type) {
    case 'bid':
      updateCurrentBid(msg.amount, msg.userId);
      break;
    case 'outbid':
      showOutbidNotification(msg.newAmount);
      break;
    case 'auction-end':
      showAuctionResult(msg.winner);
      break;
  }
};

Sunucu uygulaması:

wss.on('connection', (ws, req) => {
  const auctionId = req.params.auctionId;
  const auction = auctions.get(auctionId);

  ws.on('message', (data) => {
    const msg = JSON.parse(data);

    if (msg.type === 'bid') {
      const result = auction.placeBid(msg.userId, msg.amount);

      // Broadcast to all participants
      auction.participants.forEach(participant => {
        participant.send(JSON.stringify({
          type: 'bid',
          userId: msg.userId,
          amount: msg.amount
        }));
      });
    }
  });
});

Kullanım durumları:

Canlı açık artırma teklifleri
Destekle gerçek zamanlı sohbet
İşbirliğine dayalı evcil hayvan bakımı planlaması
Satış sırasında canlı envanter güncellemeleri

Apidog ile Gerçek Zamanlı API'ları Test Etme

Apidog hem SSE hem de WebSocket API'lerini test etmeyi destekler.

SSE Testi

1. SSE isteği oluşturun:

GET https://petstoreapi.com/v1/pets/notifications
Accept: text/event-stream

2. Olayları doğrulayın:

Olay türlerini kontrol edin
JSON yüklerini doğrulayın
Yeniden bağlantı davranışını test edin
Olay kimliklerini doğrulayın

3. Senaryoları test edin:

Bağlantı kesilmeleri
Sunucu yeniden başlatmaları
Olay sıralaması
Son olaydan devam etme

WebSocket Testi

1. WebSocket bağlantısı oluşturun:

wss://petstoreapi.com/auctions/019b4132

2. Test mesajları gönderin:

{"type":"bid","amount":500}
{"type":"watch","petId":"019b4132"}

3. Yanıtları doğrulayın:

Mesaj formatlarını kontrol edin
Çift yönlü akışı test edin
Bağlantı yönetimini doğrulayın
Hata senaryolarını test edin

4. Senaryoları test edin:

Çoklu eşzamanlı bağlantılar
Mesaj sıralaması
Bağlantı zaman aşımları
Yeniden bağlantı mantığı

Her Birini Ne Zaman Kullanmalı

SSE'yi Şu Durumlarda Kullanın:

Tek yönlü güncellemeler - Sunucu istemciye gönderir, istemcinin geri göndermesine gerek yoktur
Basit kurulum - Standart HTTP altyapısını kullanmak istersiniz
Otomatik yeniden bağlantı - Yeniden deneme mantığı uygulamak istemezsiniz
Proxy dostu - Kurumsal güvenlik duvarları üzerinden çalışması gerekir
Bildirimler - Durum güncellemeleri, uyarılar, canlı akışlar

Örnekler:

Evcil hayvan sahiplenme bildirimleri
Sipariş durumu güncellemeleri
Envanter değişiklikleri
Fiyat uyarıları
Haber akışları

WebSocket'i Şu Durumlarda Kullanın:

Çift yönlü - Hem istemci hem de sunucu sık sık mesaj gönderir
Düşük gecikme süresi kritik - Oyun, gerçek zamanlı işbirliği
İkili veri - Resim, ses, video gönderme
Özel protokol - Mesaj formatı üzerinde tam kontrol ihtiyacı
Yüksek mesaj sıklığı - Saniyede yüzlerce mesaj

Örnekler:

Canlı açık artırma teklifleri
Gerçek zamanlı sohbet
Çok oyunculu oyunlar
İşbirliğine dayalı düzenleme
Canlı video akışı

Sadece Şunlar Yüzünden WebSocket Kullanmayın:

❌ "Daha gelişmiş" - Fayda sağlamayan karmaşıklık

❌ "Herkes kullanıyor" - SSE genellikle daha basittir

❌ "Daha hızlı" - SSE çoğu kullanım durumu için yeterince hızlıdır

❌ "Çift yönlü" - Gerçekten çift yönlüye ihtiyacınız var mı?

Sonuç

SSE ve WebSocket'in her ikisi de gerçek zamanlı iletişimi mümkün kılar, ancak farklı senaryolar için tasarlanmışlardır. SSE, otomatik yeniden bağlantı ve HTTP uyumluluğu ile tek yönlü sunucudan istemciye güncellemelerde üstündür. WebSocket, çift yönlü, düşük gecikmeli iletişimde öne çıkar.

Modern PetstoreAPI, her iki protokolü de nasıl etkili bir şekilde kullanacağınızı gösterir. Bildirimler ve durum güncellemeleri için SSE. Canlı açık artırmalar ve sohbet için WebSocket. "Daha iyi" görünen protokole göre değil, kullanım durumunuza göre seçin.

Hem SSE hem de WebSocket uygulamalarının farklı senaryolarda doğru çalıştığından emin olmak için gerçek zamanlı API'larınızı Apidog ile test edin.

Sıkça Sorulan Sorular

SSE kurumsal güvenlik duvarları üzerinden çalışabilir mi?

Evet. SSE standart HTTP kullanır, bu nedenle HTTP proxy'leri ve güvenlik duvarları üzerinden çalışır. WebSocket ise bazı proxy'lerin engellediği özel bir protokol kullanır.

WebSocket SSE'den daha mı hızlıdır?

WebSocket'in biraz daha düşük gecikme süresi vardır (mesaj başına HTTP yükü yoktur), ancak çoğu uygulama için fark göz ardı edilebilir. SSE bildirimler, akışlar ve durum güncellemeleri için yeterince hızlıdır.

SSE yeniden bağlantısını nasıl yönetirsiniz?

Tarayıcı yeniden bağlantıyı otomatik olarak yönetir. Sunucudan olay kimlikleri gönderin, istemci `Last-Event-ID` başlığını kullanarak son alınan olaydan devam edecektir.

SSE'yi mobil uygulamalarla kullanabilir misiniz?

Evet. iOS ve Android, yerel HTTP istemcileri veya kütüphaneleri aracılığıyla SSE'yi destekler. SSE, HTTP'nin çalıştığı her yerde çalışır.

Maksimum SSE bağlantı süresi nedir?

Kesin bir sınır yoktur. SSE bağlantıları süresiz açık kalabilir. Bazı proxy'ler veya yük dengeleyiciler zaman aşımlarına sahip olabilir (genellikle 30-60 saniye), ancak tarayıcı otomatik olarak yeniden bağlanacaktır.

WebSocket ikili veri gönderebilir mi?

Evet. WebSocket hem metin hem de ikili çerçeveleri destekler. Base64 kodlamasına gerek kalmadan resim, ses veya herhangi bir ikili veri gönderebilirsiniz.

Bir tarayıcı kaç SSE bağlantısına sahip olabilir?

Tarayıcılar, etki alanı başına SSE bağlantılarını sınırlar (genellikle 6). Bu nadiren bir sorundur; çoğu uygulama yalnızca 1-2 SSE bağlantısına ihtiyaç duyar.

SSE için özel bir sunucuya ihtiyacınız var mı?

Hayır. Herhangi bir HTTP sunucusu SSE'yi işleyebilir. Sadece doğru başlıkları (Content-Type: text/event-stream) ayarlayın ve bağlantıyı açık tutun.