Peristiwa Server-Sent HTML

Peristiwa Server-Sent memungkinkan halaman mengambil pembaruan dari server.

Peristiwa Server-Sent - Pesan Berarah Satu

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

Sebelumnya ini juga dapat dilakukan, diharapkan halaman web untuk bertanya apakah ada pembaruan yang tersedia. Melalui peristiwa Server-Sent, pembaruan dapat datang otomatis.

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

Dukungan browser

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

API
SSE 6.0 Tidak mendukung 6.0 5.0 11.5

Menerima pemberitahuan Server-Sent Event

Objek EventSource digunakan untuk menerima pemberitahuan peristiwa pengiriman server:

Contoh

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

Coba sendiri

Pengertian contoh:

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

Pengecekan dukungan Server-Sent Event

Pada contoh TIY, kami menulis kode tambahan untuk mengecek dukungan browser untuk peristiwa pengiriman server:

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

Contoh kode server

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

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

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 melakukan pengecapan halaman
  • Tentukan tanggal yang akan dikirimkan (selalu dimulai dengan "data: ")
  • Outputkan data ke halaman web yang direfresh

Objek EventSource

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

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