يريد فريق التشغيل معرفة ما يجري الآن: الطلبات الجديدة والشحنات أثناء النقل والآلات العاملة والتذاكر المنتظرة. تبدو اللوحة التي تتطلب تحديثًا يدويًا قديمة، كما أن كثرة الاستعلامات ترهق الخادم. نستخدم Laravel مع Inertia.js وReact في تطبيقات الأعمال مثل Earth Movers ERP ومنصة نارمار إكسبريس للشحن. نستعرض طرق تحديث اللوحات وملاءمة كل منها.
«الوقت الحقيقي» طيف، والاختيار يعتمد على ما يفعله المشاهد بالمعلومة. اسأل عن كل عنصر:
- ما سرعة أهمية التغيير: خلال ثانية أم دقيقة أم ساعة؟
- كم مرة تتغير البيانات فعليًا؟
- كم شخصًا يراقبها في الوقت نفسه؟
قد يحتاج عدد الطلبات المنتظرة للإرسال تحديثًا خلال ثوانٍ، بينما يكفي تحديث الإيراد الشهري كل بضع دقائق. من الطبيعي جمع النوعين في شاشة واحدة بأساليب مختلفة.
الأسلوب الأول: إعادة التحميل الجزئي
يمكن لـInertia طلب بعض الخصائص دون الصفحة كاملة. يعيد الخادم بيانات ثقيلة عند الحاجة، ويطلب العميل تحديث الأجزاء المتغيرة فقط.
router.reload({ only: ['stats', 'recentOrders'] });يحافظ ذلك على حالة الصفحة وموضع التمرير وحقول النماذج ويتجنب حساب كل شيء من جديد. وهو أساس التقنيات الأخرى لأنه يحدث لوحة واحدة دون المساس بالبقية.
حمّل اللوحات الثقيلة بعد ظهور الصفحة
تسمح الخصائص المؤجلة بعرض الصفحة فورًا مع عناصر انتظار، ثم تحميل الاستعلامات البطيئة في طلب لاحق. أظهر هيكلًا نابضًا بدل مساحة فارغة ليفهم المستخدم أن التحميل جارٍ. يفيد ذلك في التقارير الثقيلة المتعددة وعلى الاتصالات المتواضعة.
الأسلوب الثاني: الاستطلاع الدوري
يسأل الاستطلاع الخادم عن البيانات الجديدة بجدول زمني. يوفر Inertia أداة تعيد تحميل الخصائص المختارة وتوقف العمل عند إخفاء علامة التبويب لتوفير الموارد.
usePoll(15000, { only: ['stats'] });متى يناسب الاستطلاع؟
- يكفي تحديث كل 10 إلى 60 ثانية.
- عدد المشاهدين المتزامنين متوسط.
- تريد تنفيذًا بسيطًا دون بنية إضافية.
اجعل الاستطلاع قليل الكلفة
يجب أن يستدعي كل استطلاع استعلامًا خفيفًا. خزن الأرقام المجمعة لبضع ثوانٍ، وأضف فهارس للمرشحات، وأعد الخصائص المتغيرة فقط. عشرون استعلامًا ثقيلًا كل عشر ثوانٍ لخمسين مشاهدًا ستجعل اللوحة بطيئة. مدد الفاصل للبيانات الهادئة وأوقف التحديث عند غياب المشاهد.
الأسلوب الثالث: البث عبر WebSockets
عندما يلزم ظهور التحديث خلال ثانية أو تصل الأحداث على نحو غير متوقع، يتفوق الإرسال على الاستطلاع. يرسل نظام broadcasting في Laravel الأحداث إلى المتصفح عبر WebSockets، بخادم مثل Laravel Reverb أو خدمة مستضافة. يشترك Laravel Echo في القناة ويستجيب مكون React للحدث.
نمط عملي
اجعل الحدث صغيرًا: أخبر العميل أن شيئًا تغير، ودعه يطلب الخصائص المناسبة عبر Inertia. تحصل على محفز فوري، مع إبقاء التنسيق والصلاحيات والحسابات على الخادم بدل تكرارها في المتصفح.
Echo.private('dispatch.' + branchId)
.listen('ShipmentUpdated', () => {
router.reload({ only: ['shipments'] });
});ما الذي تضيفه هذه التقنية؟
تضيف WebSockets خادمًا طويل التشغيل يحتاج إدارة وتأمينًا ومراقبة. تحتاج القنوات الخاصة إلى تفويض كيلا يستقبل المستخدم إلا أحداث بياناته، وهو أمر بالغ الأهمية في الأنظمة متعددة المستأجرين. خطط لإعادة الاتصال، فالشبكات المكتبية والهاتفية تنقطع، وحدّث البيانات بعد العودة كيلا تبقى الأرقام قديمة.
صمم لوحة تبقي البيانات موثوقة
أظهر وقت آخر تحديث
يعزز الطابع الزمني الثقة ويكشف المشكلات. عند انقطاع الاتصال أخبر المستخدم بدل عرض بيانات قديمة بصمت.
تجنب قفز التخطيط
خصص مساحة للأرقام والقوائم حتى لا تتحرك الصفحة مع التحديث. أبرز التغييرات لفترة وجيزة بدل تحريك كل شيء، وأتح إيقاف التحديث المباشر أثناء القراءة أو مقارنة الصفوف.
راعِ الصلاحيات والمستأجرين
يجب أن يقيد كل استعلام خلف اللوحة بما يسمح للمستخدم برؤيته. اختبر ذلك بطلب اللوحة بمستخدمين مختلفين والتحقق من الخصائص المعادة.
تعامل مع القوائم والرسوم الكبيرة
رقم القوائم أو حدها، واجمع البيانات في قاعدة البيانات لا JavaScript، وخفف كثافة السلاسل الزمنية قبل إرسالها للرسم. ينبغي للمتصفح عرض ملخصات لا آلاف الصفوف الخام.
أي أسلوب تختار؟
| الاحتياج | الأسلوب المناسب |
|---|---|
| تحديث لوحة بعد إجراء المستخدم | إعادة تحميل جزئي |
| تقارير بطيئة عند التحميل الأول | خصائص مؤجلة مع عناصر انتظار |
| تحديث خلال دقيقة ولمشاهدين قليلين | استطلاع دوري |
| تحديث خلال ثوانٍ وأحداث كثيرة | بث مع إعادة تحميل جزئي |
ابدأ بإعادة التحميل الجزئي والاستطلاع؛ فهما بسيطان وموثوقان ويكفيان لمعظم لوحات الأعمال. أضف البث إلى الشاشات القليلة التي تهم فيها الثواني، مثل لوحة التوزيع أو قائمة الطلبات الحية.
يصمم فريق نارمار لوحات يستفيد منها فريق التشغيل فعلًا ويبنيها معك. شاهد مشاريعنا وخدماتنا أو تواصل معنا عن بياناتك.
