Menggunakan Stream SSE di React dengan EventSource

new EventSource(url) membuat koneksi SSE ke URL yang ditentukan. Peramban segera membuka permintaan HTTP GET dengan header Accept: text/event-stream. Server mempertahankan koneksi ini tetap terbuka dan mengalirkan peristiwa. EventSource adalah API bawaan peramban — tidak diperlukan pustaka untuk penggunaan dasar.

EventSource memiliki tiga status kesiapan: 0 (CONNECTING) — koneksi sedang dibuat atau dibuat ulang, 1 (OPEN) — koneksi telah dibuat dan peristiwa sedang mengalir, 2 (CLOSED) — koneksi ditutup dan tidak akan tersambung kembali. Periksa eventSource.readyState untuk menentukan status saat ini.

Penangan eventSource.onmessage dijalankan untuk peristiwa server yang tidak memiliki jenis peristiwa eksplisit, yaitu saat server mengirim data: ... tanpa kolom event:. Penangan tersebut menerima objek peristiwa dengan event.data sebagai muatan berbentuk string. Server biasanya menggunakan JSON.stringify pada data sehingga Anda dapat menggunakan JSON.parse saat menerimanya.

Server dapat mengirim peristiwa bernama: event: userJoined data: {"userId": "123"} . Di peramban, dengarkan peristiwa tersebut dengan eventSource.addEventListener('userJoined', handler). Dengan cara ini, beberapa jenis peristiwa dapat disalurkan melalui satu koneksi SSE — setiap jenis peristiwa memiliki penangannya sendiri sehingga kode tetap rapi dan terorganisasi.

Data SSE tiba dalam bentuk string. Untuk data terstruktur, server mengirim JSON.stringify(payload) dan klien mengurainya: const data = JSON.parse(event.data). Selalu bungkus JSON.parse dalam blok try/catch agar JSON yang formatnya salah dari server dapat ditangani dengan baik, dengan mencatat kesalahannya dan mengabaikan peristiwa yang formatnya salah.

Buat dan tutup EventSource di dalam useEffect: buat koneksi saat komponen dipasang, pasang penangan peristiwa, dan kembalikan fungsi pembersihan yang memanggil eventSource.close(). Tanpa pembersihan tersebut, koneksi akan bocor saat komponen dilepas, pengguna berpindah halaman, atau efek dijalankan ulang dengan dependensi yang berbeda.

Di dalam penangan eventSource.onmessage, perbarui status React untuk mencerminkan data baru: setMessages(prev => [...prev, JSON.parse(event.data)]). Gunakan bentuk fungsional setState untuk menghindari masalah penutupan yang usang — penangan peristiwa menangkap nilai status awal, sedangkan pembaruan fungsional memastikan Anda selalu menambahkan data ke status terbaru.

EventSource menyambung ulang secara otomatis ketika koneksi terputus karena kesalahan jaringan atau peladen dimulai ulang. Peramban menunggu jeda singkat (biasanya 3 detik, dapat dikonfigurasi oleh peladen melalui retry: 3000 di dalam aliran), lalu menyambung kembali. Anda tidak perlu menerapkan logika penyambungan ulang—logika tersebut sudah terintegrasi dalam API EventSource.

EventSource melacak ID peristiwa terakhir yang diterima (ditetapkan oleh peladen menggunakan id: 123 di dalam aliran). Saat menyambung kembali, peramban secara otomatis mengirim ID ini dalam tajuk HTTP Last-Event-ID. Peladen yang dirancang dengan baik menggunakan ID ini untuk memutar ulang peristiwa yang terlewat, sehingga tidak ada peristiwa yang hilang selama penyambungan ulang.

EventSource tidak mendukung tajuk khusus secara langsung. Untuk autentikasi, gunakan kuki (new EventSource(url, { withCredentials: true }) mengirim kuki) atau sertakan token autentikasi sebagai parameter kueri URL. Jika Anda memerlukan tajuk otorisasi, gunakan API Fetch dengan ReadableStream, bukan EventSource, untuk memproses respons SSE secara manual.

Ketika EventSource menemukan kesalahan, pengendali onerror dijalankan. Status koneksi akan menjadi CONNECTING (jika akan mencoba lagi) atau CLOSED (jika tidak). Dalam pengendali kesalahan, periksa status koneksi untuk membedakan kesalahan jaringan sementara (akan dicoba lagi secara otomatis) dan kegagalan permanen (peladen mengembalikan status non-200). Untuk kesalahan permanen, tutup koneksi dan beri tahu pengguna.

Apa yang terjadi ketika koneksi EventSource terputus karena kesalahan jaringan?

new EventSource(url) membuat koneksi SSE dengan readyStates: CONNECTING, OPEN, CLOSED. Penangan pesan menangani peristiwa umum; addEventListener menangani jenis peristiwa bernama. JSON.parse(event.data) mengekstrak muatan terstruktur. Buat dan bersihkan EventSource di useEffect. Penyambungan ulang otomatis sudah tersedia—EventSource mencoba lagi setelah kesalahan jaringan dengan ID peristiwa terakhir untuk memutar ulang peristiwa yang terlewat. Lakukan autentikasi melalui kuki (withCredentials) atau parameter kueri URL.