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

Çoğu dashboard güncelliğini yitirmiş hissettirir. Kullanıcılar bir sayfaya girer ve bekler. Sayfayı yenilerler veya sunucunuzu yavaşlatan sürekli polling (sorgulama) işlemleriyle uğraşmak zorunda kalırlar.

WebSockets bunu değiştirir. İstemcinin veri istemesi yerine, sunucu veriyi iter (push eder). Bu; canlı metrikler, kullanıcı aktiviteleri veya finansal veriler için idealdir.

İşte Angular, RxJS ve Signals kullanarak üretime hazır (production-ready) gerçek zamanlı bir dashboard oluşturmanın yolu.

Mimari

  • Bağlantıyı yönetmek için RxJS webSocket kullanın.
  • Birden fazla bileşenin tek bir bağlantıyı kullanmasına izin vermek için shareReplay kullanın.
  • Tek bir doğruluk kaynağı (single source of truth) için Angular Signals kullanın.
  • Bileşenleri basit tutmak için bir Store deseni kullanın.

  1. Servis Katmanı Her bileşen için yeni bir bağlantı açmayın. rxjs/webSocket içindeki webSocket subject'ini kullanın. Tüm uygulamanızın tek bir akışı (stream) paylaşması için shareReplay kullanın. Bu, sunucunuzun yüzlerce gereksiz bağlantıyı yönetmesini engeller.

  2. Signal Store İş mantığını (business logic) bileşenlerinize koymaktan kaçının. Servisinize abone olan bir Store oluşturun. Bu store, metriklerinizi ve uyarılarınızı Signals içinde tutar. Bileşenleriniz daha sonra sadece bu sinyalleri okur. Bu, kullanıcı arayüzünüzü (UI) hızlı ve test edilebilir kılar.

  3. Temiz Bileşenler Bileşenleriniz sadece tek bir şey yapmalıdır: veriyi render etmek. Eğer Signal tabanlı bir store kullanırsanız, bileşen kodunuz çok küçük kalır. Bir değeri okur ve ekranda gösterir.

Önemli Profesyonel İpuçları

  • Bağlantı Durumu: Her zaman bir "Canlı" veya "Yeniden Bağlanıyor" göstergesi gösterin. Kullanıcılar verilerinin güncel olup olmadığını bilmek ister.
  • Hata Yönetimi: Yeniden bağlantılar için exponential backoff kullanın. Sunucunuz çöktüğünde ona yüklenmeyin.
  • Veri Yönetimi: Uyarı dizilerinizde .slice() kullanın. Bu, çok fazla bellek kullanmadan geçmiş verilerinizi kullanışlı tutar.

WebSockets, iki yönlü iletişime ihtiyaç duyduğunuzda en iyi şekilde çalışır. Sadece veri almak istiyorsanız, daha basit bir seçenek olan Server-Sent Events (SSE) yapısını inceleyin.

Kullanıcılarınızın yenileme düğmesine basmasına son verin.

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