بناء لوحات تحكم Angular في الوقت الفعلي باستخدام WebSockets

تبدو معظم لوحات التحكم جامدة. يصل المستخدمون إلى الصفحة وينتظرون، فإما أن يقوموا بتحديث الصفحة يدويًا أو يتعاملوا مع عملية الاستعلام المستمر (polling) التي تبطئ خادمك.

تغير WebSockets هذا الواقع. فبدلاً من أن يطلب العميل البيانات، يقوم الخادم بدفعها (push). وهذا أمر مثالي للمقاييس الحية، أو نشاط المستخدم، أو البيانات المالية.

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

الهيكلية

  • استخدم RxJS webSocket لإدارة الاتصال.
  • استخدم shareReplay للسماح لمكونات متعددة باستخدام اتصال واحد.
  • استخدم Angular Signals ليكون لديك مصدر واحد للحقيقة (single source of truth).
  • استخدم نمط Store لإبقاء المكونات بسيطة.

  1. طبقة الخدمة (The Service Layer) لا تفتح اتصالاً جديداً لكل مكون. استخدم webSocket subject من rxjs/webSocket. استخدم shareReplay لكي يتشارك تطبيقك بالكامل في تدفق بيانات (stream) واحد. هذا يمنع خادمك من التعامل مع مئات الاتصالات غير الضرورية.

  2. مخزن الإشارات (The Signal Store) تجنب وضع منطق العمل (business logic) داخل مكوناتك. قم بإنشاء Store يشترك (subscribes) في الخدمة الخاصة بك. يقوم هذا الـ Store بتخزين المقاييس والتنبيهات في Signals. بعد ذلك، تقوم مكوناتك فقط بقراءة هذه الإشارات. هذا يجعل واجهة المستخدم لديك سريعة وسهلة الاختبار.

  3. مكونات نظيفة (Clean Components) يجب أن تقوم مكوناتك بشيء واحد فقط: عرض البيانات. إذا كنت تستخدم Store يعتمد على Signals، فسيظل كود المكون صغيراً جداً؛ حيث يقرأ قيمة ويعرضها على الشاشة.

نصائح احترافية رئيسية

  • حالة الاتصال: اعرض دائماً مؤشراً مثل "مباشر" (Live) أو "إعادة الاتصال" (Reconnecting). يحتاج المستخدمون لمعرفة ما إذا كانت بياناتهم محدثة.
  • معالجة الأخطاء: استخدم التراجع الأسي (exponential backoff) لإعادة الاتصال. لا تنهال بالطلبات على خادمك عندما يتوقف عن العمل.
  • إدارة البيانات: استخدم .slice() على مصفوفات التنبيهات الخاصة بك. هذا يحافظ على فائدة سجل البيانات دون استهلاك الكثير من الذاكرة.

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

توقف عن جعل مستخدميك يضغطون على زر التحديث.

المصدر: https://dev.to/rigole/building-real-time-dashboards-in-angular-with-websockets-a-complete-guide-10he