HTML SSE (Server-Sent Events) API

Sunucu Tarafından Gönderilen Etkinlikler (SSE), bir web sayfasının bir sunucudan güncelleme almasına olanak tanır.

Server-Sent Events – Tek Yönlü Mesajlaşma

Sunucu tarafından gönderilen olay, bir web sayfasının güncellemeleri bir sunucudan otomatik olarak almasıdır.

Bu daha önce de mümkündü ancak web sayfasının herhangi bir güncelleme olup olmadığını sorması gerekiyordu. Sunucu tarafından gönderilen etkinliklerde güncellemeler otomatik olarak gelir.

Örnekler: Facebook/Twitter güncellemeleri, hisse senedi fiyatı güncellemeleri, haber akışları, spor sonuçları vb.

Tarayıcı Desteği

Sunucu Tarafından Gönderilen Bildirimleri Alma (Event Notifications)

EventSource nesnesi, sunucu tarafından gönderilen olay bildirimlerini almak için kullanılır:

<!DOCTYPE html>
<html>
<body>
 
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("demo_sse.php");
  source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
  };
} else {
  document.getElementById("result").innerHTML = "Tarayıcı Desteklemiyor.";
}
</script>

</body>
</html>

Örnek Açıklaması

  • Yeni bir EventSource nesnesi oluşturun ve güncellemeleri gönderen sayfanın URL’sini belirtin (bu örnekte “demo_sse.php”)
  • Her güncelleme alındığında, onmessage olayı meydana gelir
  • Bir onmessage olayı meydana geldiğinde, alınan verileri id = “result” olan öğeye yazdırılır

Sunucu Tarafından Gönderilen Olaylar Desteğini Kontrol Etme

Yukarıdaki örnekte, sunucu tarafından gönderilen olaylar için tarayıcı desteğini kontrol etmeye yönelik bazı ekstra kod satırları vardı:

if(typeof(EventSource) !== "undefined") {
  // Destekliyor!
  // Kodlar.....
} else {
  // Desteklemiyor..
}

Sunucu Tarafı Kod Örneği

Yukarıdaki örneğin çalışması için, veri güncellemeleri gönderebilen bir sunucuya (PHP veya ASP gibi) ihtiyacınız vardır.

Sunucu tarafı olay akışı sözdizimi basittir. “Content-Type” başlığını “text/event-stream” olarak ayarlayın. Artık etkinlik akışlarını göndermeye başlayabilirsiniz.

PHP’deki kod (demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "Sunucu Saati : {$time}\n\n";
flush();
?>

ASP tarafında örnek kod (demo_sse.asp)

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("Sunucu Saati: " & now())
Response.Flush()
%>

Kod Açıklaması

  • “Content-Type” başlığını “text/event-stream” olarak ayarlayın
  • Sayfanın önbelleğe alınmaması gerektiğini belirtin
  • Gönderilecek verinin çıktısını alın (Her zaman “data:” ile başlayın)
  • Çıkış verilerini web sayfasına geri aktarın

EventSource Nesnesi

Yukarıdaki örneklerde mesajları almak için onmessage olayını kullandık. Ancak başka etkinlikler de mevcuttur:

EventAçıklama
onopenSunucuyla bağlantı açıldığında
onmessageBir mesaj alındığında
onerrorBir hata oluştuğunda
7 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir