Berkenalan dengan Server-sent Events

Sumber : http://techtach.com
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

BAGIKAN KE:

9 komentar:

  1. Dengan mencaoba-coba, akhirnya bisa jalan Kang... Tapi terus terang belum tahu buat apaan nihh?

    http://demo.asanoer.com/java-scr/server-sent-events/

    BalasHapus
    Balasan
    1. ketika akang butuh aplikasi yang harus selalu mendapat update terbaru dari server kang maka ini layak dicoba, teknologi baru daripada pake ajax kang lebih hemat bandwith...

      Hapus
  2. Hehehe... Sorry Kang Gan Andi, belum maksud juga... aplikasi contoh nyatamya ada gak ya? Kayak aplikasi sistem rumah sakit?

    BalasHapus
    Balasan
    1. contoh kasusnya kalo ente pernah pake plugin wordpress, maka plugin tersebut jika ada update baru langsung di beritahu ke website ente.
      CMIIW

      Hapus
    2. Gan Husni... Sorry baru buka2 webnya Gan Andi lagi..

      Ya sepertinya emang gitu, si wirdpress bisa tahu jumlah installernya dan webnya ada di mana saja ternyata ada aplikasi spy ginian ya.. weww mau coba2 mainan coding party ini ahh...

      Thanks Gan Husni , btw punya website cantik gak? Kenalin dong..

      Hapus
  3. Ok, mari kita berkenalan dengan ini..hehehe

    BalasHapus
    Balasan
    1. Terima kasih Mbak Aganwati.. Sudah mampir di web coding party ini.. Semoga toko mbak laris dan mudah2an bermanfaat... aku simpen kontaknya, x saja butuh.. insyaAllah..

      asanoer.com

      Hapus
  4. bang ada gak untuk universitasnya

    BalasHapus