Last Updated on May 25, 2022 by
Agar informasi di situs web Anda terus diperbarui, Anda perlu membuat koneksi dengan server web. Salah satu cara untuk melakukannya adalah menggunakan XMLHttpRequests namun, mereka harus dikirim ulang untuk menerima respons untuk setiap pembaruan.
Oleh karena itu HTML 5 menyediakan fitur Server-Sent Event (SSE). Seperti apakah HTML 5 Server-Sent Event itu? Server-sent digunakan ketika halaman web secara otomatis mendapatkan pembaruan dari server. Ini juga mungkin sebelumnya, tetapi halaman web harus menanyakan apakah ada pembaruan yang tersedia.
Dengan event yang dikirim server, pembaruan datang secara otomatis. Contoh: Pembaruan Facebook/Twitter, pembaruan harga saham, umpan berita, hasil olahraga, dan lain sebagainya.
Dengan menggunakan HTML5 Server-Sent Event, Anda dapat membuat koneksi yang bertahan lebih lama dan menerima pembaruan dalam aliran konstan. Umpan berita, jejaring sosial, olahraga, dan pembaruan cuaca adalah contoh bagus tentang siapa yang dapat memanfaatkan acara yang dikirim server HTML5.
Menerima dan Mengirim SSE
Berikut ini adalah contoh kode untuk mengirim dan menerima SSE.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="scripts.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Buat file sse.php terlebih dahulu agar contoh ini dapat bekerja</p>
<h1>Waktu pada server:</h1>
<div id="hasil"></div>
</body>
</html>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("sse.php");
source.onmessage = function(event) {
document.getElementById("hasil").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("hasil").innerHTML = "Error";
}
</script>
Dalam tanda kurung, file PHP bernama sse.php didefinisikan. File yang ditulis dalam bahasa pemrograman dinamis diperlukan untuk mengirim pembaruan HTML5 ke browser.
EventSource membuka koneksi jangka panjang yang hanya akan selesai saat Anda memanggil EventSource.close(). Sambungan ini memungkinkan browser menerima event yang dikirim server HTML5 dalam jenis media teks/aliran event. Namun, ini hanya satu arah: browser tidak dapat mengirim data apa pun ke server.
Berikut ini adalah event yang relevan dengan objek EventSource:
| Event | Description |
| Open | Koneksi ke server diaktifkan |
| Error | Sambungan ke server gagal |
| Message | Sebuah pesan dikumpulkan |
Contoh Kode Server Side dengan PHP
Server dapat mengirim pembaruan HTML5 melalui ASP atau PHP jika diperlukan. Sintaksnya tidak rumit jika Anda memiliki setidaknya beberapa pengetahuan dasar dalam bahasa tersebut:
#isi dari file sse.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$waktu = date('r');
echo "Waktu server: {$waktu}";
flush();
Itulah penjelasan tentang HTML 5 Server Side Event (SSE). Event yang dikirim server HTML5 sedikit mirip dengan WebSockets. Namun, WebSockets lebih rumit untuk digunakan dan memerlukan protokol unik, sementara SEE bergantung pada HTTP.
Pastikan untuk menggunakan pengkodean karakter UTF-8 untuk aliran data teks jika Anda bekerja dengan SSE. Pemberitahuan HTML5 untuk pembaruan dapat dialihkan seperti permintaan HTTP lainnya.
Jika ingin tahu materi HTML/CSS lainnya, jangan lupa kunjungi Codekey di https://codekey.id/ dan dapatkan berbagai materi terbaru seputar bahasa pemrograman.
Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.
