Berkenalan dengan Server-sent Events

Server-sent Events, Apa dan Bagaimana?

Jika biasa halaman web harus request ke server dulu untuk mendapatkan data baru maka dengan Server-sent Events server dapat langsung mengirim data baru ke halaman web tersebut. Nah ini tentu berbeda dengan AJAX yang walaupun berjalan di latar belakang namun harus request terlebih dahulu baru mendapatkan data. Hal ini tentu sangat menguntungkan jika menginginkan aplikasi web yang langsung menampilkan update data terbaru dari server seperti monitor jaringan internet, monitor kondisi server, media sosial, dan lain sebagainya.

Tak Kenal Maka Tak Sayang

Nah, kali ini kita akan berkenalan lebih jauh tentang Server-sent Events agar tidak mengalami seperti yang dikatakan pepatah "Tak kenal maka tak sayang". Kita akan memulai membuat sebuah program sederhana. Tujuan program ini adalah untuk menerima waktu terbaru dari server.

Menerima Events dari Server

API (Application Programming Interface) dari Server-sent Event ini terdapat di EventSource interface. Untuk membuka koneksi ke server dan memulai menerima events dari server buatlah object EventSource baru dan tentukan alamat URI yang meng-generate events tersebut, misalnya:

var evtSource = new EventSource("server-send.php");

Jika script yang meng-generate event berada di alamat domain yang berbeda maka kita harus membuat EventSource object baru dengan menentukan URI dan options dictionary,misalnya:

var evtSource = new EventSource(
  "http://localhost/andi/server-send.php",
  {
    withCredentials: true
  }
);

Jika kita sudah meng-instansiasi EventSource maka kita dapat memulai me-listen message dari server.

evtSource.onmessage = function(e) {
    document.getElementById("jam").innerHTML = e.data;
}

Mengirim Event dari Server
Script program di server yang bertugas mengirimkan data event harus merespon menggunakan MIME type text/event-stream. Setiap notifikasi dikirimkan berupa text yang diakhiri oleh dua buah baris baru. Contohnya dalam program PHP adalah sebagai berikut:

<?php
header("Content-Type: text/event-stream");

echo "id: ".time().PHP_EOL;

echo "data: waktu server saat ini : ".date("Y-m-d H:i:s").PHP_EOL.PHP_EOL;

ob_flush();
flush();
?>

Penanganan Error (Error handling)
Ketika terjadi masalah (misalnya karena jaringan terputus atau masalah hak akses), sebuah error event di-generate. Kita bisa menangani masalah ini dengan menggunakan onerror callback di EventSource object.

evtSource.onerror = function(e) {
  alert("Maaf, terjadi kesalahan.");
};

Memutuskan Koneksi Events
Secara default, jika koneksi antara client dan server terputus, maka koneksi akan dihubungkan kembali. Kita bisa mengakhiri koneksi ini dengan method .close().

evtSource.close();

Untuk yang masih bingung bisa mencobanya dengan Download Program Demonya di https://app.box.com/s/ll7vm9wb7711wj0rkovg2fw3fscs979m

Referensi : https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events

Mungkin ini saja yang dapat saya sampaikan, saya tunggu kritik dan saran dari teman-teman. Salam Blogger Madura