HTML - Server Sent Events

Halo sana, para pengembang web yang bersemangat! Hari ini, kita akan memantulkan dunia yang menarik dari Server-Sent Events (SSE). Jangan khawatir jika Anda baru saja memulai programming; saya akan mengarahkan Anda melalui topik ini secara langkah demi langkah, sama seperti yang saya lakukan untuk ribuan murid selama tahun-tahun mengajar saya. Jadi, ambil secangkir kopi, dan mari kita mulai!

Apa itu Server-Sent Events?

Sebelum kita masuk ke kode, mari kita pahami apa itu Server-Sent Events. Bayangkan Anda menonton pertandingan olahraga secara langsung di online. Anda ingin melihat pembaruan skor secara real-time tanpa memuat ulang halaman. Itu tempat SSE berguna!

Server-Sent Events memungkinkan halaman web secara otomatis menerima pembaruan dari server. Itu seperti memiliki garis telepon langsung ke server, di mana server dapat mengirimkan pesan kepada Anda kapan saja tanpa Anda perlu meminta terus-menerus.

Bagaimana menggunakan SSE dalam Aplikasi Web?

Sekarang kita mengerti konsepnya, mari kita lihat bagaimana kita dapat mengimplementasikan SSE dalam aplikasi web kita. Kita akan mulai dengan kode sisi klien, yang ditulis dalam HTML dan JavaScript.

Langkah 1: Membuat objek EventSource

Pertama, kita perlu membuat objek EventSource dalam kode JavaScript kita. Objek ini akan mengatur koneksi ke server.

<h1>Live Sports Score</h1>
<div id="score"></div>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("score_updates.php");
source.onmessage = function(event) {
document.getElementById("score").innerHTML = event.data;
};
} else {
document.getElementById("score").innerHTML = "Maaf, browser Anda tidak mendukung server-sent events...";
}
</script>

mari kitauraikan ini:

1. Kita membuat judul dan elemen div tempat kita akan menampilkan skor.
2. Dalam script, kita pertama-tama memeriksa apakah browser mendukung EventSource.
3. Jika ya, kita membuat objek EventSource baru, menentukan URL script sisi server kita.
4. Kita kemudian menetapkan penangan event onmessage. Fungsi ini akan dipanggil setiap kali kita menerima pesan dari server.
5. Dalam fungsi itu, kita memperbarui konten div "score" dengan data yang diterima dari server.
6. Jika browser tidak mendukung SSE, kita menampilkan pesan informasi ke pengguna.

Script Sisi Server untuk SSE

Sekarang, mari kita lihat bagaimana kita menyiapkan script sisi server untuk mengirimkan event. Kita akan menggunakan PHP untuk contoh ini, tetapi konsep ini hampir sama dalam bahasa server-side lainnya.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendUpdate($score) {
echo "data: $score\n\n";
ob_flush();
flush();
}

$score = 0;
while (true) {
$score++;
sendUpdate("Current Score: $score");
sleep(5);  // Tunggu 5 detik sebelum mengirimkan pembaruan berikutnya
}
?>

mari kitaanalisis script ini:

1. Kita menyetel header yang sesuai untuk SSE.
2. Kita mendefinisikan fungsi sendUpdate yang mengirim data dalam format yang benar untuk SSE.
3. Kita memulai loop tak terbatas (dalam aplikasi nyata, Anda akan memiliki kondisi untuk menghentikan ini).
4. Dalam setiap iterasi, kita menambah skor dan mengirimkan pembaruan.
5. Kita kemudian menunggu 5 detik sebelum pembaruan berikutnya.

Menangani Server-Sent Events

Sekarang kita memiliki baik kode sisi klien dan sisi server, mari kita lihat bagaimana kita dapat menangani jenis event yang berbeda.

<h1>Live Sports Updates</h1>
<div id="score"></div>
<div id="commentary"></div>

<script>
var source = new EventSource("sports_updates.php");

source.addEventListener('score', function(e) {
document.getElementById('score').innerHTML = e.data;
}, false);

source.addEventListener('commentary', function(e) {
document.getElementById('commentary').innerHTML = e.data;
}, false);

source.onerror = function(e) {
console.log("Error: " + e);
};
</script>

Dalam contoh ini:

1. Kita membuat dua elemen div untuk skor dan komentar.
2. Kita menetapkan penangan event listener untuk dua jenis event: 'score' dan 'commentary'.
3. Setiap event memperbarui elemen berbeda pada halaman.
4. Kita juga menambahkan penangan error untuk mencatat kesalahan.

Script sisi server yang sesuai mungkin terlihat seperti ini:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendEvent($event, $data) {
echo "event: $event\n";
echo "data: $data\n\n";
ob_flush();
flush();
}

$score = 0;
$commentary = ["Great save!", "Close shot!", "Yellow card!"];

while (true) {
$score++;
sendEvent('score', "Current Score: $score");

if ($score % 3 == 0) {
$randomComment = $commentary[array_rand($commentary)];
sendEvent('commentary', $randomComment);
}

sleep(5);
}
?>

Script ini mengirimkan event 'score' setiap 5 detik, dan event 'commentary' setiap 15 detik (ketika skor dapat dibagi 3).

Tabel Metode

Berikut adalah tabel yang menggabungkan metode kunci yang kita gunakan:

Metode	Deskripsi
new EventSource(url)	Membuat koneksi baru ke server
EventSource.onmessage	Menangani pesan tanpa nama event tertentu
EventSource.addEventListener(event, callback)	Menangani pesan dengan nama event tertentu
EventSource.onerror	Menangani kesalahan dalam koneksi

Kesimpulan

Dan begitu juga! Kita telah menutupi dasar-dasar Server-Sent Events, dari pengaturan kode sisi klien hingga pembuatan server yang mengirimkan pembaruan. Ingat, SSE adalah alat yang kuat untuk membuat aplikasi web real-time, tetapi itu hanya komunikasi satu arah. Jika Anda memerlukan komunikasi dua arah, Anda mungkin ingin mencari WebSockets di masa mendatang.

Seperti halnya konsep programming lainnya, cara terbaik untuk belajar adalah dengan melakukan. Cobalah membuat aplikasi SSE Anda sendiri - mungkin sebuah sistem live chat atau papan peringkat saham. Kesempatan adalah tak terbatas!

Hati-hati coding, pengembang web masa depan! Ingat, setiap ahli pernah menjadi pemula, jadi jangan frustasi jika hal-hal tidak langsung berjalan mulus. Tetap latih, dan Anda akan menjadi ahli dalam waktu singkat!

Credits: Image by storyset