HTML Server-Sent olayları

Server-Sent olayları, web sayfasının sunucudan güncellemeler almasına izin verir.

Server-Sent olayları - Tek Yönlü Mesajlaşma

Server-Sent olayları, web sayfasının otomatik olarak sunucudan güncellemeler almasını ifade eder.

Bu, web sayfasının mevcut güncellemeleri sorgulamak zorunda olduğu bir önceki durum olabilir. Server-Sent olayları sayesinde, güncellemeler otomatik olarak ulaşabilir.

Örneğin: Facebook/Twitter güncellemeleri, hisse senedi güncellemeleri, yeni gönderiler, yarış sonuçları vb.

Tarayıcı desteği

Tablodaki rakamlar, server-sent olaylarını tamamen destekleyen ilk tarayıcıyı gösterir.

API
SSE 6.0 Desteklenmiyor 6.0 5.0 11.5

Server-Sent olay bildirimlerini almak

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

Örnek

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

Kişisel olarak deneyin

Örnek açıklaması:

  • Yeni bir EventSource nesnesi oluşturun ve güncellemeleri gönderen sayfanın URL'sini (örneğin "demo_sse.php") belirtin
  • Her bir güncelleme alınırken onmessage olayı meydana gelir
  • onmessage olayı meydana geldiğinde, alınan veriyi "result" kimlikli bir öğeye itilir

Server-Sent olay desteği saptama

TIY örneğinde, sunucu tarafından gönderilen olayların tarayıcı desteklenmesini saptamak için ekstra bir kod yazdık:

if(typeof(EventSource) !== "undefined") {
    // Evet! Sunucu tarafından gönderilen olayları destekliyoruz!
    // Bazı kodlar...
} else {
    // Özür dileriz! Sunucu tarafından gönderilen olayları desteklemiyor!
}

Sunucu tarafı kod örneği

Örneğin çalışması için, veri güncellemelerini gönderen bir sunucuyu (örneğin PHP veya ASP) kullanmanız gerekmektedir.

Sunucu tarafındaki olay akışı gramatikası oldukça basittir. "Content-Type" başlığını "text/event-stream" olarak ayarlayın. Şimdi, olay akışını göndermeye başlayabilirsiniz.

PHP'teki Kod (demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

ASP'teki Kod (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Kod Açıklaması:

  • İçerik başlığı "Content-Type" "text/event-stream" olarak ayarlanmalıdır
  • Sayfayı önbelleklemez
  • Gönderilecek verileri belirleyin (her zaman "data: " ile başlar)
  • Web sayfasına yenileme verisi göndermek

EventSource Nesnesi

Örnekte, onmessage olayını kullanarak mesajı almak için kullanıyoruz. Ancak, diğer olayları da kullanabilirsiniz:

Olay Açıklama
onopen Sunucuya Giden Bağlantı Açıldığında
onmessage Mesaj Alındığında
onerror Hata Oluştuğunda