HTML SSE API'si
Sunucu Tarafından Gönderilen Olaylar (SSE), bir web sayfasının bir sunucudan güncellemeler almasına izin verir.
Sunucu Tarafından Gönderilen Olaylar - Tek Yönlü Mesajlaşma
Sunucu tarafından gönderilen bir olay, bir web sayfasının bir sunucudan otomatik olarak güncellemeler almasıdır.
Bu daha önce de mümkündü, ancak web sayfasının herhangi bir güncelleme olup olmadığını sorması gerekecekti. Sunucu tarafından gönderilen olaylarla, güncellemeler otomatik olarak gelir.
Örnekler: Facebook/Twitter güncellemeleri, hisse senedi fiyat güncellemeleri, haber beslemeleri, spor sonuçları vb.
Tarayıcı Desteği
Tablodaki sayılar, sunucu tarafından gönderilen olayları tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
Sunucu Tarafından Gönderilen Etkinlik Bildirimlerini Alın
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>";
};
Örnek açıkladı:
- 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ı gerçekleşir.
- Bir onmessage olayı meydana geldiğinde, alınan verileri id="result" ile öğeye koyun
Sunucu Tarafından Gönderilen Olaylar Desteğini Kontrol Edin
Yukarıdaki tryit örneğinde, sunucu tarafından gönderilen olaylar için tarayıcı desteğini kontrol etmek için bazı ekstra kod satırları vardı:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
Sunucu Tarafı Kodu Örneği
Yukarıdaki örneğin çalışması için veri güncellemeleri gönderebilen bir sunucuya ihtiyacınız var (PHP veya ASP gibi).
Sunucu tarafı olay akışı sözdizimi basittir. "Content-Type" başlığını "text/event-stream" olarak ayarlayın. Artık olay 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 "data: The server time is: {$time}\n\n";
flush();
?>
ASP'deki (VB) kod (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
Kod açıkladı:
- "Content-Type" başlığını "text/event-stream" olarak ayarlayın
- Sayfanın önbelleğe alınmaması gerektiğini belirtin
- Gönderilecek verilerin çıktısını alın ( Her zaman "data: " ile başlayın)
- Çıktı 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:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |