Gerçek Zamanlı UI Senkronizasyonu: Nasıl Yapılır

Published in

roofstacks-tech

3 min readApr 24, 2023

Merhaba, bu yazıda web uygulamanızın farklı sekmelerdeki birbirleri ile iletişimi ve senkron çalışması ile ilgili bir içerik sunmaktayım.

Başlamadan önce bu yazıda Javascript, Angular, Nuxt olmak üzere toplamda 3 farklı platform üzerinde örnekler sunulmaktadır.

Eğer çok sekmeli uygulamalar yapıp, müşterilerinizin bu sekmeler arasında gezerken onlara daha iyi bir deneyim sunmak istiyorsanız sekmeler arası ui senkronizasyonu bu durum için kullanımı kolay ama etkili bir yöntemdir.

Angular ile geliştirilmiş bir tema ve auth işlemlerinin fakrlı sekmeler arasındaki senkronizasyonu

UI Senkronizasyonu

UI Senkronizasyonu, birden fazla kullanıcının aynı anda aynı uygulama üzerinde çalıştığı durumlarda, kullanıcı arayüzünün tüm kullanıcılar için aynı olmasını sağlar. Bu, bir kullanıcının yaptığı değişikliklerin diğer kullanıcılar tarafından da görüntülenmesini ve etkileşimli öğelerin doğru bir şekilde senkronize edilmesini sağlar.

UI Senkronizasyonu, modern web uygulamalarında birkaç farklı yöntem kullanılarak sağlanabilir. Bu yöntemlerden bazıları şunlardır:

Web Soketleri

Web soketleri, gerçek zamanlı web uygulamaları için kullanılan bir protokoldür. Bir web soketi bağlantısı, sunucu ve istemci arasında çift yönlü bir iletişim kanalı sağlar. Bu kanal, bir kullanıcının yaptığı değişiklikleri tüm diğer kullanıcılara anında iletmek için kullanılabilir.

Veritabanı Senkronizasyonu

Bazı modern web uygulamaları, bir veritabanı üzerinde depolanan verileri kullanarak UI senkronizasyonu sağlar. Bir kullanıcının yaptığı değişiklikler, veritabanında kaydedilir ve diğer kullanıcılara anında gösterilir. Bu yöntem özellikle real-time uygulamalar için verimli olmayacağı için kullanılması önerilmez.

Broadcast Channel

Broadcast Channel, aynı kök alan adına sahip farklı sayfalar arasında iletişim kurmak için kullanılan bir web api çeşididir.

Bir anahtar kelime(key) kullanılarak oluşturulur ve bu anahtar kelimeye sahip olan tüm sayfalar, mesajları bu key ile abone olan diğer sayfalara iletir. Yani, bir sayfa key’e abone olursa, diğer sayfalar tarafından yayınlanan tüm mesajları alır.

Broadcast Channel, birçok farklı senaryoda kullanılabilir. Örneğin, birden fazla sekme veya pencere arasında bilgi paylaşmak isteyen uygulamalarda, bir sayfa üzerinde yapılan değişiklikleri tüm sayfalara bildirmek isteyen uygulamalarda veya birden fazla iframe arasında bilgi paylaşımı yapmak isteyen uygulamalarda kullanılabilir.

Broadcast Channel Tarayıcı Desktleri

Google Chrome (versiyon 54 veya sonrası)
Mozilla Firefox (versiyon 38 veya sonrası)
Microsoft Edge (versiyon 17 veya sonrası)
Apple Safari (versiyon 10 veya sonrası)
Opera (versiyon 41 veya sonrası)

Neden Broadcast Channel kullanmalıyız

Gerçek zamanlı bildirimler: Broadcast channel, birden çok tarayıcı sekmesinde veya cihazda gerçek zamanlı bildirimler göndermek için kullanılabilir. Örneğin, bir admin paneli kullanıcısına gönderdiği bir bildirimi tüm sekmelerde ve tüm cihazlarında eş zamanlı göstermek ister bunu broadcast channel kullanarak yapabiliriz.
Daha hızlı veri iletimi: Broadcast channel, tek tek tüm cihazlara ayrı ayrı mesaj göndermek yerine, birden çok cihaza aynı anda mesaj gönderir. Bu, veri iletişimini daha hızlı hale getirir ve sunucunun yükünü azaltır.
Daha düşük ağ kullanımı: Broadcast channel, birden çok cihaza aynı anda mesaj göndererek, ağ kullanımını azaltır.
Kullanımı kolay: Broadcast channel, WebSocket veya diğer daha gelişmiş teknolojiler yerine daha basit bir yapı kullanarak hızlı ve kolay bir şekilde geliştirme yapmamızı sağlar

Broadcast Channel Kullanımı ile ui senkronizasyonu

Örnek Kullanım alanları

Oturum işlemlerinin yönetimi ( Login, Register vb … )
UI ayarlarının yönetimi ( tema, avatar, bildirimler vb … )
Özelleştirilmiş alanlar ( Projeye özgü görünüm değişiklikleri vb … )

Kullanımı

Aşağıdaki örnek üzerinden yorum satırı anlatımı ile ilerleyelim.

const bc = new BroadcastChannel("demo-project");//Bir channel oluşturuyoruz

const data = { 'type':'theme', 'value' :'dark'} 

// Burada verimizi oluşturup postMessage komutu ile bu kanala abone olan
// tüm node'lara verimizi gönderiyoruz

bc.postMessage(data); 


// Daha sonra gelene verilerimizi onmesssage event'i ile dinleyip gerekli
// işlemleri yapıyoruz.

bc.onmessage = (event) => {
  if(event.data.type == 'theme'){ // gelen mesajları sınıflandırıyoruz
    setTheme(event.data.value) // örnekte olduğu üzere tema değiştiriyoruz.
  }
};

bc.close(); // kanaldan çıkmak istediğimizde bu komutu kullanıyoruz.