Uzun Yoklama Deseni ve Yeniden Bağlanma Mantığı

Uzun yoklama bir döngü içinde çalışır: istemci bir HTTP isteği gönderir, sunucu yeni veriler kullanılabilir olana kadar (veya genellikle 30-60 saniye sonra zaman aşımı oluşana kadar) bağlantıyı açık tutar, sunucu verilerle yanıt verir ve istemci hemen başka bir istek gönderir. Böylece sunucu tarafından gönderme özelliklerine sahip, neredeyse kesintisiz bir bağlantı oluşturulur.

React'te uzun yoklama, useEffect içinde yer alan eşzamansız, özyinelemeli bir işlevle uygulanır. İşlev bir istek gönderir, yanıtı işler ve ardından kendisini yeniden çağırır. Bir AbortController sinyali, bileşen kaldırıldığında özyinelemeyi durdurur. İşlev, bileşen bağlı olduğu ve iptal sinyali verilmediği sürece döngüye devam eder.

useEffect'in en üstünde bir AbortController oluşturun ve controller.signal değerini her istek çağrısına aktarın. Temizleme işlevinde controller.abort() çağrısını yapın. Bu işlem, bileşen kaldırıldığında devam eden tüm istekleri iptal eder; böylece kaldırılmış bileşenlerde durum güncellemelerini ve ağ kaynaklarının sızmasını önler.

Uzun yoklama isteği başarısız olduğunda hemen yeniden denemeyin; bir sonraki denemeden önce bekleyin. Üstel bekleme, art arda gerçekleşen her hatada gecikmeyi iki katına çıkarır: 1 saniye, 2 saniye, 4 saniye, 8 saniye, 16 saniye; en fazla 30 saniye. Bu yaklaşım, başarısız olan sunucunun aşırı istekle yüklenmesini önler ve geçici sorunların çözülmesi için zaman tanır. Başarılı bir yanıtta gecikmeyi 1 saniyeye sıfırlayın.

Çok sayıda istemci aynı sunucuya yoklama yaptığında, rastgelelik payı içermeyen üstel bekleme "gök gürültüsü sürüsü" etkisine neden olur: tüm istemciler aynı süre bekler ve aynı anda yeniden deneyerek sunucuyu yeniden aşırı yükler. Gecikmeyi rastgeleleştirerek rastgelelik ekleyin: delay + Math.random() * delay. Bu işlem, yeniden denemeleri belirli bir zaman aralığına yayarak sunucu yükündeki ani artışları azaltır.

Yoklama yaşam döngüsünü yansıtmak için bağlantı durumu tutun: isConnecting (ilk bağlantı veya hatadan sonra yeniden bağlanma), isConnected (son yoklama başarılı) ve isError (art arda hatalar, maksimum yeniden deneme sayısına ulaşıldı). Kullanıcıların gerçek zamanlı verilerin güvenilirliğini anlaması için bu durumu kullanıcı arayüzünde gösterin.

Bir sonraki yeniden denemeden önceki bekleme süresince bir geri sayım gösterebilirsiniz: ilerleme göstergesiyle birlikte "8 saniye içinde yeniden bağlanılıyor...". Bekleme zamanlayıcısını ayarlarken yeniden deneme zamanını hesaplayın ve gösterimi her saniye güncelleyin. Bu şeffaflık, uygulamanın kurtarılmak için etkin biçimde çalıştığı konusunda kullanıcılara güven verir.

Yoklama için setInterval yerine özyinelemeli setTimeout kullanın (sonraki yoklamayı yanıt işleyicisi içinde çağırın). setInterval, önceki isteğin ne kadar sürdüğüne bakmaksızın sabit aralıklarla çalışır; uzun süren istekler birbiriyle çakışan yoklamalara neden olabilir. Özyinelemeli setTimeout ise sonraki yoklamayı yalnızca önceki yoklama tamamlandıktan sonra başlatır.

Yoklama aralığını kancanızda bir yapılandırma seçeneği olarak sunun: useLongPoll({ url, interval: 5000 }). Farklı veri kaynakları farklı güncellik düzeylerine ihtiyaç duyar: "kimlerin çevrimiçi olduğu" göstergesi 30 saniyede bir, görev durumu ise 5 saniyede bir yoklanabilir. Aralıkları uygulama koduna sabit olarak yazmaktan kaçının.

API'niz geliştikçe daha iyi verimlilik için yoklamayı SSE ile değiştirebilirsiniz. Yoklama kancasını kullanan React bileşeni, aktarım katmanından bağımsız olmalıdır. Kancanız aynı arayüzü (onData, durum, hata) sunuyorsa, alttaki yoklamayı EventSource ile değiştirmek kancayı kullanan bileşende hiçbir değişiklik gerektirmez.

Sunucu uzun yoklama bağlantısını açık tuttuğunda ve hiçbir veri gelmediğinde, bağlantının süresiz olarak asılı kalmasını önlemek için zaman aşımı yanıtı (boş gövdeli 200 veya 204 No Content) göndermelidir. İstemci ardından hemen yeniden yoklama yapar. Sunucu tarafındaki bu zaman aşımı (30-60 saniye), istemci tarafındaki fetch zaman aşımından (daha uzun, örneğin 90 saniye) ayrıdır.

Bağlantı hatalarından sonra yeniden denerken uzun yoklama neden üstel bekleme kullanır?

Uzun yoklama: istemci istek gönderir, sunucu veri kullanılabilir olana veya zaman aşımı oluşana kadar bekler, istemci yanıtın hemen ardından yeniden istek gönderir. Temizleme için useEffect içinde özyinelemeli eşzamansız fetch ve AbortController kullanın. Hata durumunda, gök gürültüsü sürüsü etkisini önlemek için rastgelelik payıyla birlikte üstel bekleme (1 saniye, 2 saniye, 4 saniye... en fazla 30 saniye) uygulayın. Yoklamaların çakışmasını önlemek için setInterval yerine özyinelemeli setTimeout kullanın. Kullanıcı arayüzünde geri bildirim sağlamak üzere isConnecting/isConnected/isError durumlarını izleyin.