Html5 Server sent events mengijinkan sebuah web mengupdate secara otomatis dari server. Sebenarnya event seperti ini sudah ada sebelum adanya html5, tapi web page selalu confirm terlebih dahulu apakah ada update yang tersedia?. Nah, dengan server sent events ini web page akan update secara otomatis. Contoh web yang menggunakan server sent event adalah facebook, twitter, news feed, sport result dll.
Contoh Kode :
<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id=”result”></div>
<script>
if(typeof(EventSource)!==”undefined”)
{
var source=new EventSource(“demo_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>
Penjelasan :
- Buat objek EventSource baru, dan menentukan URL dari halaman untuk mengirimkan update (dalam hal ini “demo_sse.php”)
- Setiap kali update diterima, event onmessage terjadi.
- Ketika event onmessage terjadi, data yang diterima ditempatkan kedalam elemen dengan id=”result”
Agar contoh kode diatas dapat bekerja, kita perlu server yang mampu mengirimkan update data (seperti php atau ASP). Sintaks dari server sent ini sederhana, hanya Mengatur “Content-Type” header untuk “text / event-stream”. Kita sudah dapat mulai mengirim event stream
Kode PHP-nya (demo_sse.php):
<?php
header(‘Content-Type: text/event-stream’);
header(‘Cache-Control: no-cache’);
header(‘Content-Type: text/event-stream’);
header(‘Cache-Control: no-cache’);
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
$time = date(‘r’);
echo “data: The server time is: {$time}\n\n”;
flush();
?>
echo “data: The server time is: {$time}\n\n”;
flush();
?>
Kode ASP (demo_se.asp) :
<%
Response.ContentType=”text/event-stream”
Response.Expires=-1
Response.Write(“data: ” & now())
Response.Flush()
%>
Response.ContentType=”text/event-stream”
Response.Expires=-1
Response.Write(“data: ” & now())
Response.Flush()
%>
Penjelasan :
- Mengatur “Content-Type” header untuk “text / event-stream”
- Tentukan bahwa halaman tidak harus cache
- Output data untuk mengirim (Selalu mulai dengan “data:”)
- Flush / kirim data kembali kedalam halaman web
0 comments:
Post a Comment