1. HTML

HTML5 Server Sent Events

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

Comments to: HTML5 Server Sent Events

    Your email address will not be published. Required fields are marked *

    Attach images - Only PNG, JPG, JPEG and GIF are supported.