Event Server-Sent HTML

Event Server-Sent memungkinkan halaman web untuk mendapatkan pembaruan dari server.

Event Server-Sent - Messaging One Way

Event Server-Sent adalah halaman web yang otomatis mendapatkan pembaruan dari server.

Sebelumnya, hal ini mungkin juga dapat dilakukan, diharapkan halaman web harus bertanya apakah ada pembaruan yang tersedia. Melalui event Server-Sent, pembaruan dapat datang otomatis.

Contohnya: pembaruan Facebook/Twitter, pembaruan harga saham, artikel baru, hasil pertandingan, dan lain-lain.

Dukungan browser

Angka di tabel menunjukkan browser yang mendukung server-sent event paling awal.

API
SSE 6.0 Tidak didukung 6.0 5.0 11.5

Menerima pemberitahuan Server-Sent Event

Objek EventSource digunakan untuk menerima pemberitahuan event yang dikirimkan server:

Contoh

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

Coba sendiri

Penjelasan contoh:

  • Buat objek EventSource baru, dan tentukan URL halaman yang mengirimkan pembaruan (di contoh ini adalah "demo_sse.php")
  • Setiap kali menerima pembaruan, akan terjadi event onmessage
  • Ketika event onmessage terjadi, masukkan data yang telah diterima ke elemen dengan id "result"

Pengukuran dukungan Server-Sent Event

Pada contoh TIY, kami menulis kode ekstra untuk mengukur dukungan browser untuk event server mengirimkan:

if(typeof(EventSource) !== "undefined") {
    // Ya! Dukung event server mengirimkan!
    // Beberapa kode.....
} else {
    // Maaf! Tidak mendukung event server mengirimkan!
}

Contoh kode server

Untuk menjalankan contoh di atas, Anda perlu dapat mengirimkan pembaruan data server (seperti PHP atau ASP).

Sintaks event stream di server sangat sederhana. Atur header "Content-Type" menjadi "text/event-stream". Sekarang, Anda dapat mulai mengirim event stream.

Kode di 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 di 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 untuk tidak menyimpan halaman
  • Outputkan tanggal yang akan dikirim (selalu dimulai dengan "data: ")
  • Outputkan data ke halaman web yang baru di refresh

Objek EventSource

Dalam contoh di atas, kami menggunakan acara onmessage untuk mendapatkan pesan. Namun, Anda juga dapat menggunakan acara lain:

Event Deskripsi
onopen Ketika koneksi ke server dibuka
onmessage Ketika menerima pesan
onerror Ketika terjadi kesalahan