HTML5 Server Sent Events

alfa6661
- October 02, 2013
0 (0 votes)
Rate :
HTML 5 Server Sent Events memungkinkan website kita dapat berinteraksi secara realtime

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\n

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

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

Contoh :

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

Demo - HTML 5 Server Sent

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article