Gerçek Zamanlı Bildirim Akışı Oluşturma

Gerçek zamanlı bir bildirim akışı, gelen bildirimler için bir SSE akışını ve öğeleri okundu olarak işaretlemek için REST uç noktalarını birleştirir. Bileşen, bildirim listesi için yerel durum tutar, bir useEffect içinde EventSource aracılığıyla sunucu akışına abone olur ve kullanıcı etkileşimlerini (okundu olarak işaretleme, kapatma) iyimser güncellemelerle işler.

Bir bildirim nesnesi genellikle şu yapıdadır: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. type alanı simgeyi ve rengi belirler. read alanı, kullanıcının bildirimi onaylayıp onaylamadığını izler. timestamp alanı, zamana göre gruplamayı sağlar.

Bir useEffect içinde /api/notifications/stream adresine bağlı bir EventSource oluşturun. Her mesaj olayında JSON'u ayrıştırın ve yeni bildirimi duruma listenin başına ekleyin: setNotifications(prev => [JSON.parse(e.data), ...prev]). Listenin başına ekleme (unshift davranışı), en yeni bildirimi üstte gösterir; bu, bildirim akışlarında standart yaklaşımdır.

Okunmamış sayısını ek bir durum tutmadan notifications dizisinden türetin: const unreadCount = notifications.filter(n => !n.read).length. Bu sayıyı bildirim zil simgesinde rozet olarak gösterin. Bildirim durumu her değiştiğinde sayı otomatik olarak güncellenir; ayrı bir durum yönetimi gerekmez.

Kullanıcı bir bildirime tıkladığında iyimser okundu güncellemesini hemen uygulayın: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). Ardından arka planda /api/notifications/:id adresine { read: true } içeren bir PATCH isteği gönderin. İstek başarısız olursa iyimser güncellemeyi geri alın.

Bildirimleri gösterim için gruplandırın: "Bugün" (aynı takvim günü), "Dün" ve "Daha Eski". Grubu bildirimin zaman damgasını ve geçerli tarihi kullanarak hesaplayın: const today = new Date().toDateString(). Her grubu başlık etiketi olan ayrı bir bölüm olarak işleyin. Bu, uzun bir bildirim listesini taramayı çok kolaylaştırır.

Kullanıcı farklı bir sayfadayken SSE üzerinden yeni bir bildirim geldiğinde, bildirim listesini güncellemenin yerine veya buna ek olarak geçici bir bildirim gösterin. Hem SSE abonesinin hem de geçici bildirim işleyicisinin erişebileceği genel bir bildirim bağlamı veya Zustand deposu kullanın. Geçici bildirim birkaç saniye sonra kaybolur; bildirim ise listede kalır.

Tüm uygulamada görünen bildirimler için bunları uygulamanın kök düzeyindeki bir React bağlamında veya Zustand deposunda saklayın. SSE aboneliği, bileşen ağacının üst kısımlarına yakın bir sağlayıcı bileşeninde bulunur. Herhangi bir bileşen, paylaşılan depo aracılığıyla bildirimleri okuyabilir veya yenilerini gönderebilir; böylece herhangi bir sayfadan geçici bildirim oluşturulabilir.

EventSource ağ bağlantısı kesildiğinde yeniden bağlanmayı otomatik olarak yönetir; ancak sekmenin görünürlüğündeki değişiklikler farklıdır. Kullanıcı uzun bir aradan sonra sekmeye döndüğünde SSE bağlantısı sunucu tarafından sonlandırılmış olabilir. EventSource otomatik olarak yeniden bağlanır ve Last-Event-ID mekanizması, sekme arka plandayken kullanıcının kaçırdığı bildirimleri yeniden gönderir.

Tek sayfalı uygulamalar sayfadan ayrılırken bellekteki bildirim durumunu kaybeder. Her güncellemeden sonra bildirimleri localStorage içinde saklayın: localStorage.setItem('notifications', JSON.stringify(notifications)). Bileşen bağlandığında, SSE akışı bağlanmadan önce durumu localStorage'dan başlatın. Bu işlem, sayfa geçişleri arasında bildirim geçmişini korur.

Sunucu tarafındaki SSE uç noktası belirli üstbilgileri ayarlamalıdır: Content-Type: text/event-stream, Cache-Control: no-cache ve Connection: keep-alive. Express/NestJS içinde olayları data: ${JSON.stringify(payload)}\n\n biçiminde yazın; olayın sonunu belirten çift satır sonuna dikkat edin. Tarayıcının olayı hemen almasını sağlamak için sunucu her yazma işleminden sonra arabelleği boşaltmalıdır.

Bir SSE (Sunucu Tarafından Gönderilen Olaylar) uç noktası için doğru Content-Type üstbilgisi nedir?

Bildirim akışları, SSE aboneliğini (EventSource temizlemesiyle birlikte useEffect) REST değişiklikleriyle (okundu olarak işaretlemek için PATCH) birleştirir. Veri yapısı; kimlik, tür, ileti, zaman damgası ve okundu alanlarından oluşur. unreadCount değerini filtrelemeyle türetin, gösterim için bildirimleri bugün/dün/daha eski şeklinde gruplandırın. Sayfalar arası geçici bildirimler için genel bağlam veya Zustand kullanın. Sayfa geçişlerine dayanıklılık sağlamak için localStorage'a kaydedin. SSE uç noktası Content-Type: text/event-stream, Cache-Control: no-cache üstbilgilerini ve olayları ayırmak için çift satır sonunu gerektirir.