Tarayıcı kaynağı güncellendikten sonra tek bir bağış neden iki uyarı oluşturuyor

Tek bir bağış neden iki uyarı oluşturuyor

Tarayıcı kaynağı güncellendikten sonra sayfa yeniden başlatılır. Betik sunucuya yeniden bağlanır, olaylara abone olur ve bildirimleri göstermek için işleyiciler oluşturur. Eski işleyici kaldırılmamışsa veya aynı anda iki bağlantı çalışıyorsa, tek bir bağış olayı birkaç kez işlenir.

Güncellemenin kendisi mutlaka arızanın nedeni değildir. Çoğu zaman yalnızca bağlantı mantığındaki bir hatayı ortaya çıkarır. Örneğin, başlatma işlevi sayfa yüklenirken, ardından bağlantı yeniden kurulurken ve bir de hizmet mesajı alındıktan sonra çalışabilir. Her çalıştırma donation olayına yeni bir abonelik ekler.

Sonuç olarak sunucu tek bir bağış nesnesi gönderir, ancak tarayıcı aynı işlevi iki kez çağırır. Bazen kopyalama sunucu tarafında gerçekleşir: uygulama yeni bağlantıyı ayrı bir alıcı olarak değerlendirir ve olayı hem eski hem de yeni oturuma gönderir. Bu nedenle önce tekrarın nerede ortaya çıktığını belirlemek gerekir: kaynakta, işleyicide veya görüntüleme aşamasında.

Tekrarın oluştuğu yeri nasıl bulursunuz

Basit bir testle başlayın. Tarayıcı kaynağının bağlantısını ayrı bir pencerede veya sekmede açın, sayfanın yalnızca tek bir örneğini bırakın ve bir test olayı gönderin. Uyarı bir kez görünüyorsa neden büyük olasılıkla sahne ayarları veya kaynağın birden çok örneğiyle ilgilidir. Ayrı sekmede bile kopyalanıyorsa sayfanın kodunu ve abonelik mekanizmasını kontrol edin.

Bağış işlemeyi birkaç aşamaya ayırmak faydalıdır: olayı alma, olayı doğrulama, uyarıyı kuyruğa alma ve çizim. Günlüğe veya konsola geçici olarak her aşamada bir işaret yazdırın. Alma kaydı iki kez görünüyorsa sorun görsel katmandan önce yer alıyor demektir. Olay bir kez alınıyor ancak kuyrukta iki öğe varsa hata işleyicide. Kuyrukta tek öğe varsa ve ekranda iki uyarı varsa görüntüleme işlevini ve HTML kapsayıcısını kontrol edin.

Teşhis için bağış verilerinde iletilen her olaya kimliğini ekleyin. Bu kimliği alırken ve göstermeden önce kaydedin. İki çağrıda aynı kimlik, tek bir olayın yeniden işlendiğini gösterir. İki farklı kimlik, ayrı ayrı ele alınması gereken iki teslimat olduğu anlamına gelir.

Yalnızca sekme sayısını kontrol etmeyin. OBS'de sahne kopyalandıktan, iç içe sahne eklendikten veya aynı adrese sahip tarayıcı kaynağı yeniden eklendikten sonra iki örnek ortaya çıkabilir. Bazen bir kaynak ayrı bir katmanda kalır, ikincisi ise üstüne eklenir. Görsel olarak bu çift uyarı gibi görünür, oysa olay bir kez gelmiştir.

Yeniden bağlanma sonrası yinelenen abonelik

En sık görülen neden, işleyicinin her bağlantıda eklenmesi ancak bağlantı kesildiğinde kaldırılmamasıdır. Basitleştirilmiş haliyle sorun şöyle görünür: işlev, uyarı gösterme işleyicisiyle socket.on başlatır, ardından bağlantı kopar, uygulama yeniden bağlanır ve socket.on'u yineler. Bundan sonra gelen tek bir bağış iki işlevi tetikler. Bir sonraki yeniden bağlanmada bunların sayısı daha da artabilir.

Aynı hata normal addEventListener ile de karşılaşılır. Başlatma işlevi birkaç kez çağrılırsa tarayıcı aynı olay için birkaç dinleyici ekler. «Başlatma zaten tamamlandı» bayrağını kontrol etmek her zaman yardımcı olmaz: sayfa tamamen güncellendiğinde değişkenler sıfırlanır, aynı sayfa içinde yeniden bağlanmada ise sorun devam eder.

Abonelik, bağlantının yaşam döngüsü boyunca bir kez oluşturulmalı ve eski abonelik yeniden önce açıkça kaldırılmalıdır. Olay işleyicileri için removeEventListener ve bağlantı sırasında iletilen işlevin aynı referansı kullanılır. Soket kitaplıkları için genellikle off, unsubscribe veya benzer bir kapatma yöntemi gerekir.

Soket için asgari şema şöyle görünebilir: const onDonation = data => showAlert(data); socket.off('donation', onDonation); socket.on('donation', onDonation); function cleanup() { socket.off('donation', onDonation); window.removeEventListener('beforeunload', cleanup); socket.close(); } window.addEventListener('beforeunload', cleanup);

Burada önemli olan belirli kitaplık değil, işlem sırasıdır. İşleyici bir değişkende saklandığı için aynı referansla kaldırılabilir. Yeni abonelikten önce eski kaldırılır ve sayfa kapatıldığında veya kaynak durdurulduğunda cleanup çalıştırılır. Her başlatmada yeni bir soket oluşturuluyorsa önce eskisi kapatılmalı, ancak sonra yenisi oluşturulmalıdır. Aksi halde her iki bağlantı da aynı verileri almaya devam edebilir.

Yeniden bağlanırken eski bağlantıyı da kapatın ve ilgili zamanlayıcıları temizleyin. Aksi halde eski soket, yenisi çalışırken veri almaya devam edebilir. Bu özellikle kod, öncekini iptal etmeden yeni bir yeniden bağlanma zamanlayıcısı başlattığında sık görülür.

OBS'de ve tarayıcı kaynağında neler kontrol edilmeli

Ayrı pencere uyarıyı bir kez gösteriyorsa sahneye geçin. Önizlemeyi durdurun, fazla katmanları geçici olarak kaldırın ve tek bir tarayıcı kaynağı bırakın. Ardından ilgili sahnedeki davranışı kontrol edin. Bu test, tüm sahneleri ve filtreleri aynı anda kontrol etmekten daha hızlıdır.

• Aynı sayfa adresine sahip iki kaynak arayın.
• Aynı yer paylaşımının bulunabileceği sahne kopyalarını ve iç içe sahneleri kontrol edin.
• Uyarının aynı anda hem tarayıcı kaynağı hem de aynı sayfayı içeren başka bir katman tarafından gösterilmediğinden emin olun.
• Ayarları değiştirdikten sonra yalnızca sahneyi değiştirmekle kalmayıp kaynağı tamamen yeniden başlatın.

Bazen OBS'de URL veya parametreler güncellendikten sonra tarayıcı kaynağının eski sekmesi kalır. Kaynağı kapatıp yeniden eklemek hipotezi doğrulamaya yardımcı olur, ancak bu kodun düzeltilmesinin yerini tutmaz. Sorun her güncellemeden sonra tekrar ortaya çıkıyorsa yinelenen işleyici kaydını veya çift bağlantıyı arayın.

Kapatma gecikmesini de hesaba katın. Güncelleme sırasında eski oturum anında kapanmayabilir. Sunucu birkaç saniye boyunca onu etkin sayıyorsa bu aralıkta gelen olay iki oturuma da düşebilir. Normal sunucu mantığı etkin olmayan bağlantıları kaldırmalı ve sayfa kapandıktan sonra aboneliği bırakmamalıdır.

Tek bir olayın yinelenen teslimine karşı koruma

Tarayıcı kaynağı doğru çalışsa bile tek bir olay bazen yeniden teslim edilebilir. Bu, bağlantı yeniden kurulurken, mesaj yeniden gönderilirken veya olayın alınması ile işlendiğinin onaylanması arasında bir arıza olduğunda mümkündür. Bu nedenle uyarı işleyicisi tekrarlara karşı dayanıklı olmalıdır.

En iyi yöntem bağışın benzersiz kimliğini kontrol etmektir. Olayı kuyruğa almadan önce kimliğini işlenmiş olaylar kümesine kaydedin. Böyle bir kimlik daha önce görüldüyse tekrar atlanmalıdır. Listenin sonsuza kadar büyümemesi için sınırlı bir süre saklanmalıdır.

Bunun için yalnızca tutarı, gönderenin adını veya mesaj metnini kullanmayın. İki farklı bağış aynı verilere sahip olabilir. Zamana göre kontrol de güvenilir değildir: birkaç farklı bağış neredeyse aynı anda gelebilir. Kimlik yoksa alanların ve zamanın birleşimi geçici olarak karşılaştırılabilir, ancak bu iki olayı yanlışlıkla birleştirme riski taşıyan yedek bir çözümdür.

Tekrar koruması uyarı gösteriminden önce, animasyonun içinde değil, yer almalıdır. Aksi halde ikinci çağrı yine de sayfaya öğe ekler, ses çalar veya kuyruğa bir kayıt daha koyar. Kuyruğu ayrıca kontrol edin: tek bir olay ona bir kez eklenmeli ve yinelenen çağrı ikinci bağımsız kuyruğu başlatmamalıdır.

Olay birden çok sekme veya bileşen arasında aktarılıyorsa, aynı anda birkaç alıcı tarafından işlenip işlenmediğini kontrol edin. Tek bir ortak mesaj kanalı birkaç işleyiciye bağlı olabilir. Bu durumda ya tek bir tüketici bırakılmalı ya da uyarıyı hangi bileşenin göstereceği açıkça belirlenmelidir.

Önbelleği temizlemek neden her zaman yardımcı olmaz

Tarayıcı kaynağı güncellendikten sonra sıklıkla önbelleği temizlemeniz önerilir. Betiğin eski bir sürümü yüklendiyse bu durumu düzeltebilir, ancak önbellek zaten çalışan sayfadaki fazla işleyicileri kaldırmaz ve kaynağın ikinci kopyasını kapatmaz. Tekrar her yeniden bağlanmadan sonra istikrarlı biçimde yineliyorsa neden neredeyse kesinlikle bağlantı mantığında veya sahne yapısındadır.

Dosyaların gerçekten yeni sürümünün yüklenip yüklenmediğini kontrol edin. Kaynağın adresini geçici olarak değiştirin veya sağlanan güncelleme mekanizmasını kullanın, ardından tarayıcı kaynağını yeniden başlatın. Sonrasında tek pencere ve kaynağın tek örneğiyle testi tekrar yapın. Bağlantıya sürekli rastgele parametreler eklemeyin: bu birçok önbellek varyantı oluşturabilir ve teşhisi zorlaştırabilir.

Ara bir önbellek veya service worker kullanılıyorsa o da eski betiği sunabilir. Bu durumda yüklenen dosyanın sürümü ile görmeyi beklediğiniz sürümü karşılaştırın. Ancak eski dosyada bile yinelenen aboneliğin nedeni giderilmelidir, aksi halde sorun bir sonraki güncellemeden sonra yeniden ortaya çıkar.

Uyarı kodunda neler kontrol edilmeli

Önce socket.on, addEventListener, bağlantı işlevleri ve kuyruk başlatmanın çağrıldığı tüm yerleri bulun. Bazen sorun tek bir işleyicide değil, iki farklı modülün donation olayını bağımsız olarak dinlemesi ve her birinin kendi gösterimini başlatmasındadır.

Ardından uyarı bir çerçeve aracılığıyla gösteriliyorsa bileşenin yaşam döngüsünü kontrol edin. Abonelik bir efekt veya benzer blok içinde yerleştirilir ve bir temizleme işlevi döndürülür. Önceki kaldırılmadan her durum güncellemesinde yeni bir işleyici oluşturulmamalıdır. Normal JavaScript'te, sayfa durdurulduğunda düzgün kapatılabilmesi için etkin sokete ve geçerli işleyiciye referans saklamak önemlidir.

Yeniden bağlanma zamanlayıcılarını kontrol edin. Yeni zamanlayıcı eskisinin üzerine başlatılmamalıdır. Aksi halde birkaç kopmadan sonra paralel bağlantı denemeleri ve bunlarla birlikte ek abonelikler oluşur. Artık gerekli olmayan her zamanlayıcı, clearTimeout veya clearInterval ile temizlenmelidir.

Uyarıyı gösteren kodu ayrıca inceleyin. Aynı nesne için hem kuyruğa öğe eklememeli hem de hemen görüntüleme işlevini çağırmamalıdır. Ayrıca öğenin durumu değiştiğinde animasyonun yeniden başlatılıp başlatılmadığını kontrol edin. Günlükte bir alma ve kuyrukta bir kayıt varsa ancak ekranda iki bildirim varsa tam da burada aramanız gerekir.

Teşhis kontrol listesi: sırayla ne yapmalı

1. Tarayıcı kaynağının URL'sini ayrı bir sekmede açın ve bir test bağışı gönderin. Tekrarın OBS dışında oluşup oluşmadığını kaydedin.
2. Sahnede yalnızca kaynağın tek bir örneğini bırakın. Sahne kopyalarını, iç içe sahneleri ve aynı adresin bulunabileceği katmanları kontrol edin.
3. Alma, kuyruğa alma ve gösterme aşamalarında olay kimliğini içeren bir günlük ekleyin. Böylece nesne sayısının nerede arttığı görülebilir.
4. Tüm socket.on ve addEventListener çağrılarını bulun. Eski işleyicilerin socket.off ve removeEventListener aracılığıyla aynı işlev referansıyla kaldırılıp kaldırılmadığını kontrol edin.
5. Yeniden bağlanmayı kontrol edin: eski soket kapatılıyor mu, eski zamanlayıcı iptal ediliyor mu ve öncekinin üzerine yeni bir abonelik oluşturuluyor mu.
6. Kuyruktan önce bağışın benzersiz kimliğini kontrol etmeyi ekleyin, ardından kaynağı tamamen yeniden başlatın ve tek olayla testi tekrarlayın.

Ayrı sekme olayı bir kez alıyor ancak OBS iki uyarı gösteriyorsa kaynağın ikinci örneğini veya sahnelerdeki kopyalamayı arayın. Olay ayrı sekmede bile iki kez geliyorsa abonelikleri, bağlantıları ve sunucu teslimatını kontrol edin. Alma ve kuyruk bir kez kaydediliyor ancak ekranda iki bildirim varsa sorun görsel katmandadır.