𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗹-𝗧𝗶𝗺𝗲 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗗𝗮𝘀𝗵𝗯𝗼𝗮𝗿𝗱𝘀 𝘄𝗶𝘁𝗵 𝗪𝗲𝗯𝗦𝗼𝗰𝗸𝗲𝘁𝘀

বেশিরভাগ ড্যাশবোর্ডই একঘেয়ে মনে হয়। ব্যবহারকারীরা একটি পেজে এসে অপেক্ষা করেন। তারা রিফ্রেশ করেন অথবা ক্রমাগত পোলিং (polling)-এর সম্মুখীন হন যা আপনার সার্ভারকে ধীর করে দেয়।

WebSockets এই চিত্রটি বদলে দেয়। ক্লায়েন্ট ডেটা চাওয়ার পরিবর্তে, সার্ভার নিজেই তা পুশ (push) করে। লাইভ মেট্রিক্স, ইউজার অ্যাক্টিভিটি বা আর্থিক ডেটার জন্য এটি আদর্শ।

Angular, RxJS এবং Signals ব্যবহার করে কীভাবে একটি প্রোডাকশন-রেডি রিয়েল-টাইম ড্যাশবোর্ড তৈরি করবেন তা নিচে দেওয়া হলো।

আর্কিটেকচার (The Architecture)

  • কানেকশন ম্যানেজ করার জন্য RxJS webSocket ব্যবহার করুন।
  • একাধিক কম্পোনেন্ট যাতে একটি কানেকশন ব্যবহার করতে পারে সেজন্য shareReplay ব্যবহার করুন।
  • সিঙ্গেল সোর্স অফ ট্রুথ (single source of truth) হিসেবে Angular Signals ব্যবহার করুন।
  • কম্পোনেন্টগুলোকে সহজ রাখতে একটি Store pattern ব্যবহার করুন।

১. সার্ভিস লেয়ার (The Service Layer) প্রতিটি কম্পোনেন্টের জন্য নতুন কানেকশন খুলবেন না। rxjs/webSocket থেকে webSocket subject ব্যবহার করুন। shareReplay ব্যবহার করুন যাতে আপনার পুরো অ্যাপ একটি মাত্র স্ট্রিম শেয়ার করতে পারে। এটি আপনার সার্ভারকে শত শত অপ্রয়োজনীয় কানেকশন হ্যান্ডেল করা থেকে বিরত রাখে।

২. সিগন্যাল স্টোর (The Signal Store) আপনার কম্পোনেন্টে বিজনেস লজিক রাখা এড়িয়ে চলুন। একটি Store তৈরি করুন যা আপনার সার্ভিসের সাথে সাবস্ক্রাইব করবে। এই স্টোরটি আপনার মেট্রিক্স এবং অ্যালার্টগুলোকে Signals-এ ধরে রাখবে। এরপর আপনার কম্পোনেন্টগুলো শুধু এই সিগন্যালগুলো রিড করবে। এটি আপনার UI-কে দ্রুত এবং টেস্ট করা সহজ করে তোলে।

৩. ক্লিন কম্পোনেন্ট (Clean Components) আপনার কম্পোনেন্টের শুধুমাত্র একটি কাজ করা উচিত: ডেটা রেন্ডার করা। আপনি যদি Signal-ভিত্তিক স্টোর ব্যবহার করেন, তবে আপনার কম্পোনেন্ট কোড খুব ছোট থাকবে। এটি একটি ভ্যালু রিড করবে এবং স্ক্রিনে দেখাবে।

কিছু প্রো টিপস (Key Pro Tips)

  • কানেকশন স্ট্যাটাস: সব সময় একটি "Live" বা "Reconnecting" ইন্ডিকেটর দেখান। ব্যবহারকারীদের জানা প্রয়োজন যে তাদের ডেটা আপ-টু-ডেট কি না।
  • এরর হ্যান্ডলিং: রিকানেকশনের জন্য exponential backoff ব্যবহার করুন। সার্ভার ডাউন থাকলে বারবার রিকোয়েস্ট পাঠিয়ে সার্ভারকে চাপে ফেলবেন না।
  • ডেটা ম্যানেজমেন্ট: আপনার অ্যালার্ট অ্যারেগুলোতে .slice() ব্যবহার করুন। এটি অতিরিক্ত মেমরি খরচ না করেই আপনার হিস্ট্রিকে কার্যকর রাখে।

যখন আপনার টু-ওয়ে (two-way) কমিউনিকেশন প্রয়োজন হয়, তখন WebSockets সবচেয়ে ভালো কাজ করে। আপনি যদি শুধুমাত্র ডেটা রিসিভ করতে চান, তবে আরও সহজ বিকল্প হিসেবে Server-Sent Events (SSE) দেখতে পারেন।

ব্যবহারকারীদের রিফ্রেশ বাটন চাপতে বাধ্য করা বন্ধ করুন।

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