أحداث الخادم المُرسلة (Server-Sent Events) في JavaScript: الوقت الفعلي بدون WebSocket

ما هي أحداث الخادم المُرسلة (Server-Sent Events) ولماذا تحتاجها؟

\n\n

تخيل أنك تفتح موقعًا لأسعار العملات، وسعر الدولار يتغير أمام عينيك مباشرة — دون تحديث الصفحة أو الضغط على أي أزرار. أو أنك تنتظر نتيجة معالجة ملف كبير على الخادم، وفجأة يظهر سطر: "اكتمل 70%". كيف يعمل هذا؟ واحدة من أكثر الطرق أناقةً هي أحداث الخادم المُرسلة (Server-Sent Events أو SSE).

\n\n

SSE هي تقنية تسمح للخادم بإرسال البيانات إلى العميل تلقائيًا في أي لحظة، بمجرد ظهورها. على عكس WebSocket، تعمل SSE في اتجاه واحد فقط — من الخادم إلى العميل. ولكن في هذا تكمن قوتها الخارقة: فهي بسيطة للغاية، فعّالة، ومثالية للمهام التي يحتاج فيها العميل فقط إلى تلقي التحديثات.

\n\n

في هذا المقال، سنتعمق في كيفية استخدام أحداث الخادم المُرسلة في JavaScript، وسنكتب كودًا عمليًا، وسنفهم متى يكون SSE هو الخيار الأفضل، ومتى يكون من الأفضل النظر نحو WebSocket. هل أنت مستعد؟ هيا بنا!

\n\n

كيف تعمل أحداث الخادم المُرسلة (SSE)؟

\n\n

من الناحية التقنية، SSE هي مجرد اتصال HTTP لا يغلقه الخادم بعد إرسال الرد. بدلاً من ذلك، يرسل البيانات على أجزاء باستخدام تنسيق خاص text/event-stream. العميل (المتصفح) يستمع إلى هذا الاتصال عبر كائن EventSource ويُولّد أحداثًا عند استلام كل رسالة جديدة.

\n\n

إليك كيف يبدو رد الخادم النموذجي:

\n\n

data: {"message": "مرحبًا!", "timestamp": 1700000000}\n\ndata: {"message": "إشعار جديد", "timestamp": 1700000001}

\n\n

تبدأ كل رسالة بـ data:، يليها مسافة ثم المحتوى نفسه. تُفصل الرسائل بسطرين جديدين \\n\\n. يمكن للخادم أيضًا إرسال معرفات (id:) وأنواع أحداث (event:)، لكن الحد الأدنى هو data.

\n\n

الجانب العميل أبسط:

\n\n

const eventSource = new EventSource('/events');\n\neventSource.onmessage = (e) => {\n    console.log('تم استلام البيانات:', e.data);\n};\n\neventSource.onerror = (e) => {\n    console.error('خطأ في الاتصال', e);\n};

\n\n

هذا كل شيء! لا مصافحة معقدة، ولا مكتبات — المتصفح يعيد الاتصال تلقائيًا عند الانقطاع، ويتعامل مع فقدان الاتصال بنفسه. هذا هو السحر الحقيقي لـ أحداث الخادم المُرسلة.

\n\n

SSE مقابل WebSocket: متى تختار أيهما؟

\n\n

غالبًا ما يعتقد المبتدئون: "بما أن SSE أبسط، فهي دائمًا أفضل". لكن هذا غير صحيح. لكل تقنية مجالها الخاص. دعنا نقارن.

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

الخاصية	SSE	WebSocket
اتجاه البيانات	خادم → عميل فقط	ثنائي الاتجاه
سهولة التنفيذ	بسيطة جدًا (متصفح أصلي)	متوسطة (تحتاج مكتبة)
إعادة الاتصال التلقائي	مدمجة	تحتاج تنفيذ يدوي
دعم المتصفحات	جميع المتصفحات الحديثة (باستثناء IE)	جميع المتصفحات الحديثة