API SSE HTML
Server-Sent Events (SSE) memungkinkan halaman web untuk mendapatkan pembaruan dari server.
Acara Terkirim Server - Pesan Satu Arah
Peristiwa yang dikirim server adalah ketika halaman web secara otomatis mendapatkan pembaruan dari server.
Ini juga mungkin sebelumnya, tetapi halaman web harus menanyakan apakah ada pembaruan yang tersedia. Dengan acara yang dikirim server, pembaruan datang secara otomatis.
Contoh: Pembaruan Facebook/Twitter, pembaruan harga saham, umpan berita, hasil olahraga, dll.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung peristiwa yang dikirim server.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
Terima Pemberitahuan Acara yang Dikirim oleh Server
Objek EventSource digunakan untuk menerima pemberitahuan acara yang dikirim server:
Contoh
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Contoh menjelaskan:
- Buat objek EventSource baru, dan tentukan URL halaman yang mengirim pembaruan (dalam contoh ini "demo_sse.php")
- Setiap kali pembaruan diterima, acara pesan terjadi
- Saat event onmessage terjadi, masukkan data yang diterima ke dalam elemen dengan id="result"
Periksa Dukungan Acara Terkirim Server
Dalam contoh tryit di atas ada beberapa baris kode tambahan untuk memeriksa dukungan browser untuk peristiwa yang dikirim server:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
Contoh Kode Sisi Server
Agar contoh di atas berfungsi, Anda memerlukan server yang mampu mengirim pembaruan data (seperti PHP atau ASP).
Sintaks aliran peristiwa sisi server sederhana. Setel tajuk "Jenis Konten" ke "teks/aliran peristiwa". Sekarang Anda dapat mulai mengirim aliran acara.
Kode dalam 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 dalam ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
Kode menjelaskan:
- Setel tajuk "Jenis Konten" ke "teks/aliran peristiwa"
- Tentukan bahwa halaman tidak boleh di-cache
- Keluarkan data yang akan dikirim ( Selalu mulai dengan "data:")
- Siram data output kembali ke halaman web
Objek EventSource
Dalam contoh di atas kami menggunakan acara onmessage untuk mendapatkan pesan. Tapi acara lain juga tersedia:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |