EventSource ile React'te SSE Akışlarını Tüketme

new EventSource(url), belirtilen URL'ye bir SSE bağlantısı oluşturur. Tarayıcı, Accept: text/event-stream üst bilgisiyle HTTP GET isteğini hemen açar. Sunucu bu bağlantıyı açık tutar ve olayları akıtır. EventSource, tarayıcıda yerleşik bir API'dir; temel kullanım için kitaplık gerekmez.

EventSource'un üç hazır olma durumu vardır: 0 (CONNECTING) — bağlantı kuruluyor veya yeniden kuruluyor, 1 (OPEN) — bağlantı kuruldu ve olaylar akıyor, 2 (CLOSED) — bağlantı kapatıldı ve yeniden bağlanmayacak. Geçerli durumu belirlemek için eventSource.readyState değerini denetleyin.

eventSource.onmessage işleyicisi, açık bir olay türü belirtilmemiş sunucu olayları için çalışır (sunucu, data: ... gönderir ancak event: alanını göndermez). İşleyici, event.data değerinin dize biçimindeki yük olduğu bir olay nesnesi alır. Sunucu genellikle verileri JSON.stringify ile JSON biçimine dönüştürür; alındığında JSON.parse ile ayrıştırırsınız.

Sunucu, adlandırılmış olaylar gönderebilir: event: userJoined data: {"userId": "123"} . Tarayıcıda eventSource.addEventListener('userJoined', handler) ile dinleyin. Bu, tek bir SSE bağlantısı üzerinden birden çok olay türünün çoklanmasını sağlar; her olay türünün kendi işleyicisi olduğundan kod temiz ve düzenli kalır.

SSE verileri dizeler halinde gelir. Yapılandırılmış veriler için sunucu JSON.stringify(payload) gönderir ve istemci bunu ayrıştırır: const data = JSON.parse(event.data). Sunucudan gelen hatalı JSON'u düzgünce ele almak için JSON.parse çağrısını her zaman try/catch içinde kullanın; hatayı günlüğe kaydedin ve hatalı olayı yok sayın.

EventSource'u bir useEffect içinde oluşturup kapatın: bileşen bağlandığında bağlantıyı oluşturun, olay işleyicilerini bağlayın ve eventSource.close() çağrısını yapan bir temizleme işlevi döndürün. Temizleme yapılmazsa bileşen bağlantısı kesildiğinde, kullanıcı başka bir sayfaya gittiğinde veya efekt farklı bağımlılıklarla yeniden çalıştığında bağlantı açık kalır.

eventSource.onmessage işleyicisinin içinde, yeni verileri yansıtmak için React durumunu güncelleyin: setMessages(prev => [...prev, JSON.parse(event.data)]). Eski kapanım sorunlarını önlemek için setState'in işlevsel biçimini kullanın; olay işleyicisi başlangıçtaki durum değerini yakalar ve işlevsel güncelleme, işlemin her zaman en güncel durum değerini temel almasını sağlar.

EventSource, ağ hatası veya sunucunun yeniden başlatılması nedeniyle bağlantı kesildiğinde otomatik olarak yeniden bağlanır. Tarayıcı kısa bir süre bekler (genellikle akış içindeki retry: 3000 ile sunucu tarafından yapılandırılabilen 3 saniye) ve ardından yeniden bağlanır. Yeniden bağlanma mantığını uygulamanız gerekmez; bu özellik EventSource API'sinin içinde yerleşik olarak bulunur.

EventSource, alınan son olayın kimliğini izler (sunucu bu kimliği akış içinde id: 123 kullanarak belirler). Yeniden bağlanırken tarayıcı bu kimliği Last-Event-ID HTTP üstbilgisinde otomatik olarak gönderir. İyi tasarlanmış bir sunucu, yeniden bağlanma sırasında hiçbir olayın kaybolmamasını sağlamak için kaçırılan olayları yeniden göndermek üzere bu kimliği kullanır.

EventSource, özel üstbilgileri doğrudan desteklemez. Kimlik doğrulama için çerezleri kullanın (new EventSource(url, { withCredentials: true }) çerezleri gönderir) veya kimlik doğrulama belirtecini URL sorgu parametresi olarak ekleyin. Authorization üstbilgilerine ihtiyacınız varsa, SSE yanıtını elle işlemek için EventSource yerine ReadableStream ile Fetch API'yi kullanın.

EventSource bir hatayla karşılaştığında hata işleyicisi çalışır. readyState, yeniden deneme yapılacaksa CONNECTING, yapılmayacaksa CLOSED olur. Geçici bir ağ hatasıyla (otomatik olarak yeniden denenecek) kalıcı bir hatayı (sunucunun 200 olmayan bir durum kodu döndürmesi) ayırt etmek için hata işleyicisinde readyState değerini kontrol edin. Kalıcı hatalarda bağlantıyı kapatın ve kullanıcıyı bilgilendirin.

Ağ hatası nedeniyle bir EventSource bağlantısı kesildiğinde ne olur?

EventSource ile oluşturulan SSE bağlantısının readyStates değerleri CONNECTING, OPEN ve CLOSED'dur. Genel olayları genel olay işleyicisi, adlandırılmış olay türlerini ise addEventListener işler. JSON.parse(event.data), yapılandırılmış yükü çıkarır. EventSource'u useEffect içinde oluşturun ve temizleyin. Otomatik yeniden bağlanma yerleşik olarak bulunur; EventSource ağ hatalarından sonra yeniden dener ve kaçırılan olayları yeniden göndermek için Last-Event-ID kullanır. Kimlik doğrulamasını çerezler (withCredentials) veya URL sorgu parametreleriyle yapın.