Javascript Broadcast API

Merhabalar, bu yazımızda javascript kullanarak tarayıcı sekmeleri arasında senkronizasyonu sağlayacak kodlamayı yapacağız. Çoğu zaman bir web projemizde kullanıcılar birden fazla sekme açıp gezinme yapabilmekte. Bir sekmede genel geçer bir değişiklik yaptığında diğer sekmelerde bunu otomatik olarak algılayıp işlem yapmasını sağlamamız gerekiyor. Örneğin web sayfamızda birden fazla sekme içerisinde gezinirken koyu/açık mod seçeneğinde bir değişiklik yaptığı zaman tüm sekmelerde otomatik olarak bu işlemin de gerçekleşmesini sağlayabilmeliyiz. Veya bir sekmede oturum açtığı zaman diğer sekmelerin de otomatik olarak bunu algılayıp oturumun açık hale gelmesini sağlamalıyız, veya dil seçeneğini değiştirdiğinde bunu tüm açık sekme ve pencerelerde değiştirmeliyiz. Bunu yapabilmemiz için ihtiyacımız olan şey ise javascript Broadcast Channel API .

Broadcast Channel API Nedir?

Broadcast Channel API, bir JavaScript API’sidir ve birden fazla tarayıcı penceresi veya etkileşimli sekmeler arasında veri paylaşımına olanak sağlar. Özellikle, bir tarayıcı penceresi veya etkileşimli sekmesinin, diğer pencereler veya sekmelerle iletişim kurmasını sağlar. Bu, aynı anda açık olan tüm tarayıcı pencereleri ve etkileşimli sekmeleri etkileyebilir veya hedefleyebilir.

Broadcast Channel API, genellikle tarayıcı pencereleri ve etkileşimli sekmeler arasında veri paylaşımı için kullanılır. Örneğin, bir tarayıcı penceresinde bir form doldurulurken, diğer tarayıcı pencerelerinde de otomatik olarak güncelleştirilmiş veriler gösterilebilir.

Projelerimizde Nasıl Kullanabiliriz?

Broadcast Channel API’yi kullanmak için, ilk olarak bir Broadcast Channel nesnesi oluşturulur ve bu nesne üzerinden mesajlar gönderilebilir ve alınabilir. Örneğin:

const channel = new BroadcastChannel('myChannel');

Yukarıdaki örnekte myChannel adında bir kanal oluşturduk ve bunu channel adında bir değişkene aktardık. Daha sonra bu kanala mesaj göndermek ve bu mesaja göre yapmak istediğimizi yaptırmak için aşağıdaki kodları kullanabiliriz.

// Mesaj gönderme
channel.postMessage('Mesajım');

// Mesaj alma
channel.onmessage = event => {
  console.log(event.data);
}

Şimdi daha iyi anlamak için bunu bir örnekle gösterelim.

Bir HTML butonumuz var ve buna basıldığında web sayfamızın koyu/açık modu arasında değişiklik gerçekleşiyor. Şimdi bu faaliyeti yaptırdığımız javascript kodunun arasında bir ekleme yapacağız ve bu ekleme bizim channel

adındaki değişkenimize bir mesaj gönderecek. Daha sonra bu mesajı alan channel ise istediğimi değişikliği diğer sekmeler/pencereler için yapacak.

Örnek:

function modeChange(){
   const layoutMode = document.body.getAttribute("data-layout-mode"); //mevcut modumuzu alıyoruz
    if (layoutMode =='dark'){ //mevcut modumuz koyuysa
        document.body.setAttribute("data-layout-mode", "light");
        channel.postMessage('light'); //channel adlı yayınımıza 'light' mesajını gönderiyoruz
    }else { //mevcut modumuz koyu değilse
        document.body.setAttribute("data-layout-mode", "dark")
        channel.postMessage('dark'); //channel adlı yayınımıza 'dark' mesajını gönderiyoruz
    }
}

//burada ise değişikliği dinliyoruz ve gerekli işlemi diğer sekmeler için yapıyoruz.
channel.onmessage = event => {
    switch (event.data){
        case 'dark':
            document.body.setAttribute("data-layout-mode", event.data);
            break;
        case 'light':
            document.body.setAttribute("data-layout-mode", event.data);
            break;
        default:
            console.log(event.data);
            break;
    }
}

Örnekler tabiki çoğaltılabilir. Örneğin login işlemi gerçekleştiğinde ‘userLogin’ adında bir mesaj gönderip diğer sekmelerde sayfayı yenilemesini sağlayabiliriz. Ya da cookie ekleme/silme işlemleri için kullanılabilir. Aynı şekilde logout için de aynı yöntem kullanılabilir.

Broadcast Channel API, çeşitli tarayıcılarda desteklenmektedir. Ancak, tüm tarayıcılar tarafından tam olarak desteklenmemektedir. Aşağıda desteklenen tarayıcıların bir listesi verilmiştir:

  • Google Chrome 49 ve üzeri
  • Mozilla Firefox 52 ve üzeri
  • Microsoft Edge 14 ve üzeri
  • Safari 11 ve üzeri
  • Opera 57 ve üzeri

Bu ve benzeri önemli ipuçlarını öğrenmek için diğer yazılarıma da göz atabilirsiniz.

Web sitesine mi ihtiyacınız var ?

Yararlanılan Kaynaklar:

Kategori:

HTMLJavascript

Etiketler:

, , , ,