HTML Server-Sent olayları

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

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

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

Bu, web sayfalarının mevcut güncellemeleri sorgulamak zorunda olduğu durumlar için de geçerliydi. Server-Sent olayları sayesinde, güncellemeler otomatik olarak ulaşabilir.

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

Tarayıcı desteği

Tablo numaraları, sunucu tarafından gönderilen olayları tamamen destekleyen ilk tarayıcıları 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ındığında, onmessage olayı gerçekleşir
  • onmessage olayı gerçekleştiğinde, "result" kimliğine sahip olan elemana alınan veriyi 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

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

Sunucu tarafındaki olay akışı grameri çok 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 Tipleri "Content-Type" başlığını "text/event-stream" olarak ayarlayın
  • Sayfayı önbelleklemez
  • Gönderilecek veriyi belirtin (her zaman "data: " ile başlar)
  • Web sayfasına yenileme çıktısı 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 olan bağlantı açıldığında
onmessage Mesaj alındığında
onerror Hata Oluştuğunda