Gerçek Zamanlı UI Senkronizasyonu: Nasıl Yapılır
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.
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.