0Pricing
Frontend Academy · Pelajaran

Server-Sent Events untuk Streaming Satu Arah

Gunakan EventSource untuk menerima streaming event yang dikirim server, uraikan jenis dan data event, serta sambungkan kembali secara otomatis saat jaringan terputus.

Server-Sent Events untuk Streaming Satu Arah adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Server-Sent Events?

SSE adalah protokol berbasis HTTP standar yang digunakan server untuk mendorong peristiwa ke browser melalui satu koneksi berumur panjang. Satu arah: hanya dari server → klien. Ini lebih sederhana daripada WebSockets jika Anda tidak perlu mengirim data kembali.

API EventSource

EventSource milik browser tersambung ke URL dan mendengarkan peristiwa. API ini standar, tersedia secara bawaan, dan tidak memerlukan pustaka.

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

Format Respons Server

Server mengirim aliran teks biasa dengan Content-Type: text/event-stream. Setiap pesan dimulai dengan data: dan diakhiri baris kosong.

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

Peristiwa Bernama

Server dapat memberi nama peristiwa dengan event:. Browser memicunya dengan nama tersebut.

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

Penyambungan Kembali Otomatis

EventSource tersambung kembali secara otomatis saat terputus (setelah sekitar 3 detik). Server dapat menyarankan jeda dengan retry: 5000.

// Server:
retry: 5000\n
data: hello\n\n

ID Peristiwa dan Penyambungan Kembali

Server mengirim id: bersama setiap peristiwa. Setelah tersambung kembali, browser mengirim ID terakhir yang diterima dalam header Last-Event-ID — server dapat melanjutkan dari sana.

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

Mengurai JSON

event.data selalu berupa teks. Uraikan JSON sendiri.

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

Menutup Koneksi

Panggil es.close() untuk berhenti. Browser juga menutup koneksi saat tab ditutup.

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

Kasus Penggunaan

Dasbor langsung (metrik, pemantauan). Notifikasi (email baru, peringatan). Papan harga saham. Penyelesaian obrolan AI (setiap token = satu peristiwa). Skor olahraga langsung. Pembaruan status dari pekerjaan yang berjalan lama.

Contoh Nyata: Streaming AI

Penyelesaian dari OpenAI/Anthropic dialirkan sebagai SSE. Setiap token tiba sebagai peristiwa data — tampilkan secara bertahap untuk menghasilkan efek mengetik.

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE dibandingkan dengan WebSocket dan Polling

SSE: berbasis HTTP, hanya dari server ke klien, tersambung kembali secara otomatis, dan sederhana. WebSocket: dupleks penuh, beban tambahan per pesan lebih rendah, tetapi lebih kompleks. Polling: paling sederhana, tetapi latensi dan bebannya paling tinggi. Pilih SSE untuk streaming satu arah; gunakan WS untuk komunikasi dua arah seperti obrolan.

Batas Browser dan Proksi

Browser membatasi koneksi SSE bersamaan per asal (sekitar 6). Beberapa proksi perusahaan dan penyeimbang beban lama menyangga respons sehingga SSE rusak — uji di lingkungan target. Gunakan HTTPS untuk melewati sebagian besar penyimpanan sementara oleh proksi.

CORS untuk SSE

EventSource mematuhi CORS. Server harus mengirim Access-Control-Allow-Origin. Untuk kredensial, berikan { withCredentials: true } ke konstruktor EventSource dan tetapkan Access-Control-Allow-Credentials: true di server.

Pemeriksaan Singkat

Apa perbedaan utama antara Server-Sent Events dan WebSockets?

Ringkasan: Server-Sent Events

EventSource membuka aliran HTTP berisi peristiwa text/event-stream. Server mengirim pesan 'data:' dengan nama event: dan id: opsional. Penyambungan kembali otomatis dengan melanjutkan dari Last-Event-ID. Satu arah (server → klien). Cocok untuk dasbor langsung, streaming AI, dan notifikasi. Lebih sederhana daripada WebSocket jika komunikasi dua arah tidak diperlukan. Perhatikan batas koneksi bersamaan dan penyimpanan sementara oleh proksi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Server-Sent Events untuk Streaming Satu Arah” gratis?

Ya — teks lengkap “Server-Sent Events untuk Streaming Satu Arah” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Server-Sent Events untuk Streaming Satu Arah”?

Gunakan EventSource untuk menerima streaming event yang dikirim server, uraikan jenis dan data event, serta sambungkan kembali secara otomatis saat jaringan terputus. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Server-Sent Events untuk Streaming Satu Arah” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. API WebSocket: buka pesan tutup error
  2. Integrasi Klien Socket.io
  3. Server-Sent Events untuk Streaming Satu Arah
  4. Pola UI Waktu Nyata
← Kembali ke Frontend Academy