بناء لوحات تحكم Angular في الوقت الفعلي

تبدو معظم لوحات التحكم قديمة وغير متفاعلة؛ حيث يرى المستخدمون بيانات قديمة ويضطرون للنقر على زر التحديث. قد تستخدم تقنية الـ polling، لكن ذلك يضغط على الخادم الخاص بك بشكل كبير.

تحل WebSockets هذه المشكلة، حيث يقوم الخادم بدفع التحديثات فور حدوثها، دون الحاجة إلى إعادة التحميل.

إليك كيفية بناء لوحة تحكم في الوقت الفعلي باستخدام Angular و RxJS و Signals.

البنية التحتية

  • استخدم RxJS webSocket للاتصال.
  • استخدم Angular Signals لإدارة الحالة (state).
  • استخدم مخزناً واحداً (single store) للاحتفاظ ببياناتك.

1. خدمة WebSocket

لا تفتح اتصالاً جديداً لكل مكون (component). استخدم shareReplay في خدمتك، فهذا يتيح لعدة أدوات (widgets) استخدام اتصال واحد فقط.

تعامل مع الأخطاء عن طريق التقاطها (catching) داخل التدفق (stream). هذا يمنع تعطل تطبيقك بالكامل عند انقطاع الاتصال.

2. مخزن الـ Signal

بدلاً من جعل المكونات تدير البيانات، استخدم مخزناً يعتمد على الـ Signals. هذا يخلق مصدراً واحداً للحقيقة (single source of truth).

  • قم بتخزين المقاييس مثل استهلاك المعالج (CPU usage) وعدد المستخدمين النشطين.
  • احتفظ بسجل صغير للتنبيهات الأخيرة.
  • استخدم الـ computed signals لتمييز الحالات الحرجة.

3. المكونات النقية (Pure Components)

يجب أن تظل مكوناتك بسيطة، وألا تتولى معالجة المنطق (logic). دورها يقتصر على القراءة من المخزن وعرض واجهة المستخدم (UI). هذا يجعل الكود الخاص بك سهلاً في الاختبار والصيانة.

نصائح رئيسية للإنتاج (Production)

  • حالة الاتصال: أظهر للمستخدمين دائماً ما إذا كانوا متصلين مباشرة (live) أو في مرحلة إعادة الاتصال.
  • التراجع الأسي (Exponential Backoff): لا تحاول إعادة الاتصال كل ثانية. استخدم تأخيراً يزداد بمرور الوقت لحماية الخادم الخاص بك.
  • الأمان: مرر رموز المصادقة (auth tokens) عبر معاملات الاستعلام (query parameters) أو من خلال الرسالة الأولى.

تعمل WebSockets بشكل أفضل عندما تحتاج إلى اتصال ثنائي الاتجاه. إذا كنت تحتاج فقط إلى استقبال البيانات، فابحث في تقنية Server-Sent Events (SSE).

توقف عن إجبار مستخدميك على النقر على زر التحديث. ابنِ شيئاً يظل حياً ومباشراً.

هل قمت ببناء ميزات في الوقت الفعلي باستخدام Angular؟ هل استخدمت WebSockets أم polling؟

المصدر: https://dev.to/rigole/building-real-time-dashboards-in-angular-