Sebelum melanjutkan pembahasan tentang reverse AJAX yang masi bersambung kemarin, kita pindah dulu sebentar ke sesuatu yang masih nyambung dengan reverse AJAX yaitu ke salah satu fitur di HTML 5 yang memungkinkan website kita dapat berinteraksi secara realtime. Fitur tersebut disebut dengan Server Sent Event (SSE).

SSE adalah API yang disediakan oleh HTML 5 untuk mem-push data dari server ke client. Dengan menggunakan SSE kita dapat mendapatkan update dari server tanpa harus mengirimkan data tertentu terlebih dahulu. Contoh implementasinya bisa berupa live notification, atau realtime timeline update, atau untuk untuk sistem penjualan bisa berupa realtime stock monitoring. Kelebihan SSE dibandingkan dengan web socket ataupun comet addalah, penggunaan SSE ini tidak memerlukan fitur tambahan pada server. Jadi kalaupun nantinya aplikasi kita dijalankan di shared hosting kita tetap bisa menggunakan fitur SSE ini.
Javascript API

Untuk bisa memperoleh event stream buat object EventSource dan arahkan ke URL Stream, seperti contoh berikut:

var source=new EventSource("path_to_event_file");

Kemudian untuk memperoleh message dari server kita panggil event onmessage dan memberikan handler apa yang akan kita lakukan terhadap message tersebut, seperti contoh berikut:

source.onmessage=function(event){

 /*event handler*/
};

Beberapa atribut yang terdapat pada SSE yaitu:

• new EventSource(URL) à digunakan untuk membuat object EventSource yang akan menerima event dari URL yang dispesifikasikan
• readyState à untuk mengetahui status EventSource apakah connecting, open, atau close
• onopen, onmessage à event yang dapat dikirimkan oleh EventSource
• event.dataà Konten dari message yang dikirimkan
• close à menutup koneksi dari client side

Property pada Server Sent Event

Server Sent Event memiliki beberapa fitur khusus yaitu:

• Stream koneksi dari server sifatnya read only.
• Menggunakan HTTP request biasa dan tidak membutuhkan protocol khusus.
• Jika koneksi terputus, EventSource akan mengirimkan event error kemudian mencoba mengkoneksikan kembali. Server juga akan mengelola timeout sebelum klien mencoba untuk mengkoneksikan kembali.
• Klien dapat mengirimkan ID unik di dalam pesan yang dikirimkan. Ketika klien mencoba untuk reconnect setelah koneksi terputus, server akan mengirimkan ID yang paling terakhir terkirim.

Event Stream Format

Untuk bisa mengirimkan data dari server maka harus mengawali dengan perintah ‘data:’ diikuti dengan pesan yang akan dikirimkan. Seperti contoh berikut:

data: My message\n\n

Jika pesan terdiri lebih dari satu baris, maka dapat dituliskan sebagai berikut:

data: first line\n
data: second line\n\n

Untuk mengirimkan data berupa JSON:

data: {\n
data: "msg": "hello world",\n
data: "id": 12345\n
data: }\n\n

Client Side untuk menghandle:

source.addEventListener('message', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.id, data.msg);
}, false);

Untuk memberikan nama tertentu dari Event:

data: {"msg": "First message"}\n\n
event: userlogon\n
data: {"username": "John123"}\n\n
event: update\n
data: {"username": "John123", "emotion": "happy"}\n\n

Client side untuk menghandle:

source.addEventListener('message', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.msg);
}, false);

source.addEventListener('userlogon', function(e) {
  var data = JSON.parse(e.data);
  console.log('User login:' + data.username);
}, false);

source.addEventListener('update', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.username + ' is now ' + data.emotion);
}, false);

Contoh Sederhana

Saya akan memberikan sedikit contoh sederhana untuk membuat live notification sistem. Pada contoh berikut, server akan mengirimkan jumlah notifikasi baru setiap ada penambahan data notifikasi belum terbaca pada database.

Langkah pertama kita buat tabel dulu di database bernama tabel notifikasi, dengan struktur sebagai berikut:

Atribut	Tipe Data	Keterangan
idnotifikasi	int	Auto_INCREMENT
isinotifikasi	varchar(100)	konten dari notifikasi
status	int	status notifikasi, 0 jika sudah terbaca, 1 jika belum terbaca

Buat file koneksi ke database dan query yang dibutuhkan:

$hostname="localhost";
$user="root";
$pass="";
$db="nama_db";

$con=mysql_connect($hostname, $user, $pass);
mysql_select_db($db,$con);

function getaktifnotifikasi(){
 require_once('koneksi.php');
 $notif=array();
 $sql="select * from notifikasi where status=1";
 $hasil=mysql_query($sql);
 $jumlah=mysql_num_rows($hasil);
 $i=1;
 if($jumlah > 0){
  while($pel=mysql_fetch_array($hasil)){
   $notif[$i]['idnotifikasi']=$pel['idnotifikasi'];
   $notif[$i]['isinotif']=$pel['isinotif'];
   $notif[$i]['status']=$pel['status'];
   $i++;
  }
 }
 return $notif;
}

Buat file notifikasi.php dengan isi sebagai berikut:

 0){
 echo "data: {$jumlah} \n\n"; /*pesan yang dikirimkan*/
}

flush();
?>

Buat file index.php untuk menampilkan notifikasi:

Data Baru

Jalankan. Coba tambah isi tabel dari database dengan bermacam status dan perhatikan hasilnya.

Setiap isi tabel bertambah maka jumlah notifikasi yang tampil pun akan berubah, begitu juga jika status notifikasi sudah terbaca maka jumlah notifikasi pun akan berkurang. Contoh ini adalah contoh paling sederhana, selamat mencoba… Read More