Gerçek Zamanlı Angular Dashboard'ları Oluşturmak

Çoğu dashboard güncelliğini yitirmiş hissettirir. Kullanıcılar eski verileri görür ve yenilemek için tıklamak zorunda kalır. Polling yöntemini kullanabilirsiniz ancak bu sunucunuza çok fazla yük bindirir.

WebSockets bunu çözer. Sunucu, güncellemeleri gerçekleştiği anda iletir. Yenilemeye gerek kalmaz.

İşte Angular, RxJS ve Signals kullanarak gerçek zamanlı bir dashboard'un nasıl oluşturulacağı.

Mimari

  • Bağlantı için RxJS webSocket kullanın.
  • Durum (state) yönetimi için Angular Signals kullanın.
  • Verilerinizi tutmak için tek bir store kullanın.
  1. WebSocket Servisi

Her bileşen için yeni bir bağlantı açmayın. Servisinizde shareReplay kullanın. Bu, birden fazla widget'ın tek bir bağlantıyı kullanmasına olanak tanır.

Hataları akış (stream) içinde yakalayarak yönetin. Bu, bağlantı koptuğunda tüm uygulamanızın bozulmasını önler.

  1. Signal Store

Verileri bileşenlerin yönetmesi yerine, Signal tabanlı bir store kullanın. Bu, tek bir doğruluk kaynağı (single source of truth) oluşturur.

  • CPU kullanımı ve aktif kullanıcılar gibi metrikleri saklayın.
  • Son uyarıların küçük bir geçmişini tutun.
  • Kritik durumları işaretlemek için computed sinyalleri kullanın.
  1. Saf (Pure) Bileşenler

Bileşenleriniz basit kalmalıdır. Mantıksal işlemleri (logic) yönetmemelidirler. Sadece store'dan okuma yapmalı ve arayüzü (UI) oluşturmalıdırlar. Bu, kodunuzun test edilmesini ve bakımını kolaylaştırır.

Üretim Ortamı (Production) İçin Önemli İpuçları

  • Bağlantı Durumu: Kullanıcılara her zaman canlı olup olmadıklarını veya yeniden bağlanıyor olup olmadıklarını gösterin.
  • Üstel Geri Çekilme (Exponential Backoff): Bağlantıları her saniye yeniden denemeyin. Sunucunuzu korumak için zamanla artan bir gecikme kullanın.
  • Güvenlik: Kimlik doğrulama (auth) token'larınızı sorgu parametreleri veya ilk mesaj aracılığıyla iletin.

WebSockets, iki yönlü iletişime ihtiyaç duyduğunuzda en iyi şekilde çalışır. Eğer sadece veri almak istiyorsanız, Server-Sent Events (SSE) yapısına göz atın.

Kullanıcılarınıza sürekli yenile butonuna tıklatmayı bırakın. Canlı kalan bir şeyler inşa edin.

Angular'da gerçek zamanlı özellikler geliştirdiniz mi? WebSockets mi yoksa polling mi kullandınız?

Kaynak: https://dev.to/rigole/building-real-time-dashboards-in-angular-with-websockets-a-complete-guide-10he