Sunucudan Gelen Olaylar (SSE/Server Sent Events)
Server sent olaylar (SSE), bir sayfaya sunucudan güncellemeler alması için izin verir.
Bir web sayfasının, kendini güncellemesi daha önce de mümkündü; fakat sayfa yeni güncellemeler için bizden izin almak zorundaydı.
Server-Sent Events ile web sayfaları otomatik olarak kendini yenileyebilmektedir.
Server-Sent güncellemelerine; Facebook/Twitter güncellemeleri, maç sonuçları güncellemeleri, stok fiyatları güncellemeleri, haber beselemeleri gibi güncellemeler örnek verilebilir.
Bir web sayfasının, kendini güncellemesi daha önce de mümkündü; fakat sayfa yeni güncellemeler için bizden izin almak zorundaydı.
Server-Sent Events ile web sayfaları otomatik olarak kendini yenileyebilmektedir.
Server-Sent güncellemelerine; Facebook/Twitter güncellemeleri, maç sonuçları güncellemeleri, stok fiyatları güncellemeleri, haber beselemeleri gibi güncellemeler örnek verilebilir.
Tarayıcı Desteği
Aşağıdaki tablo, web tarayıcıların hangi sürümden itibaren bu özelliği destekeldiğini göstermektedir:
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | Desteklemiyor | 6.0 | 5.0 | 11.5 |
SSE Uyarısı Almak
Sayfamızda bir SSE güncellemesi uyarısı almak için, EventSource() metodunu kullanırız. Aşağıdaki örneğe dikkat edelim:
<h1>Sunucu güncellemeleri alnıyor:</h1>
<div id="sonuc"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var kaynak = new EventSource("demo_sse.php");
kaynak.onmessage = function(event) {
document.getElementById("sonuc").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("sonuc").innerHTML = "Üzgünüm, tarayıcınız server-sent events özelliğini desteklemiyor...";
}
</script>
Yukarıdaki koda yakından bakalım:
- Yeni bir EventSource objesi oluşturduk ve kaynak değişkenine yükledik. Bu objede parametre olarak güncellemenin alınacağı php sayfasını girdik:
var kaynak = new EventSource("demo_sse.php");
kaynak.onmessage = function(event) {
document.getElementById("sonuc").innerHTML += event.data + "<br>";
};
- onmessage olayının gerçekleştiği her durumda, sayfamızda bir güncelleme gerçekleşecektir. Güncelleme zamanı ise, "sonuc" adındaki html elemanında gösterilecektir.
SSE Desteği Kontrolü
Aşağıda, bir web tarayıcının Server-Sent Events desteği olup olmadığını test eden kodlar vardır:
if(typeof(EventSource) !== "undefined") {
// Evet! Server-sent events desteği var!
// Some code.....
} else {
// Hayır! server-sent events desteği yok...
}
// Evet! Server-sent events desteği var!
// Some code.....
} else {
// Hayır! server-sent events desteği yok...
}
Sunucu Tarafındaki (Server-Side) Kodlar
Yukarıdaki örneğin çalışabilmesi için sunucumuzun da (server ımız) veri gönderme yeteneğine sahip olması gerekir. Sunucumuza bu yeteneği kazandırmak için yapmamız gereken şey, güncelleme gönderen bir php veya asp kodu yazmaktır.
Sunucu taraflı güncelleme yayını ayarı oldukça basittir: "Content-Type" başlığını "text/event-stream" olarak ayarlamanız yeterlidir. Bu ayarlamadan sonra, artık event (olay) yayınları yapabilirsiniz. Yukarıdaki örneğimizde SSE yapan php dosyamızın (demo_sse.php) kodları şöyledir:
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$zaman = date('r');
echo "data: Son sunucu zamanı: {$zaman}\n\n";
flush();
?>
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$zaman = date('r');
echo "data: Son sunucu zamanı: {$zaman}\n\n";
flush();
?>
ASP kodu da şöyledir (demo_sse.asp)
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: Son sunucu zamanı: " & now())
Response.Flush()
%>
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: Son sunucu zamanı: " & now())
Response.Flush()
%>
Bu kodların anlamı şudur:
- Önce "header('Content-Type: text/event-stream');" başlığını atıyarak SSE için hazır hale geliyoruz.
- Daha sonra, SSE dosyamızın belleğe alınmayacağından emin oluyoruz (header('Cache-Control: no-cache');).
- Göndermek için data çıktısı alıyoruz (echo "data: Son sunucu zamanı: {$zaman}\n\n"). Bu çıktı her zaman data ifadesi ile başlamalıdır.
- flush() metodu ile data çıktısını sonlandırıyoruz.
EventSource Objesi (Nesnesi)
Yukarıdaki örnekte, mesaj almak için onmessage olayını kullandık. Fakat aşağıda tabloda verildiği gibi daha başka olaylar da kullanabiliriz:
| Events (Olaylar) | Tanımı |
|---|---|
| onopen | Bir sunucu bağlantısı açıldığında |
| onmessage | Bir mesaj alındığında |
| onerror | Bir hata oluştuğunda |
Bu serüvende kafamızı karıştıran kodlar muhtemelen JavaScript kodlarıdır. CSS öğrendikten sonra tavsiye edeceğim dil de JavaScript dilidir. Daha sonra da PHP öğrenmenizi tavsiye ediyorum. JavaScript'i iyi öğrenirsek PHP de çantada keklik olacaktır. Çünkü bu iki dilin mantığı birbirine çok yakındır.
Tabi ki her şeyde olduğu gibi bu işte de partik yapmak ve kafa yormak çok önemlidir. Umarım çok başarılı projelerde görev alırsınız ya da böyle projeleri yönetirsiniz...
Bizi takip ettiğiniz için teşekkürler.
CSS serüvenimize bekliyoruz: dersimizkod-css.blogspot.com.tr
