Dalam pengembangan aplikasi web real-time, banyak developer langsung mengacu pada WebSocket untuk komunikasi dua arah antara server dan klien. Namun, untuk kasus di mana komunikasi hanya satu arah (server ke klien), Server-Sent Events (SSE) bisa menjadi alternatif yang lebih ringan dan lebih mudah diimplementasikan dibandingkan WebSocket.
Apa Itu Server-Sent Events (SSE)?
SSE adalah teknologi berbasis HTTP yang memungkinkan server mengirimkan data ke klien secara real-time melalui koneksi unidirectional (satu arah). SSE menggunakan standar EventSource API yang sudah didukung secara native di browser modern.
SSE bekerja dengan cara:
- Klien membuat koneksi ke server menggunakan
EventSource. - Server mengirimkan event secara berkala dalam format teks/event-stream.
- Klien menerima event tanpa perlu meminta ulang (polling).
Keunggulan Server-Sent Events (SSE)
- Lebih sederhana dibandingkan WebSocket karena hanya menggunakan koneksi HTTP standar.
- Efisien dalam konsumsi resource karena tidak memerlukan handshake tambahan seperti WebSocket.
- Dukungan native di browser melalui objek
EventSourcetanpa perlu library tambahan. - Dapat digunakan dengan HTTP/2 untuk efisiensi lebih tinggi dalam multiplexing.
- Reconnect otomatis jika koneksi terputus.
Namun, SSE memiliki keterbatasan yaitu hanya mendukung komunikasi satu arah dan jumlah koneksi dibatasi oleh browser (biasanya 6 koneksi per domain).
Implementasi Server-Sent Events (SSE)
Berikut adalah implementasi sederhana SSE menggunakan Node.js sebagai backend dan JavaScript di frontend.
1. Membuat Server SSE dengan Node.js
const express = require('express');
const app = express();
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
setInterval(() => {
res.write(`data: ${JSON.stringify({ message: "Update terbaru!" })}\n\n`);
}, 3000);
});
app.listen(3000, () => console.log('Server berjalan di port 3000'));
Baca juga: Apa Itu Rendering dengan useMemo dan useCallback di React ?
2. Menghubungkan Frontend dengan SSE
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Update dengan SSE</title>
</head>
<body>
<h2>Update Real-Time:</h2>
<div id="updates"></div>
<script>
const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
document.getElementById('updates').innerHTML += `<p>${data.message}</p>`;
};
</script>
</body>
</html>
Perbandingan SSE vs WebSocket
| Fitur | SSE | WebSocket |
|---|---|---|
| Tipe Komunikasi | Satu arah (server ke klien) | Dua arah |
| Kompleksitas | Mudah diimplementasikan | Lebih kompleks |
| Dukungan HTTP/2 | Ya | Tidak |
| Auto-Reconnect | Ya | Perlu diatur manual |
| Dukungan Browser | Native dengan EventSource | Perlu JavaScript API |
Kapan Menggunakan SSE?
SSE cocok digunakan untuk aplikasi yang membutuhkan update real-time tetapi hanya dari server ke klien, seperti:
- Feed berita atau notifikasi live.
- Data harga saham yang diperbarui secara berkala.
- Update skor pertandingan olahraga.
- Dashboard monitoring yang menerima data periodik.
Jika aplikasi Anda memerlukan komunikasi dua arah (misalnya chat atau game multiplayer), WebSocket tetap menjadi pilihan yang lebih baik.
Kesimpulan
SSE adalah solusi ringan untuk update real-time dari server ke klien tanpa kompleksitas WebSocket. Dengan implementasi sederhana menggunakan Node.js dan Express, kita bisa mendapatkan update real-time tanpa polling.
Dengan memahami kelebihan dan keterbatasan SSE, Anda bisa memilih teknologi yang paling sesuai dengan kebutuhan aplikasi Anda.
