JavaScript ile Birden Fazla Sekmede Sayfayı Görüntülemeyi Engellemek

Whatsapp ya da Telegram'ın web versiyonlarını kullandıysanız, yeni bir sekmede tekrar açtığınızda aktif olan oturumunuz sonlanıyor. Yani birden fazla sekmede size uygulamayı kullandırtmıyor, bunu javascript ile nasıl yapabilirim diye düşünmüş olabilirsiniz. Bende düşündüm ve ortaya böyle bir sonuç çıktı.

İlk örneğimizde senaryo şu, aktif oturum haricinde yeni açılan oturumlarda içerik gösterilmeyecek. İlgili kodlarımız ise şöyle;

// sayfa hazır olduğunda başla
window.onload = function(){

    // açılan tab'a eğer sessionStorage'da yok ise bir tabId belirliyoruz
    var tabId = sessionStorage.tabId ? sessionStorage.tabId : sessionStorage.tabId = Math.random();
    
    // Bir defaya mahsus olmak üzere eğer localStorage'da bi tabId değeri saklanmıyorsa, aktif olan tab'ın tabId değerini atıyoruz
    if (typeof localStorage.tabId === 'undefined'){
        localStorage.tabId = tabId;
    }

    // aktif sekme haricinde başka bir sekmede açılıp açılmadığını, tabId'sinin localStorage'daki tabId'ye eşit olup olmadığını kontrol ederek anlıyoruz, ve eğer aktif sekme değilse sayfayı göstermiyoruz.
    if (tabId != localStorage.tabId){
        document.body.innerHTML = 'Aktif bir sekmede bu işlemi yapıyorsunuz, burada yapamazsınız!';
    }

    // aktif tab yenilendiğinde ya da kapatıldığında localStorage'da tabId değerini silmemiz gerek, aksi taktirde yeni bir sekmede hala başka aktif bir sekme açıkmış gibi davranmaya devam eder.
    window.onbeforeunload = function(){
        if (tabId == localStorage.tabId)
            delete localStorage.tabId;
    };

};

İkinci senaryomuz ise şöyle, aktif bir sekmemiz var. Aynı adresi başka bir sekmede açınca, orada açılacak ama bu sefer diğer sekmede göstermeyi durduracağız. Kodlarımızı inceleyelim;

// sayfa hazır olduğunda başla
window.onload = function(){

    // her sekme için tabId belirle
    var tabId = sessionStorage.tabId ? sessionStorage.tabId : sessionStorage.tabId = Math.random();
    
    // mevcut sekme hangisi ise localStorage'da tutulan tabId değerini ona eşitle
    localStorage.tabId = tabId;

    // saniyede bir kez çalışan bir fonksiyon yazdık, bu kontrol edecek. Eğer yeni bir sekme açılıp orada kullanılmaya başlandıysa, eskisini gizleyecek.
    var interval = setInterval(function(){
        if (tabId != localStorage.tabId){
            clearInterval(interval); // saniyede bir çalışan fonksiyonu kaldırıyorux.
            tabError();
        }
    }, 1000);

    function tabError(){
        document.body.innerHTML = 'Bu sekmede oturumunuz sonlandı.';
    }

};

Olayımız bu kadar, kolay gelsin.