المستوى: متوسط — الشرح يبدأ من الصفر بمثال بسيط، لكنه يفترض إنك تعرف أساسيات JavaScript و HTTP وشغّلت سيرفر Node.js قبل كده.
هتطلع من المقال ده وانت قادر تبعت إشعار للمتصفح في نفس اللحظة اللي بيحصل فيها الحدث، من غير ما المستخدم يعمل refresh، ومن غير ما تركّب WebSocket ولا مكتبة تقيلة. الأداة اسمها Server-Sent Events، وهنبنيها في أقل من 40 سطر.
المشكلة باختصار
عندك dashboard بيعرض طلبات جديدة أو تنبيهات. الطريقة الشائعة إن المتصفح يسأل السيرفر كل شوية: "في جديد؟" (اسمها polling). المشكلة إن أغلب الأسئلة دي بترجع فاضية.
لو عندك 2000 مستخدم متصلين، و polling كل 3 ثواني، ده حوالي 667 طلب في الثانية معظمها بيرد "لا يوجد جديد". هدر في السيرفر، وتأخير في الإشعار وسطه ثانية ونص. SSE بيقلب المعادلة: السيرفر هو اللي بيدفع، والمتصفح بيستنى بهدوء.
يعني إيه SSE؟ (بمثال الأول)
تخيّل محطة راديو. انت بتفتح المحطة مرة واحدة، وبعدها بتفضل قاعد تستقبل كل ما يذيعوه، أول بأول، من غير ما تتصل بيهم كل دقيقة تسأل "في أغنية جديدة؟". انت مجرد مستمع، والبث بيجيلك في اتجاه واحد.
SSE بالظبط كده. المتصفح بيفتح "قناة" واحدة للسيرفر وبيسيبها مفتوحة. السيرفر يفضّل يبعت رسائل على القناة دي كل ما يحصل حدث، والمتصفح يستقبلها لحظيًا.
علميًا: الـ Server-Sent Events معيار في مواصفة HTML، بيشتغل فوق اتصال HTTP عادي واحد يفضل مفتوح. السيرفر بيبعت الرد بنوع text/event-stream، وكل رسالة بتكون سطر يبدأ بـ data: وينتهي بسطرين فاضيين. المتصفح بيقرأها عبر كائن جاهز اسمه EventSource، وأهم ميزة إنه بيعيد الاتصال تلقائيًا لو الشبكة قطعت.
الخطوات: ابنِ نظام الإشعارات في Node.js
1. جهّز المشروع. ثبّت Express، هيسهّل التوجيه بس المبدأ نفسه شغّال بـ http الخام.
mkdir sse-demo && cd sse-demo
npm init -y
npm install express
النتيجة المتوقّعة: مجلد فيه node_modules و package.json.
2. افتح نقطة البث /events. دي اللي المتصفح هيتصل بيها ويسيبها مفتوحة. لاحظ الهيدرات: text/event-stream عشان المتصفح يفهم إنه بث، و X-Accel-Buffering: no عشان nginx ما يخزّنش الرسائل ويأخّرها.