بناء موجز إشعارات في الوقت الفعلي

يجمع موجز الإشعارات الآني بين دفق SSE للإشعارات الواردة ونقاط REST الطرفية لتمييز العناصر كمقروءة. يحتفظ المكوّن بحالة محلية لقائمة الإشعارات، ويشترك في دفق الخادم عبر EventSource داخل useEffect، ويتعامل مع تفاعلات المستخدم (تمييز كمقروء وإخفاء) باستخدام تحديثات متفائلة.

يكون كائن الإشعار عادةً بهذه البنية: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. ويحدد الحقل type الأيقونة واللون. ويتتبع الحقل read ما إذا كان المستخدم قد أقرّ الإشعار. ويتيح الحقل timestamp تجميع الإشعارات حسب الفترة الزمنية.

أنشئوا داخل useEffect كائن EventSource متصلًا بـ /api/notifications/stream. وعند كل حدث message، حللوا JSON وأضيفوا الإشعار الجديد إلى بداية الحالة: setNotifications(prev => [JSON.parse(e.data), ...prev]). يؤدي الإضافة إلى البداية (سلوك unshift) إلى وضع أحدث إشعار في الأعلى، وهو الأسلوب المعتاد في موجزات الإشعارات.

استنتجوا عدد الإشعارات غير المقروءة من مصفوفة الإشعارات من دون حالة إضافية: const unreadCount = notifications.filter(n => !n.read).length. اعرضوا هذا العدد كشَارة على أيقونة جرس الإشعارات. سيتحدث العدد تلقائيًا كلما تغيرت حالة الإشعارات، ولا حاجة إلى إدارة حالة منفصلة.

عندما ينقر المستخدم على إشعار، طبّقوا تحديث القراءة المتفائل فورًا: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). ثم أرسلوا طلب PATCH إلى /api/notifications/:id مع { read: true } في الخلفية. تراجعوا عن التحديث المتفائل إذا فشل الطلب.

جمّعوا الإشعارات لعرضها ضمن مجموعات: «اليوم» (في اليوم التقويمي نفسه)، و«الأمس»، و«أقدم». احسبوا المجموعة باستخدام الطابع الزمني للإشعار والتاريخ الحالي: const today = new Date().toDateString(). اعرضوا كل مجموعة كقسم منفصل مع تسمية في ترويس​​ته. ويسهّل ذلك استعراض قائمة طويلة من الإشعارات كثيرًا.

عندما يكون المستخدم في صفحة مختلفة ويصل إشعار جديد عبر SSE، اعرضوا إشعارًا منبثقًا بدلًا من تحديث قائمة الإشعارات أو بالإضافة إليه. استخدموا سياق إشعارات عامًا أو مخزن Zustand يمكن لكل من مشترك SSE ومُصيّر الإشعارات المنبثقة الوصول إليه. يختفي الإشعار المنبثق بعد بضع ثوانٍ، بينما يبقى الإشعار في القائمة.

بالنسبة إلى الإشعارات التي تظهر في أنحاء التطبيق، خزّنوها في سياق React أو مخزن Zustand على مستوى جذر التطبيق. ويكون اشتراك SSE في مكوّن موفّر قريب من أعلى شجرة المكوّنات. ويمكن لأي مكوّن قراءة الإشعارات أو إرسال إشعارات جديدة عبر المخزن المشترك، مما يتيح عرض الإشعارات المنبثقة من أي صفحة.

يتولى EventSource إعادة الاتصال تلقائيًا عند انقطاع الشبكة، لكن تغيّر مستوى ظهور علامة التبويب يختلف عن ذلك. فعندما يعود المستخدم إلى علامة تبويب بعد غياب طويل، قد يكون الخادم قد أنهى اتصال SSE. يعيد EventSource الاتصال تلقائيًا، وتعيد آلية Last-Event-ID تشغيل أي إشعارات فاتت المستخدم أثناء وجود علامة التبويب في الخلفية.

تفقد تطبيقات الصفحة الواحدة حالة الإشعارات الموجودة في الذاكرة عند الانتقال بعيدًا عن الصفحة. خزّنوا الإشعارات في localStorage بعد كل تحديث: localStorage.setItem('notifications', JSON.stringify(notifications)). وعند التركيب، ابدؤوا الحالة من localStorage قبل اتصال دفق SSE. ويحافظ ذلك على سجل الإشعارات أثناء التنقل بين الصفحات.

يجب أن تضبط نقطة SSE الطرفية على الخادم ترويسات محددة: Content-Type: text/event-stream وCache-Control: no-cache وConnection: keep-alive. في Express/NestJS، اكتبوا الأحداث بالشكل data: ${JSON.stringify(payload)} ؛ لاحظوا السطرين الجديدين اللذين يشيران إلى نهاية الحدث. ويجب على الخادم تفريغ المخزن المؤقت بعد كل عملية كتابة لضمان وصول الحدث إلى المتصفح فورًا.

ما قيمة ترويسة Content-Type الصحيحة لنقطة SSE (الأحداث المرسلة من الخادم) الطرفية؟

تجمع موجزات الإشعارات بين الاشتراك في SSE (استخدام useEffect مع تنظيف EventSource) وتعديلات REST (استخدام PATCH للتمييز كمقروء). بنية البيانات: {id, type, message, timestamp, read}. استنتجوا unreadCount باستخدام filter، وجمّعوا الإشعارات حسب اليوم/الأمس/الأقدم لعرضها. استخدموا سياقًا عامًا أو Zustand للإشعارات المنبثقة عبر الصفحات. واحفظوا البيانات في localStorage للحفاظ عليها أثناء التنقل. تتطلب نقطة SSE الطرفية Content-Type: text/event-stream وCache-Control: no-cache وفواصل أحداث مكوّنة من سطرين جديدين.