0Pricing
React Academy · درس

مقارنة SSE وWebSockets وPolling

قارن بين SSE ‏(دفع أحادي الاتجاه) وWebSockets ‏(ثنائي الاتجاه) وPolling من حيث ملاءمة حالة الاستخدام والتعقيد

مقارنة SSE وWebSockets وPolling درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

WebSockets: اتصال مستمر ثنائي الاتجاه

تنشئ WebSockets اتصال TCP مستمرًا بين العميل والخادم. ويمكن للطرفين إرسال الرسائل في أي وقت، ما يجعل WebSockets مناسبة للتواصل التفاعلي الفوري فعلًا، مثل تطبيقات الدردشة وتحرير المستندات التعاوني والألعاب متعددة اللاعبين والمؤشرات المباشرة. يظل الاتصال مفتوحًا حتى يغلقه أحد الطرفين صراحةً.

Server-Sent Events: دفع أحادي الاتجاه

تستخدم SSE (Server-Sent Events) اتصال HTTP عاديًا يبث فيه الخادم البيانات إلى العميل على هيئة سلسلة من الأحداث. ويكون الاتصال أحادي الاتجاه؛ فالخادم وحده يرسل البيانات. ولا يستطيع العميل إرسال رسائل عبر اتصال SSE، بل يجري طلبات HTTP منفصلة لذلك. ويُنفَّذ SSE من خلال واجهة EventSource البرمجية في المتصفح.

الاستطلاع القصير: الأبسط والأكثر هدرًا

يعني الاستطلاع القصير أن يرسل العميل طلب HTTP على فاصل زمني ثابت، مثل كل 5 ثوانٍ: «هل توجد أي تحديثات؟». ويستجيب الخادم فورًا بالبيانات الحالية. هذا هو أبسط أسلوب للتنفيذ، لكنه الأكثر هدرًا؛ إذ يجري العميل طلبات كثيرة عندما لا تكون هناك بيانات جديدة. ولا يناسب إلا البيانات التي تتغير ببطء شديد.

الاستطلاع الطويل: الخادم يحتفظ بالاستجابة

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

مزايا SSE

يتمتع SSE بعدة مزايا عملية مقارنةً بـ WebSockets في دفع البيانات من الخادم إلى العميل: فهو يعمل عبر HTTP العادي، دون ترقية للبروتوكول، ولذلك يمر عبر الوكلاء المؤسسيين وموازنات التحميل دون إعداد خاص. كما تتضمن EventSource إعادة اتصال تلقائية. ويسهل تصحيح أخطاء البروتوكول النصي في علامة تبويب الشبكة بالمتصفح.

قيود SSE

لدى SSE قيود فعلية: فهو نصي فقط، لذا يجب ترميز البيانات الثنائية باستخدام base64، وهو أحادي الاتجاه، فلا يستطيع العميل دفع البيانات في الاتجاه المعاكس. كما يحد HTTP/1.1 عدد اتصالات EventSource المتزامنة لكل نطاق إلى 6، بينما يدمج HTTP/2 الاتصالات عبر اتصال واحد، فيزيل هذا الحد. ولتحقيق اتصال ثنائي الاتجاه، يتطلب SSE استدعاءات REST مكملة.

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

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

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

تكون WebSockets ضرورية عند الحاجة إلى اتصال ثنائي الاتجاه منخفض زمن الاستجابة: مثل الدردشة الفورية التي تنتقل فيها الرسائل في الاتجاهين عبر اتصال واحد، والتحرير التعاوني بأسلوب Google Docs، والألعاب متعددة اللاعبين التي تحدث فيها إجراءات العميل وتحديثات الخادم بسرعة، والمزادات المباشرة، ومنصات التداول. ويبرر الاتصال ثنائي الاتجاه التعقيد الإضافي.

HTTP/2 وSSE

يحسّن HTTP/2 جدوى SSE بدرجة كبيرة. إذ يعني تعدد الإرسال عبر الاتصالات أن جميع تدفقات SSE من نطاق واحد تشترك في اتصال TCP واحد، ما يلغي حد الاتصالات لكل نطاق. وإذا كان الخادم يدعم HTTP/2، يصبح SSE أكثر عملية للوحات المعلومات التي تحتوي على عدة تدفقات بيانات متزامنة.

اختيار التقنية المناسبة

إطار اتخاذ القرار: إذا كنت تحتاج إلى اتصال ثنائي الاتجاه منخفض زمن الاستجابة → WebSockets. إذا كان الخادم يدفع التحديثات والعميل يقرأ فقط → SSE. إذا كنت تحتاج إلى تحديثات متقطعة وكانت البساطة مهمة → الاستطلاع. وإذا كانت واجهة API الخاصة بالخادم موجودة مسبقًا ولا يمكنك إضافة SSE → استخدم الاستطلاع. ابدأ بأبسط حل يلبي متطلبات زمن الاستجابة لديك.

مقارنة تكلفة البروتوكولات

تضيف إطارات WebSocket من 2 إلى 14 بايت لكل رسالة بعد المصافحة الأولية. ويضيف SSE ترويسات HTTP مرة واحدة لكل اتصال، ثم يرسل نصًا مفصولًا بأسطر جديدة. أما الاستطلاع القصير فيتضمن ترويسات طلب واستجابة HTTP كاملة في كل عملية استطلاع. وتتفوق WebSockets من حيث التكلفة عند التعامل مع البيانات عالية التكرار، بينما يكون SSE أبسط مع تكلفة مقبولة عند الدفع غير المتكرر من الخادم.

اتجاهية SSE مقارنةً بـ WebSocket

ما الفرق الأساسي في اتجاه تدفق البيانات بين SSE وWebSockets؟

مراجعة الدرس: مقارنة تقنيات الوقت الفعلي

WebSockets: اتصال TCP مستمر وثنائي الاتجاه، مناسب للدردشة والألعاب والتحرير التعاوني. SSE: دفع HTTP أحادي الاتجاه من الخادم إلى العميل عبر واجهة EventSource، مناسب للإشعارات ولوحات المعلومات والموجزات. الاستطلاع القصير: طلبات على فواصل ثابتة، وهو الأبسط والأكثر هدرًا. الاستطلاع الطويل: يحتفظ الخادم بالاستجابة حتى تتوفر البيانات، ما يقلل الطلبات لكنه يرفع زمن الاستجابة. مزايا SSE: العمل عبر الوكلاء وإعادة الاتصال تلقائيًا. قيود SSE: نصي فقط، أحادي الاتجاه، مع حدود للاتصالات في HTTP/1.1.

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

هل درس «مقارنة SSE وWebSockets وPolling» مجاني؟

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

ماذا ستتعلم في «مقارنة SSE وWebSockets وPolling»؟

قارن بين SSE ‏(دفع أحادي الاتجاه) وWebSockets ‏(ثنائي الاتجاه) وPolling من حيث ملاءمة حالة الاستخدام والتعقيد تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «مقارنة SSE وWebSockets وPolling»؟

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

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

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

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

  1. مقارنة SSE وWebSockets وPolling
  2. استهلاك تدفقات SSE في React باستخدام EventSource
  3. نمط الاستطلاع الطويل ومنطق إعادة الاتصال
  4. بناء موجز إشعارات في الوقت الفعلي
← العودة إلى React Academy