- Aynı kaynak üzerindeki pencereler, sekmeler, iframe'ler ve çalışanlar arasında gerçek zamanlı, çift yönlü iletişimi sağlar.
- Veri alışverişi için bağlamların adlandırılmış bir kanala abone olduğu bir yayınlama-abone olma modeli kullanır.
- Karmaşık nesneleri manuel serileştirmeye gerek kalmadan iletmek için yapılandırılmış klon algoritmasından yararlanır.
Bazı web sitelerinin başka bir sekmede oturumunuzu kapattığınız anı nasıl anında algıladığını veya bir alışveriş sepetinin tek bir sayfa yenilemesi olmadan üç farklı pencerede nasıl güncellendiğini hiç merak ettiniz mi? Uzun bir süre boyunca geliştiriciler, sunucu sorgulama veya localStorage olaylarını manipüle etme gibi hantal geçici çözümlere güvenmek zorunda kaldılar. Neyse ki, bu ağır işi herhangi bir üçüncü taraf kütüphaneye ihtiyaç duymadan halleden, tarayıcıya yerleşik, zarif bir çözüm var.
Yayın Kanalı API'si, farklı tarama bağlamlarının (sekmeler, iframe'ler ve web çalışanları gibi) aynı kaynağı (yani aynı protokolü, etki alanını ve bağlantı noktasını) paylaştıkları sürece birbirleriyle iletişim kurmalarını sağlayan hafif bir mesaj veri yolu görevi görür. Bu, birbirinden bağımsız sayfalar koleksiyonu yerine tek ve tutarlı bir deneyim gibi hissettiren reaktif web uygulamaları oluşturmak için çığır açan bir özelliktir.
Yayın Kanalı API'si Gerçekte Nasıl Çalışır?
Özünde, bu API bir kavram etrafında şekillenmektedir. adlandırılmış kanalBunu bir radyo frekansı gibi düşünün; aynı frekansa ayarlanan herhangi bir pencere veya çalışan, diğer herkesin ne yayınladığını duyabilir. Bir örneği oluşturduğunuzda... BroadcastChannel Belirli bir isme sahip nesne, esasen sizsiniz. o kanala abone olmakKanal henüz mevcut değilse, tarayıcı onu anında oluşturur.
Veri göndermek inanılmaz derecede kolaydır. Şunu çağırarak: postMessage() yöntemBu sayede, şu anda dinleyen diğer tüm ortamlara bir mesaj gönderebilirsiniz. En güzel yanlarından biri de, bunun şu özelliği kullanmasıdır: yapılandırılmış klon algoritmasıBu, yalnızca metin dizeleriyle sınırlı kalmadığınız anlamına gelir; gönderebilirsiniz. karmaşık nesneler, diziler, Map, Set veya hatta Bloblar manuel olarak çalıştırmaya gerek kalmadan JSON.stringify() or JSON.parse()Bu da işlem süresinden büyük ölçüde tasarruf sağlıyor.
Temel Yöntemler ve Olay Yönetimi
İşlemleri başlatmak için öncelikle kanalı oluşturmanız gerekir: const myChannel = new BroadcastChannel('app_sync');Gelen verileri almak için bir kurulum yaparsınız. onmessage olay işleyicisi veya kullanım addEventListener('message', ...)Bir mesaj geldiğinde, olay nesnesi şunları içerir: data İletilen bilgileri içeren mülk.
postMessage(data)Belirtilen nesneyi bağlı diğer tüm abonelere gönderir.close()Bu, bellek yönetimi için çok önemli bir adımdır. Bu yöntemi çağırmak... nesnenin bağlantısını keser Bu kanal üzerinden gelen veriler, tarayıcının çöp toplayıcısının kaynakları temizlemesine olanak tanır.name: Nesnenin şu anda hangi kanala bağlı olduğunu doğrulamanızı sağlayan, salt okunur bir özellik.
Yayıncının kendi mesajını almadığını belirtmek önemlidir . A sekmesinden bir mesaj gönderirseniz, yalnızca B ve C sekmeleri kendi mesaj olaylarını tetikleyecektir. Bu, WebSocket'ler veya diğer geri döngü mekanizmalarıyla çalışırken geliştiricileri sık sık rahatsız eden sonsuz döngüleri önlediği için büyük bir avantajdır.
Broadcast Channel'ı Diğer API'lerle Karşılaştırma
Belki de şöyle düşünüyorsunuz: "Neden sadece şunu kullanmıyorsunuz?" window.postMessage()" Süre postMessage() güçlüdür, bir şeye ihtiyaç duyar doğrudan referans Hedef pencereye (açılır pencere veya iframe gibi) yönlendirilir. Yayın Kanalı API'si 'ateşle ve unut' sistemidir; kimin dinlediğini bilmenize gerek yoktur, bu da onu kolaylaştırır. Çoklu sekme senaryoları için önemli ölçüde daha esnek..
SharedWorkers ile karşılaştırıldığında , Broadcast Channel çok daha basittir. SharedWorkers, karmaşık paylaşılan durumları veya birden fazla sekme için tek bir WebSocket bağlantısını yönetmek için harikadır, ancak hafif bildirimler veya durum senkronizasyonu için Broadcast Channel daha uygun bir çözümdür. Benzer şekilde, MessageChannel API'si portlar aracılığıyla bire bir iletişim için tasarlanmışken, Broadcast Channel bire çok yayın için geliştirilmiştir.
Gerçek Dünya Kullanım Örnekleri ve Pratik Uygulama
Bunu uygulamaya koymanın sayısız yolu var. Klasik bir örnek, kimlik doğrulama durumlarının senkronize edilmesidir . Bir kullanıcı bir sekmede 'Çıkış Yap' düğmesine bastığında, 'auth_logout' mesajını yayınlayarak diğer tüm açık sekmelerin anında giriş sayfasına yönlendirilmesini sağlayabilirsiniz.
Diğer akıllı uygulamalar şunlardır:
- Alışveriş kartıKullanıcı bir ürün eklediği anda, tüm sekmelerdeki başlık bölümünde yer alan ürün sayısını güncelleyin.
- Kullanıcı tercihleriBir kullanıcı bir pencerede 'Karanlık Mod'a geçerse, şunları yapabilirsiniz: tema değişikliğini tetikle Oturumun tamamı boyunca anında.
- İşbirliği AraçlarıPaylaşılan bir belge düzenleyicisinde imleç konumlarını veya metin değişikliklerini senkronize etme kesintisiz canlı deneyim.
- Hizmet Çalışanı Koordinasyonu: Bir servis çalışanına, tüm aktif istemcileri manuel olarak döngüye almaya gerek kalmadan önbelleğini temizlemesini veya kaynaklarını güncellemesini emretmek.
self.clients.matchAll().
Sınırlamalar ve Uyumluluk
Faydalı olmasına rağmen, akılda tutulması gereken birkaç önemli nokta var. Birincisi, kesinlikle aynı kaynaktan iletişim kurar . Güvenlik nedenleriyle farklı bir alan adıyla iletişim kurmak için bunu kullanamazsınız. İkincisi, mesaj geçmişi yoktur ; bir sekme kanala geç katılırsa, bağlanmadan önce gönderilen mesajları göremez. Son olarak, teslimat garantisi sağlamaz , bu nedenle bir mesajın alındığına dair bir onay gerekiyorsa, kendi onay protokolünüzü oluşturmanız gerekecektir.
Tarayıcı desteğine gelince, bu API artık Yaygın Olarak Kullanılabilir temel sürümün bir parçasıdır ; yani Chrome, Firefox ve Safari'nin tüm modern sürümleri tarafından desteklenmektedir. Eski tarayıcıları desteklemeniz gerekiyorsa, polyfill'ler aramanız gerekecektir; ancak çoğu modern proje için üretimde kullanıma hazırdır.
Bu API'yi uygulayarak, geliştiriciler verimsiz depolama çözümlerinden uzaklaşabilir ve yüksek düzeyde senkronize edilmiş bir kullanıcı deneyimi oluşturabilirler. İstemcinin tarayıcısında gerçek zamanlı iletişimi yönetmek için yerel, güvenli ve yüksek performanslı bir yol sağlayarak çoklu pencere uygulamalarının mimarisini basitleştirir .
