Server-Sent Events (SSE) memungkinkan sebuah halaman web untuk mendapatkan pembaruan (update) dari server.
Section Artikel
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).
| API | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.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:
| Events | Deskripsi |
|---|---|
| onopen | Saat koneksi ke server dibuka |
| onmessage | Saat pesan diterima |
| onerror | Saat terjadi kesalahan |
