Yükleniyor...

HTML Server-Sent Events (SSE)

Önceki Web Workers JavaScript’i arka plan iş parçacığında çalıştırıp postMessage ile sayfayla konuşuyordu — yerel CPU, sunucu akışı yok. Bu ders off-thread hesabı bırakır ve SSE’yi tanıtır: sunucu HTTP üzerinden metin güncellemeleri push eder. Kapsam pratik — aç, dinle, tek yönlü push — Node akış sunucuları değil.

HTML kursunda neden SSE

Yeni başlayanlar özel soket protokolü olmadan canlı skor/log ister. SSE, HTTP üzerinden metin push için ilk yaygın API’dir. Workers’tan sonra bölünme farklıdır: sunucu akışa sahiptir; sayfa betiği EventSource ve DOM’a.

Doğrudan yanıt

1) new EventSource("/events"). 2) onmessage ve e.data. 3) DOM’u sayfada güncelleyin. 4) onerror. 5) Tek yönlü. 6) Dupleks için WebSockets; nadir için polling; yerel CPU için Workers.

📊 SSE vs WebSocket vs Worker

Topic SSE (this lesson) WebSocket Web Worker (prev)
Typical role Server→browser text stream Full duplex messages Local off-thread compute
Browser entry EventSource(url) new WebSocket(url) new Worker(url or Blob)
Direction One-way (server push) Two-way Page ↔ worker (no server required)
Transport idea HTTP text/event-stream WS protocol postMessage / onmessage
DOM updates On the page script On the page script On the page script only
This course depth Required (browser pattern) Contrast only Previous lesson
Not this lesson Full backend stream servers Chat product design SharedWorker fleets

Küçücük EventSource dinleme kalıbı

Yalnızca tarayıcı tarafı. /events gerçek bir SSE uç noktası olmalı; sunucusuz hata — yine API şeklini öğretir.

EventSource listen pattern

html 
<pre id="out">Waiting for stream…</pre>
<script>
const out = document.getElementById("out");
const es = new EventSource("/events");
es.onmessage = function (e) {
out.textContent = "Last update: " + e.data;
};
es.onerror = function () {
out.textContent = "SSE error or closed (need a real /events stream)";
};
</script>

Dinleme çağrılarını okumak

  • EventSource uzun HTTP akışı açar
  • message’da onmessage
  • e.data metin yükü
  • Sayfa pre’ye yazar
  • Workers’tan farklı: arka plan iş parçacığına postMessage yok
  • Sunucusuz onerror beklenir
  • Girişi küçük tutun

Akış satırlarını loga eklemek

Canlı UI’lar çoğu zaman her olayı ekler. Bu demo listedeki son satırları tutar.

Append SSE lines to a log

html 
<ul id="log"></ul>
<script>
const log = document.getElementById("log");
const es = new EventSource("/events");
es.onmessage = function (e) {
const li = document.createElement("li");
li.textContent = e.data;
log.appendChild(li);
while (log.children.length > 5) {
log.removeChild(log.firstChild);
}
};
es.onerror = function () {
if (!log.dataset.noted) {
log.dataset.noted = "1";
const li = document.createElement("li");
li.textContent = "Stream not available — wire a text/event-stream URL";
log.appendChild(li);
}
};
</script>

Log fikrini okumak

  • Her onmessage bir li oluşturur
  • Listeyi sınırlayın
  • Hâlâ tek yönlü
  • Web Worker değil
  • Adlı olaylar var; message yeter
  • Bitince es.close()
  • Sonraki: XHTML

SSE, polling, soket veya worker seçmek

  • HTTP üzerinden sık durum push: iyi SSE
  • Nadir yenileme: polling yetebilir
  • İki yönlü sohbet: WebSockets
  • Ağır yerel döngü: Workers idi
  • Kart sürüklemek: DnD idi
  • Backend akış uç noktası kurmak: bu girişin ötesi

Alıştırma — açın, dinleyin, karşılaştırın

  1. Dinleme snippet’ini okuyun.
  2. text/event-stream’e bakın.
  3. Append-log’u okuyun.
  4. Cümle: Workers yerel; SSE sunucudan.
  5. Cümle: SSE tek yönlü; WebSockets dupleks.
  6. İsteğe bağlı gerçek URL.
  7. İleri: XHTML.

Kolay hatalar

  • EventSource ile tarayıcı→sunucu beklemek
  • Web Workers ile karıştırmak
  • event-stream content-type unutmak
  • Çok nadir güncellemeler için SSE
  • onerror’u yok saymak
  • Girişi tam backend streaming kursu saymak
  • EventSource’u Worker/WebSocket ile karıştırmak

Özet

  • SSE HTTP üzerinden sunucu→tarayıcı metin akıtır
  • EventSource, onmessage/onerror; DOM sayfada
  • Tek yönlü push; dupleks için WebSockets
  • Workers yerel off-thread hesaptı; bu ders sunucu push
  • Gerçek demolar text/event-stream ister
  • Sonraki: XHTML

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
5
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 67 / 68
Html Ders