HTML

HTML SSE API: Cara Membuat dan Codenya

Server-Sent Events (SSE) memungkinkan sebuah halaman web untuk mendapatkan pembaruan (update) dari server.

Server-Sent Events – Pesan Satu Arah

Server-sent event (SSE) adalah keadaan saat dimana sebuah halaman web mendapatkan pembaruan dari server secara otomatis.

Pembaruan otomatis juga sudah ada sebelumnya, tetapi halaman web harus menanyakan terlebih dahulu apakah ada pembaruan yang tersedia. Dengan adanya Server-sent event (SSE), pembaruan akan dilakukan secara otomatis.

Contoh: Pembaruan Facebook / Twitter, pembaruan harga saham, berita-berita, hasil pertandingan olahraga, dll.

Browser Support

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Server-sent event (SSE).

APIChromeEdgeFirefoxSafariOpera
SSE6.079.06.05.011.5

Terima Notifikasi dari Server-sent event (SSE).

Objek EventSource digunakan untuk menerima pemberitahuan dari SSE.

Contoh :

<!DOCTYPE html>
<html>
<body>

<h1>Mendapatakan pembaruan server</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 = "Maaf, browser Anda tidak mendukung SSE ...";
}
</script>

</body>
</html>

penjelasan contoh :

  • Buat objek EventSource baru, dan tentukan URL halaman yang mengirimkan update (dalam contoh ini “demo_sse.php”)
  • Setiap kali pembaruan diterima, event onmessage terjadi
  • Ketika sebuah event onmessage terjadi, masukkan data yang diterima ke dalam elemen dengan id = “result”

Periksa apakah browser mendukung SSE

Dalam contoh di atas ada beberapa baris kode tambahan untuk memeriksa dukungan browser terhadap SSE, yaitu pada kode :

if(typeof(EventSource) !== "undefined") {
  // Ya! Mendukung Server-sent events!
  // Some code.....
} else {
  // Maaf, browser Anda tidak mendukung SSE ...
}

Contoh kode server-side

Agar contoh di atas berfungsi, maka memerlukan server yang mampu mengirim pembaruan data (seperti PHP atau ASP).

Event stream server-side sintaksnya sederhana yaitu atur header “Content-Type” menjadi “text / event-stream”. Sekarang sudah bisa memulai event-stream.

Contoh :

Kode pada php (demo_sse.php)

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

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

Kode pada ASP (VB) (demo_sse.asp)

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Penjelasan kode :

  • Atur header “Content-Type” menjadi “text / event-stream”
  • Tentukan bahwa halaman tersebut tidak boleh disimpan dalam cache
  • Keluarkan data yang akan dikirim (Selalu dimulai dengan “data:”)
  • Hapus data output kembali ke halaman web

Object EventSource

Dalam contoh di atas menggunakan event onmessage untuk mendapatkan pesan. Tetapi event yang lain juga tersedia:

EventsDeskripsi
onopenSaat koneksi ke server dibuka
onmessageSaat pesan diterima
onerrorSaat terjadi kesalahan


Catur Kurnia Sari

Share
Tags: APIhtmlSSE