SSE - Server Sent Events HTML5

Mungkin teman" banyak yang terkejut dengan artikel SSE ini dan bertanya - tanya "Apa si Server Sent Events itu ??" . banyak orang yang belum mengenal dengan Server Sent Events dari html5 ini. dan memang seharusnya begitu..

kali ini saya ingin sharing sedikit tutorial singkat yang saya dapat dari http://www.html5rocks.com , tentang cara kerja Server Sent Events dari Html5 ini.


Cara kerja SSE : 

Cara kerja SSE cukup mudah rupanya, yaitu Server akan mengirim data ke client tanpa client melakukan permintaan apapun. metode ini berbanding terbalik dengan Metode AJAX, dimana client harus melakukan permintaan terlebih dahulu ke server untuk mendapatkan data. Mungkin bagi anda yang sering menggunakan ajax dengan jquery akan sedikit terkesan dengan metode SSE ini.

Biasanya jika kita ingin membuat aplikasi Chatting atau pun applikasi Live lainnya maka secara otomatis kita akan melakukan permintaan ke server jika menggunakan metode Ajax dengan memanfaatkan fungsi  setTimeout dari javascript dimana kita akan melakukan permintaan setiap detik nya atau dalam jangka waktu yang kita di tentukan.

Sebenarnya cara ini cukup tidak efektif, !!! kenapa bisa demikian ??? coba anda bayangkan jika client harus meminta data terus menerus setiap detik ke server sedangkan di sever sendiri belum ada satupun data yang di Update. lalu bayangkan jika dalam applikasi anda ini masih ada lagi fungsi-fungsi lainnya yang berjalan secara bersamaan dengan applikasi live atau apapun milik anda yang menggunakan fungsi setTimeout !!

nah loh ?. Server Sent Event html5 ini cukup keren menurut saya, karena kita tidak perlu lagi menggunakan metode setTimeout yang akan berulang terus menerus setiap detik nya melainkan browser client hanya diam, dan data akan di kirimkan oleh server secara otomatis,

anda bisa bandingkan fungsi SSE ini dengan Ajax dan setTimeout nanti di Firebug. anda akan lihat betapa repot nya metode Ajax yang menggunakan fungsi setTimeout di firebug .

Tutorial SSE : 

Pertama buatlah  EventSource ,sumber object dari data server anda :

if (!!window.EventSource) {
  var source = new EventSource('alamat-data-server.php');
  // hasil di sini
} else {
  // jika ada kesalahan
}

Catatan : alamat-data-server.php : Alamat ini adalah alamat server data yang akan kita buat dengan php nanti .


Berikutnya membuat handler event  (message, error, dan  open ) yang akan menampilkan hasil data yang dikirim dari server :

source.addEventListener('message', function(e) {
  console.log(e.data);
  // hasil data dari server
}, false);

source.addEventListener('open', function(e) {
  // hasil koneksi terbuka
}, false);

source.addEventListener('error', function(e) {
  if (e.readyState == EventSource.CLOSED) {
    // hasil koneksi tertutup
  }
}, false);

Catatan :  Ketika update di kirim dari server,  handler message dan data baru akan tersedia di properti e.data . Bagian magic nya adalah bahwa setiap kali koneksi ditutup, browser secara otomatis akan menyambung kembali ke sumber data server setelah ~ 3 detik. Implementasi server Anda bahkan dapat memiliki kontrol waktu batas rekoneksi. Lihat cara mengontrol rekoneksi-timeout pada bagian berikutnya.

Itu saja. sekarang Anda siap untuk memproses peristiwa ke client dari alamat-data-server.php.

!!! . console.log -> hanya untuk melihat output di firebug, dapat di ganti dengan document.write jika ingin di tampilkan ..

format data yang akan di kirim server.
Untuk mengirim data dari server anda dapat mengirimnya dengan format (dari PHP) sebagai berikut :

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

echo "data: Tulis pesan atau apapun di sini . \n\n";
echo "retry: 1000 \n\n";
flush();
?>

catatan : setiap penulisan pesan harus di dahului dengan kata "data:" (tanpa tanda kutip) .. dan di akhiri dengan (\n\n) . dan setiap lembarannya di akhiri dengan flush(). kataretry untuk pengulangan pengiriman data dari server ke client. waktu di gunakan adalah :

1000 = 1 detik .

10000 = 10 detik .

dan seterusnya ...

penting !!! .. kata 'data:' harus menggunakan titik dua dan tidak boleh ada spasi antara kata 'data' dan titik dua tersebut. saya harap dapat di mengerti .

Anda pun dapat mengirim data json dengan SSE ini,  :
buat file . data.php :

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

echo "data: {\"nama\" : \"aldi blues gell\"} \n\n";
echo "retry: 1000 \n\n";

flush();
?>

dan untuk pemanggilan di client nya sebagai berikut :
 buat sse.php : 

  <script type='text/javascript' src='http://localhost/jquery.js'></script>
// load jquery ..

   <div id='area'></div>

   <script>
   if(typeof(EventSource)!=="undefined") {

// load data dari server
      var source= new EventSource("data.php");

      source.addEventListener('message', function(e) {

// Parse JSON
      var data = JSON.parse(e.data);

// append data ke id area
       $("#area").append(data.nama + "<br />");

      }, false);
    
    }else
    {
     $("#area").append("tidak support");
     }
</script>

output : aldi blues gell

untuk kedepannya bisa anda kembangkan sendiri,seperti mengirimkan ID tertentu menggunakan event berbeda-beda dan lain-lain sebagainya.

jujur saya sendiri juga masih dalam proses pembelajaran, maklum masih newbe . hehehe . untuk lebih jelasnnya tentang tutorial ini anda dapat lihat di sini http://www.html5rocks.com/en/tutorials/eventsource/basics/

jika ada salah kata ataupun arti yang kurang jelas mohon di luruskan ..

CMIIW ... :D