HTML5 Server-Sent Events

Sunucudan istemciye tek taraflı veri transferine imkan veren ve HTML5 ile gelen SSE API ve kullanımı ile ilgili bilgiler yer alıyor.

Server-Sent Events nedir?

Sunucudan istemciye tek taraflı veri transferi yapmayı sağlayan W3C (World Wide Web Consortium) tarafından HTML5 ile birlikte standart hale gelen teknolojidir.

Neden Server-Sent Events

Sosyal medya güncellemeleri, spor sonuçları, hisse senedi fiyatları gibi gerçek zamanlı web uygulamaları sürekli olarak veri alışverişinde bulunur.

Ancak HTTP protokolü tek taraflı iletişim sağlayan bir protokoldür. Sunucu sadece istemciden gelen isteklere göre cevap verir.

İstemci sunucudaki değişikliğe yeni bir istek ile ulaşır.

Yeni bir istek HTTP protokolündeki kuralların tekrar edilmesine ve fazla trafik kullanımına neden olur.

Trafik kullanımı ve HTP protokolüyle gerçek zamanlı uygulamaların yönetilmesi maliyetli ve zor olduğundan dolayı Server-Sent Events kullanılır.

Server-Sent Events ve Websocket farkı nedir?

Websocket hem istemci hemde sunucu tarafından veri taransferi yapılabilirken, Server-Sent Events teknolojisinde sadece sunucu tarafından veri transferi yapılır.

Websocket sağladığı istemci ve sunucu taraflı veri transferi sayesinde daha karmaşık bir API kullanımı sağlarken Server-Sent Events daha basit API kullanımı sağlar.

SSE API daha basit özelliklere sahip olduğundan AJAX, WebSocket gibi diğer gerçek zamanlı yöntemlere göre daha performanlıdır.

Server-Sent Events nasıl kullanılır?

Server-Sent Events kullanımı için Server-Sent Events sunucu kısmına ve SSE API destekleyen tarayıcıya ihtiyaç duyar.

Server-Sent Events sunucu tarafı

Sunucu tarafından veri gönderimi için Header Content-Type olarak text/event-stream ve Cache-Control olarak no-cache değerini göndermek yeterli olacaktır.

Aşağıdaki PHP ile yazılmış örnek yer almaktadır.

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

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

PHP HTTP Sunucusu çalıştırmak için PHP CLI yazıma bakabilirsin.

Aşağıdaki Node.js ile yazılmış örnek yer almaktadır.

'use strict';

const http = require('http');

const sunucu = http.createServer(function (request, response) {

  response.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Access-Control-Allow-Origin': '*'
    });

  const saat = new Date().toUTCString();
  response.write(`data: Sunucu saati: ${saat}\n\n`);

  response.end();

});

sunucu.listen(1453);

console.log('Sunucu çalışıyor...');

Detaylı bilgi almak için Node.js http Modülü yazıma bakabilirsin.

Server-Sent Events kullanımı

Server-Sent Events kullanımı için HTML5 ile birlikte gelen SSE API kullanılır.

SSE API içerisinde çeşitli özellik, olay ve metotlara sahip EventSource sınıfı yer alır.

Bağlantı kurmak

SSE API kullanarak bağlantı kurmak için sınıfın kurucusuna Server-Sent Events adresinin yazılması yeterli olacaktır.

var sse = new EventSource("http://localhost:8080/sse.php");

var sse = new EventSource("http://localhost:1453");

Bağlantı sağlandıktan sonra işlemler SSE API içindeki olaylar ile kontrol edilir.

onopen – Bağlantı sağlandığında tetiklenir.
onerror – Hata olduğunda tetiklenir.
onmessage – Sunucudan veri geldiğinde tetiklenir.

<script>
'use strict';
  var sse = new EventSource("http://localhost:8080/sse.php");

  sse.onopen = function (event) {
    console.log("Bağlantı sağlandı.");
  };
</script>

Veri almak

Sunucudan veri almak için onmessage olayına gönderilen MessageEvent sınıfındaki data özelliği kullanılır.

<script>
'use strict';
  var sse = new EventSource("http://localhost:8080/sse.php");

  sse.onopen = function (event) {
    console.log("Bağlantı sağlandı.");
  };

  sse.onmessage = function (event) {
    console.log("Mesaj alındı.");
    console.log("Alınan değer: " + event.data);
  };
</script>

NOT: Veri gönderimi ve alımı sırasında çeşitli dönüşüm işlemlerine ihtiyaç duyulabilir.

Bağlantıyı kapatmak

Sunucu ve istemci arasındaki bağlantıyı kapatmak için EventSource sınıfı içinde yer alan close metodu kullanılır.

<script>
'use strict';
  var sse = new EventSource("http://localhost:8080/sse.php");

  sse.onopen = function (event) {
    console.log("Bağlantı sağlandı.");
  };

  sse.onmessage = function (event) {
    console.log("Mesaj alındı.");
    console.log("Alınan değer: " + event.data);
    sse.close();
  };
</script>

Bağlantı sırasında veya veri alışverişi sırasında herhangi bir hata oluştuğunda onerror olayı tetiklenir.

<script>
'use strict';
  var sse = new EventSource("http://localhost:8080/hata.php");

  sse.onopen = function (event) {
    console.log("Bağlantı sağlandı.");
  };

  sse.onerror = function (event) {
    console.log("Hata oluştu.");
  };

  sse.onmessage = function (event) {
    console.log("Mesaj alındı.");
    console.log("Alınan değer: " + event.data);
    sse.close();
  };
</script>

Bağlantı SSE API içinde yer alan readyState özelliği ile kontrol edilebilir.

Server-Sent Events sağlamış olduğu basit API ve kullanımı sayesinde AJAX, WebSocket gibi diğer gerçek zamanlı yöntemlere göre esnek kullanım sağlar.

Özellikle sürekli sunucudan verilerin alındığı yapılarda kullanımı faydalı olacaktır.

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.