Membangun Umpan Notifikasi Waktu Nyata

Umpan notifikasi waktu nyata menggabungkan aliran SSE untuk notifikasi masuk dengan titik akhir REST untuk menandai butir sebagai telah dibaca. Komponen mempertahankan keadaan lokal untuk daftar notifikasi, berlangganan aliran peladen melalui EventSource di dalam useEffect, dan menangani interaksi pengguna (menandai sebagai dibaca, menutup) dengan pembaruan optimistis.

Objek notifikasi biasanya memiliki bentuk berikut: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. Kolom type mengendalikan ikon dan warna. Kolom read melacak apakah pengguna telah mengakui notifikasi. Kolom timestamp memungkinkan pengelompokan berdasarkan periode waktu.

Di dalam useEffect, buat EventSource yang terhubung ke /api/notifications/stream. Pada setiap peristiwa pesan, uraikan JSON dan tambahkan notifikasi baru di awal keadaan: setNotifications(prev => [JSON.parse(e.data), ...prev]). Menambahkan di awal menempatkan notifikasi terbaru di bagian atas, yang merupakan praktik standar untuk umpan notifikasi.

Turunkan jumlah belum dibaca dari larik notifikasi tanpa keadaan tambahan: const unreadCount = notifications.filter(n => !n.read).length. Tampilkan jumlah ini sebagai lencana pada ikon lonceng notifikasi. Jumlah diperbarui secara otomatis setiap kali keadaan notifikasi berubah—tidak diperlukan pengelolaan keadaan terpisah.

Ketika pengguna mengeklik notifikasi, segera terapkan pembaruan optimistis untuk status dibaca: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). Kemudian kirim permintaan PATCH ke /api/notifications/:id dengan { read: true } di latar belakang. Kembalikan pembaruan optimistis jika permintaan gagal.

Kelompokkan notifikasi untuk ditampilkan: "Hari Ini" (hari kalender yang sama), "Kemarin", dan "Lebih Lama". Hitung kelompok menggunakan stempel waktu notifikasi dan tanggal saat ini: const today = new Date().toDateString(). Tampilkan setiap kelompok sebagai bagian terpisah dengan label tajuk. Ini memudahkan peninjauan cepat daftar notifikasi yang panjang.

Ketika pengguna berada di halaman berbeda dan notifikasi baru tiba melalui SSE, tampilkan notifikasi pop-up alih-alih (atau selain) memperbarui daftar notifikasi. Gunakan konteks notifikasi global atau penyimpanan Zustand yang dapat diakses oleh pelanggan SSE dan perender pop-up. Pop-up menghilang setelah beberapa detik; notifikasi tetap ada dalam daftar.

Untuk notifikasi yang muncul di seluruh aplikasi, simpan notifikasi dalam konteks React atau penyimpanan Zustand pada tingkat akar aplikasi. Langganan SSE berada di komponen penyedia dekat bagian atas pohon. Komponen mana pun dapat membaca notifikasi atau mengirim notifikasi baru melalui penyimpanan bersama, sehingga pop-up dapat ditampilkan dari halaman mana pun.

EventSource secara otomatis menangani penyambungan ulang ketika jaringan terputus, tetapi perubahan visibilitas tab berbeda. Ketika pengguna kembali ke tab setelah lama tidak aktif, koneksi SSE mungkin telah dihentikan oleh peladen. EventSource menyambung ulang secara otomatis—mekanisme ID peristiwa terakhir memutar ulang notifikasi yang terlewat saat tab berada di latar belakang.

Aplikasi satu halaman kehilangan keadaan notifikasi dalam memori ketika pengguna berpindah dari halaman tersebut. Simpan notifikasi di localStorage setelah setiap pembaruan: localStorage.setItem('notifications', JSON.stringify(notifications)). Saat komponen dipasang, inisialisasi keadaan dari localStorage sebelum aliran SSE terhubung. Ini mempertahankan riwayat notifikasi saat berpindah halaman.

Titik akhir SSE di sisi peladen harus menetapkan tajuk tertentu: Content-Type: text/event-stream, Cache-Control: no-cache, dan Connection: keep-alive. Dalam Express/NestJS, tulis peristiwa sebagai data: ${JSON.stringify(payload)}\n\n—perhatikan dua baris baru yang menandai akhir suatu peristiwa. Peladen harus mengosongkan penyangga setelah setiap penulisan agar peramban segera menerima peristiwa.

Apa tajuk Content-Type yang benar untuk titik akhir SSE (Peristiwa yang Dikirim Peladen)?

Umpan notifikasi menggabungkan langganan SSE (useEffect dengan pembersihan EventSource) dengan mutasi REST (PATCH untuk menandai sebagai telah dibaca). Bentuk data: {pengenal, jenis, pesan, stempel waktu, sudah dibaca}. Turunkan unreadCount dengan penyaringan, lalu kelompokkan berdasarkan hari ini, kemarin, atau lebih lama untuk ditampilkan. Gunakan konteks global atau Zustand untuk pop-up lintas halaman. Simpan ke localStorage agar tetap tersedia saat navigasi. Titik akhir SSE memerlukan Content-Type: text/event-stream, Cache-Control: no-cache, dan pembatas peristiwa berupa dua baris baru.