HTML5 Server-Sent İşlemleri

HTML5 SSE bir web sayfasının sunucudan güncellemeler almasını sağlar.

Server-Sent İşlemleri - Tek Yönlü Mesaj Gönderme

Bir Server Sent işlemi, bir web sayfası otomatik olarak sunucudan güncelleme alınca gerçekleşir.

Bu öncenden de mümkündü ancak web sayfası herhangi bir güncelleme olup olmadığını sormak zorundaydı. SSE ile güncellemeler otomatik olarak yüklenir.

Örnek: Facebook/Twitter güncellemeleri, yeni haber uyarıları, maç sonuçları vs.

Tarayıcı Desteği

SSE Bildirimlerini Almak

EventSource nesnesi sunucu bildirimlerini almak için kullanılmıştır:

Örnek

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

Kendin Dene »

Örneğin açıklaması:

Yeni bir EventSource nesnesi oluştur ve güncellemeler için gerekli sayfanın URL'sini belirt.(Bu örnekte "demo_sse.php")
Her güncelleme alındığında onmessage event'i (olayı) meydana gelir
Bir onmessage olayı meydana geldiğinde, alınan veriyi id="result" ile elementin içine koy

Server-Side (Sunucu Tarafı) Kodu Örneği

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

PHP Kodu (demo_sse.php):

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

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

ASP Kodu(demo_sse.asp):

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

Kodun açıklaması:

"Content-Type"ı başlık olarak "text/event-stream"e ayarla
Sayfanın ön bellek yapmayacağını belirt.
Sonucu hazırla (Her zaman "data: " ile başla)
Çıkış bilgisini web sayfasına gönder

EventSource Nesnesi

Yukarıdaki örneklerde mesajları alabilmek için onmessage event'ini kullandık. Ama başka event'lar da vardır:

Olay (Events)	Açıklama
onopen	Sunucuya bir bağlantı açıldığında
onmessage	Bir mesaj alındığında
onerror	Bir hata oluştuğunda