HTML 5 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 : Update facebook/twitter, news feeds, dll.
Browser Support :
Server-Sent Events support di hampir semua browser, kecuali Internet Explorer.
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: Your message\n\nJika pesan terdiri lebih dari satu baris, maka dapat dituliskan sebagai berikut:
data: first line\n
data: second line\n\nContoh :
Client Side
<!DOCTYPE html>
<html>
<head>
<title>SEE Example</title>
</head>
<body>
<script type="text/javascript">
// Pengecekan support atau tidaknya EventSource
if(typeof(EventSource) !== "undefined") {
// Membuat objek EventSource baru
// dan menentukan URL halaman mengirimkan update ("demo.php")
var source = new EventSource("demo.php");
// Event ketika pesan di terima
source.onmessage = function(e) {
document.getElementById("result").innerHTML += e.data + "<br/>";
};
}
else {
document.getElementById("result").innerHTML = "Not Support";
}
</script>
<div id="result"></div>
</body>
</html>Server Side
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: {$time}\n\n";
flush();
?>Ouputing JSON
Client Side
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo.php");
source.onmessage = function(e) {
var d = JSON.parse(e.data);
document.getElementById("result").innerHTML += d.name + " : " + d.time + "
";
};
}
else {
document.getElementById("result").innerHTML = "Not Support";
}Server Side
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$a = array(
'name' => "Alfa Adhitya",
'time' => date('r')
);
echo "data: " . json_encode($a);
echo PHP_EOL;
echo PHP_EOL;
flush();
?>Memberikan nama Event:
Client Side
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo.php");
source.addEventListener('user', function(e) {
var d = JSON.parse(e.data);
document.getElementById("result").innerHTML += "user: " + d.username + "
";
}, false);
}
else {
document.getElementById("result").innerHTML = "Not Support";
}Server Side
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$a = array(
'username' => "Alfa Adhitya",
);
echo "data: " . json_encode($a);
echo PHP_EOL;
// Event user
echo "event: user";
echo PHP_EOL;
echo PHP_EOL;
flush();
?>Demo
No Comments
Leave a comment Cancel