Tarayıcı Sekmeleri Arası İletişim: Broadcast Channel API
Broadcast Channel API, Web uygulamalarında farklı pencereler, sekmeler veya frame’ler arasında veri iletişimi sağlar. Modern tarayıcılar tarafından desteklenir.
Broadcast Channel API Nedir?
Broadcast Channel API, aynı kök alan adına sahip farklı pencereler veya frame’ler arasında iletişim kurmayı sağlar. Bu, örneğin, bir kullanıcının bir sekmedeki bir eylemi diğer açık sekmedeki veya penceredeki bir içeriği etkileyebilir.
Neden kullanılır?
Gerçek dünya senaryo örneği
Bir e-ticaret platformunda birden fazla sekme kullanarak alışveriş yapan bir kullanıcıyı düşünelim. Sepete bir ürün eklediğinde, diğer sekmelerdeki sepetin otomatik olarak güncellenmesi istendiğinde Broadcast Channel API’a başvurulabilir. Kullanıcının aktif olan sekmesindeki sepet değiştiğinde diğer sekmelerdeki sepetin de güncellenmesi için sinyal gönderilebilir.
Nasıl kullanılır?
Önce, iletişim kuracak iki farklı pencere oluşturuyoruz
// Pencere 1
const channel = new BroadcastChannel('my_channel');
// Pencere 2
const channel = new BroadcastChannel('my_channel');İlk pencerede bir kanal oluşturduk ve ona ‘my_channel’ adını verdik. Ardından, ikinci pencerede de aynı isimle bir kanal oluşturduk.
Şimdi, bir pencereden diğerine bir mesaj gönderelim
// Pencere 1
channel.postMessage('Merhaba dünya!');Mesajı almak için diğer pencerede bir dinleyici ekleyelim
// Pencere 2
channel.onmessage = function(event) {
console.log(event.data); // "Merhaba dünya!" çıktısını alırız
};Bu kodda, ‘onmessage’ olayı, kanaldan bir mesaj geldiğinde tetiklenir ve gelen mesaj ‘event’ parametresi üzerinden erişilebilir.
Bu yazı hazırlanırken yararlandığım kaynak
