Server-Sent event HTML

Server-Sent event memungkinkan halaman web untuk menerima pembaruan dari server.

Server-Sent event - Pemancingan Pesan Satu Arah

Server-Sent event adalah halaman web yang otomatis menerima pembaruan dari server.

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

Contohnya: pembaruan Facebook/Twitter, pembaruan 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 mendukung 6.0 5.0 11.5

Menerima pemberitahuan Server-Sent 事件

Objek EventSource digunakan untuk menerima pemberitahuan peristiwa yang dikirimkan 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 terjadi pembaruan, peristiwa onmessage akan terjadi
  • Ketika peristiwa onmessage terjadi, masukkan data yang telah diterima ke elemen dengan id "result"

Pengesahan dukungan Server-Sent 事件

Pada contoh TIY, kami menulis kode tambahan untuk mengesahkan dukungan pemberitahuan server-sent browser:

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

Contoh kode server

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

Syarat tata letak aliran acara paling sederhana di sisi server. Buat header "Content-Type" menjadi "text/event-stream". Sekarang, Anda dapat mulai mengirim aliran acara.

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
  • Tentukan tanggal yang akan dikirim (selalu dimulai dengan "data: ")
  • Kirim data ke output perefresh halaman web

Objek EventSource

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

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