HTML5 SSE (Server Send Event)

 Author : hadinug, 18 March, 2014, Komentar



Aplikasi web konvensional biasa nya menghasilkan event yang dikirim ke server web . Misalnya kita melakukan event klik pada link untuk melakukan permintaan terhadap halaman baru ke server . Namun seiring dengan berkembangnya HTML khusunya untuk HTML5 , WHATWG Aplikasi Web 1.0 yang diperkenalkan sebagai peristiwa yang mengalir informasi dari web server ke browser web dan sering disebut dengan nama Server - Sent Events ( SSE ) . 



SSE melakukan peristiwa DOM terus menerus dari server ke browser pengunjung. SSE mengirimkan data ke klien ketika informasi baru tersedia dan menghilangkan pengambilan informasi yang terus menerus .Event server - mengirim standarisasi bagaimana sebuah data  mengalir dari server ke klien .


Aplikasi Web untuk SSE :

Untuk menggunakan Server - Sent Events dalam aplikasi web , kita harus menambahkan elemen ke <eventsource> document dimana.src atribut <eventsource> menunjuk ke sebuah URL yang menyediakan koneksi http untuk mengirim wadah aliran data yang berisi informasi .


PHP Script - sse.php


<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>


HTML & Javascript


<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
  {
  var source=new EventSource("sse.php");
  source.onmessage=function(event)
    {
    document.getElementById("result").innerHTML+=event.data + "<br>";
    };
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
  }
</script>

</body>
</html>

Silahkan coba dan jalankan script diatas, dan mulailah dicobakan diberapa browser untuk melihat apakah SSE sudah mendukung banyak browser. Selamat mencoba!


 
Bagikan halaman ke sosial media
 
Tags :   javascript    html5       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda