Server-Sent Event HTML

Server-Sent Event memungkinkan halaman untuk mendapatkan update dari server.

Server-Sent Event - Pemесsangan Satu jalur

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

Hal ini mungkin juga dapat dilakukan sebelumnya, diharapkan halaman untuk bertanya apakah ada update yang tersedia. Melalui Server-Sent Event, update dapat datang otomatis.

Contohnya: Facebook/Twitter update, update saham, artikel baru, hasil pertandingan, dan sebagainya.

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 pengirim 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 update (di contoh ini adalah "demo_sse.php")
  • Setiap kali menerima update, akan terjadi peristiwa onmessage
  • Ketika peristiwa onmessage terjadi, lakukan push data yang sudah diterima ke elemen dengan id "result"

Mendeteksi dukungan Server-Sent Event

Pada contoh TIY, kami menulis kode tambahan untuk mendeteksi dukungan pemberitahuan event pengirim server browser:

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

Contoh kode server

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

Syarat kalimat untuk aliran acara pelayan sangat sederhana. Atur tajuk "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 tajuk "Content-Type" menjadi "text/event-stream"
  • Tentukan untuk tidak menyimpan halaman
  • Tentukan tanggal yang akan dikirimkan (selalu dimulai dengan "data: ")
  • Mengeluarkan data untuk 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