Frontend Academy · Ders

Tek Yönlü Akış için Sunucu Tarafından Gönderilen Olaylar

Sunucu tarafından gönderilen olay akışını almak için EventSource kullanmayı, olay türlerini ve verileri ayrıştırmayı ve ağ kesintilerinde otomatik olarak yeniden bağlanmayı öğrenin.

Tek Yönlü Akış için Sunucu Tarafından Gönderilen Olaylar, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Server-Sent Events Nedir?

SSE, sunucunun tek bir uzun ömürlü bağlantı üzerinden tarayıcıya olay göndermesini sağlayan, HTTP tabanlı standart bir protokoldür. Tek yönlüdür: yalnızca sunucudan istemciye. Geriye veri göndermeniz gerekmiyorsa WebSockets'ten daha basittir.

EventSource API'si

Tarayıcının EventSource nesnesi bir URL'ye bağlanır ve olayları dinler. Standarttır, yerleşiktir ve kütüphane gerektirmez.

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

Sunucu Yanıt Biçimi

Sunucu, Content-Type: text/event-stream içeren düz metin akışı gönderir. Her mesaj data: ile başlar ve boş bir satırla sona erer.

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

Adlandırılmış Olaylar

Sunucu, olayları event: ile adlandırabilir. Tarayıcı bu olayları söz konusu adla tetikler.

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

Otomatik Yeniden Bağlanma

EventSource, bağlantı kesildiğinde otomatik olarak yeniden bağlanır (yaklaşık 3 saniye sonra). Sunucu, retry: 5000 ile bir gecikme önerebilir.

// Server:
retry: 5000\n
data: hello\n\n

Olay Kimlikleri ve Devam Etme

Sunucu, her olayla birlikte id: gönderir. Yeniden bağlanmanın ardından tarayıcı, aldığı son kimliği Last-Event-ID üst bilgisinde gönderir; sunucu buradan devam edebilir.

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

JSON Ayrıştırma

event.data her zaman bir dizedir. JSON'u kendiniz ayrıştırın.

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

Bağlantıyı Kapatma

Durdurmak için es.close() çağrısını yapın. Tarayıcılar sekme kapatıldığında da bağlantıyı kapatır.

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

Kullanım Alanları

Canlı panolar (ölçümler, izleme). Bildirimler (yeni e-postalar, uyarılar). Hisse senedi göstergeleri. Yapay zekâ sohbeti tamamlamaları (her belirteç = bir olay). Canlı spor skorları. Uzun süren işlerden durum güncellemeleri.

Gerçek Örnek: Yapay Zekâ Akışı

OpenAI/Anthropic tamamlamaları SSE olarak akış halinde gönderilir. Her belirteç bir veri olayı olarak gelir; yazma efekti oluşturmak için bunları aşamalı olarak işleyin.

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE ve WebSocket ve Yoklama Karşılaştırması

SSE: HTTP tabanlıdır, yalnızca sunucudan istemciye çalışır, otomatik olarak yeniden bağlanır ve basittir. WebSocket: tam çift yönlüdür, mesaj başına ek yükü daha düşüktür ancak daha karmaşıktır. Yoklama: en basit yöntemdir; gecikmesi ve yükü en yüksektir. Tek yönlü akış için SSE'yi, sohbet benzeri iki yönlü iletişim için WS'yi seçin.

Tarayıcı Sınırları ve Proxy'ler

Tarayıcılar, kaynak başına eşzamanlı SSE bağlantılarını sınırlar (yaklaşık 6). Bazı kurumsal proxy'ler ve eski yük dengeleyiciler yanıtları arabelleğe alarak SSE'nin çalışmasını bozabilir; hedef ortamları sınayın. Proxy'lerin çoğunda arabelleğe almayı aşmak için HTTPS kullanın.

SSE için CORS

EventSource, CORS kurallarına uyar. Sunucu Access-Control-Allow-Origin göndermelidir. Kimlik bilgileri için EventSource oluşturucusuna { withCredentials: true } geçirin ve sunucuda Access-Control-Allow-Credentials: true ayarlayın.

Hızlı Kontrol

Server-Sent Events ile WebSockets arasındaki temel fark nedir?

Özet: Server-Sent Events

EventSource, text/event-stream olaylarından oluşan bir HTTP akışı açar. Sunucu, isteğe bağlı event: adı ve id: bilgisiyle 'data:' mesajları gönderir. Last-Event-ID ile devam ederek otomatik olarak yeniden bağlanır. Tek yönlüdür (sunucudan istemciye). Canlı panolar, yapay zekâ akışı ve bildirimler için idealdir. İki yönlü iletişime ihtiyacınız olmadığında WebSocket'ten daha basittir. Eşzamanlı bağlantı sınırlarına ve proxy arabelleğe almasına dikkat edin.

Sıkça Sorulan Sorular

“Tek Yönlü Akış için Sunucu Tarafından Gönderilen Olaylar” dersi ücretsiz mi?

Evet — “Tek Yönlü Akış için Sunucu Tarafından Gönderilen Olaylar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Tek Yönlü Akış için Sunucu Tarafından Gönderilen Olaylar” dersinde ne öğreneceğim?

Sunucu tarafından gönderilen olay akışını almak için EventSource kullanmayı, olay türlerini ve verileri ayrıştırmayı ve ağ kesintilerinde otomatik olarak yeniden bağlanmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Tek Yönlü Akış için Sunucu Tarafından Gönderilen Olaylar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

WebSocket API: open, message, close ve error
Socket.io İstemci Entegrasyonu
Tek Yönlü Akış için Sunucu Tarafından Gönderilen Olaylar
Gerçek Zamanlı Arayüz Kalıpları

← Frontend Academy Sayfasına Dön