Tujuan Pembelajaran

Memahami konsep SSE dan bedanya dengan WebSocket
Bisa mengimplementasikan notifikasi real-time dengan SSE

Analogi

Diagram


      SSE = Radio (Satu arah, banyak pendengar):
[Stasiun] → 🎵 → [Pendengar A]
        → 🎵 → [Pendengar B]

SSE seperti radio — server broadcast ke banyak client

Penjelasan Konsep

Server-Sent Events (SSE)

Server-Sent Events (SSE) adalah teknologi untuk mengirim data real-time dari server ke client melalui satu koneksi HTTP yang tetap terbuka. Bedanya dengan WebSocket: SSE hanya satu arah (server → client).

SSE vs WebSocket

Fitur	SSE	WebSocket
Arah	Server → Client	Dua arah
Protokol	HTTP	WebSocket
Reconnect	Auto	Manual
Cocok untuk	Notifikasi, feed	Chat, gaming

Keunggulan SSE

Lebih simpel dari WebSocket.
Auto-reconnect bawaan.
Bisa pakai HTTP.
Event ID untuk resume dari disconnect.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami konsep SSE dan bedanya dengan WebSocket., dan bisa mengimplementasikan notifikasi real-time dengan SSE. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Server-Sent Events (SSE), gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

SSE seperti radio — server broadcast ke banyak client. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa javascript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 2-6: SSE connection dan message handler. Baris 8-11: Event spesifik. Baris 18-25: Server kirim data periodic.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

javascript

// SSE CLIENT
const eventSource = new EventSource('/api/notifications');

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Notifikasi:', data);
};

eventSource.addEventListener('price-update', (event) => {
  const price = JSON.parse(event.data);
  updatePriceDisplay(price);
});

eventSource.onerror = () => {
  console.log('Auto-reconnect akan terjadi!');
};

// SSE SERVER
app.get('/api/notifications', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  
  const interval = setInterval(() => {
    const data = { time: new Date().toISOString() };
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 5000);
  
  req.on('close', () => clearInterval(interval));
});

Penjelasan Kode

Baris 2-6: SSE connection dan message handler. Baris 8-11: Event spesifik. Baris 18-25: Server kirim data periodic.

Prompt AI

Jelaskan kenapa SSE punya auto-reconnect bawaan.

Pertanyaan Reflektif

Implementasi notifikasi real-time dengan SSE. Coba disconnect — apakah auto-reconnect?