Frontend Academy · درس

Server-Sent Events للبث أحادي الاتجاه

استخدم EventSource لاستقبال تدفق من الأحداث المرسلة من الخادم، وحلّل أنواع الأحداث والبيانات، وأعد الاتصال تلقائيًا عند انقطاع الشبكة

Server-Sent Events للبث أحادي الاتجاه درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما هي Server-Sent Events؟

‏SSE بروتوكول قياسي قائم على HTTP، يتيح للخادم دفع الأحداث إلى المتصفح عبر اتصال واحد طويل الأمد. وهو أحادي الاتجاه: من الخادم إلى العميل فقط. ويكون أبسط من WebSockets عندما لا تحتاج إلى إرسال البيانات في الاتجاه المعاكس.

EventSource API

يتصل EventSource الموجود في المتصفح بعنوان URL ويستمع إلى الأحداث. وهو مدمج وقياسي ولا يحتاج إلى مكتبة.

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

تنسيق استجابة الخادم

يرسل الخادم تدفقًا نصيًا عاديًا باستخدام Content-Type: text/event-stream. وتبدأ كل رسالة بـ data: وتنتهي بسطر فارغ.

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

الأحداث المسماة

يمكن للخادم تسمية الأحداث باستخدام event:. ويطلقها المتصفح بهذا الاسم.

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

إعادة الاتصال تلقائيًا

يعيد EventSource الاتصال تلقائيًا عند انقطاعه، بعد نحو 3 ثوانٍ. ويمكن للخادم اقتراح مدة انتظار باستخدام retry: 5000.

// Server:
retry: 5000\n
data: hello\n\n

معرّفات الأحداث واستئناف الاتصال

يرسل الخادم id: مع كل حدث. وبعد إعادة الاتصال، يرسل المتصفح آخر معرّف تم استلامه في رأس Last-Event-ID — وبذلك يمكن للخادم استئناف الإرسال من ذلك الموضع.

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

تحليل JSON

تكون event.data دائمًا سلسلة نصية. حلّل JSON بنفسك.

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

إغلاق الاتصال

استدعِ es.close() لإيقاف الاتصال. كما تُغلق المتصفحات الاتصال عند إغلاق علامة التبويب.

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

حالات الاستخدام

لوحات المعلومات المباشرة، مثل المقاييس والمراقبة. الإشعارات، مثل رسائل البريد الإلكتروني الجديدة والتنبيهات. مؤشرات أسعار الأسهم. استجابات دردشة الذكاء الاصطناعي، حيث يمثل كل رمز مميز حدثًا. النتائج الرياضية المباشرة. تحديثات الحالة للمهام طويلة التشغيل.

مثال واقعي: البث المتدفق للذكاء الاصطناعي

تُبث استجابات OpenAI/Anthropic على هيئة SSE. يصل كل رمز مميز كحدث بيانات — اعرضه تدريجيًا لإظهار تأثير الكتابة.

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE مقابل WebSocket مقابل الاستطلاع

‏SSE: قائم على HTTP، من الخادم إلى العميل فقط، ويدعم إعادة الاتصال تلقائيًا وبسيط. WebSocket: ثنائي الاتجاه بالكامل، وحمله أقل لكل رسالة، لكنه أكثر تعقيدًا. الاستطلاع: أبسط الخيارات، لكنه يسبب أعلى زمن استجابة وحمل. اختر SSE للبث أحادي الاتجاه، وWS للتواصل الثنائي الشبيه بالدردشة.

قيود المتصفح والخوادم الوكيلة

تحدّ المتصفحات من عدد اتصالات SSE المتزامنة لكل مصدر، إلى نحو 6 اتصالات. وقد تخزّن بعض الخوادم الوكيلة المؤسسية وموازِنات التحميل القديمة الاستجابات مؤقتًا، مما يعطّل SSE — لذا اختبر في البيئات المستهدفة. استخدم HTTPS لتجاوز معظم عمليات التخزين المؤقت لدى الخوادم الوكيلة.

‏CORS مع SSE

يحترم EventSource سياسة CORS. ويجب أن يرسل الخادم Access-Control-Allow-Origin. ولتمرير بيانات الاعتماد، مرّر { withCredentials: true } إلى مُنشئ EventSource، واضبط Access-Control-Allow-Credentials: true على الخادم.

تحقّق سريع

ما الفرق الأساسي بين Server-Sent Events وWebSockets؟

مراجعة: Server-Sent Events

يفتح EventSource تدفق HTTP من أحداث content type هو text/event-stream. يرسل الخادم رسائل 'data:' مع اسم اختياري عبر event: ومعرّف عبر id:. تتم إعادة الاتصال تلقائيًا مع استئناف الإرسال باستخدام Last-Event-ID. الاتصال أحادي الاتجاه (من الخادم إلى العميل). وهو مناسب جدًا للوحات المعلومات المباشرة وبث الذكاء الاصطناعي والإشعارات. ويكون أبسط من WebSocket عندما لا تحتاج إلى اتصال ثنائي الاتجاه. انتبه إلى حدود الاتصالات المتزامنة وتخزين الخوادم الوكيلة للاستجابات مؤقتًا.

الأسئلة الشائعة

هل درس «Server-Sent Events للبث أحادي الاتجاه» مجاني؟

نعم — نص درس «Server-Sent Events للبث أحادي الاتجاه» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «Server-Sent Events للبث أحادي الاتجاه»؟

استخدم EventSource لاستقبال تدفق من الأحداث المرسلة من الخادم، وحلّل أنواع الأحداث والبيانات، وأعد الاتصال تلقائيًا عند انقطاع الشبكة تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «Server-Sent Events للبث أحادي الاتجاه»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

WebSocket API: open وmessage وclose وerror
دمج Socket.io Client
Server-Sent Events للبث أحادي الاتجاه
أنماط واجهات المستخدم الفورية

← العودة إلى Frontend Academy