استهلاك تدفقات SSE في React باستخدام EventSource

ينشئ new EventSource(url) اتصال SSE بالعنوان URL المحدد. ويفتح المتصفح فورًا طلب HTTP GET يتضمن الترويسة Accept: text/event-stream. ويُبقي الخادم هذا الاتصال مفتوحًا ويبث الأحداث عبره. إن EventSource واجهة API أصلية في المتصفح، ولا تحتاج إلى مكتبة للاستخدام الأساسي.

يمتلك EventSource ثلاث حالات جاهزية: 0 (CONNECTING) — يجري إنشاء الاتصال أو إعادة إنشائه، و1 (OPEN) — أُنشئ الاتصال وبدأت الأحداث بالتدفق، و2 (CLOSED) — أُغلق الاتصال ولن تتم إعادة الاتصال. تحقّق من eventSource.readyState لتحديد الحالة الحالية.

يُستدعى معالج eventSource.onmessage لأحداث الخادم التي لا تملك نوع حدث صريحًا، أي عندما يرسل الخادم data: ... دون حقل event:. ويتلقى المعالج كائن حدث تكون فيه event.data هي الحمولة النصية. وعادةً ما يستخدم الخادم JSON.stringify للبيانات، ثم تستخدم JSON.parse عند استلامها.

يمكن للخادم إرسال أحداث مُسمّاة: event: userJoined data: {"userId": "123"} . وفي المتصفح، استمع إليها باستخدام eventSource.addEventListener('userJoined', handler). يتيح ذلك تعدد أنواع الأحداث عبر اتصال SSE واحد، بحيث يكون لكل نوع حدث معالجه الخاص، ما يجعل الشيفرة واضحة ومنظمة.

تصل بيانات SSE على هيئة سلاسل نصية. ولإرسال بيانات منظمة، يرسل الخادم JSON.stringify(payload) ويحللها العميل: const data = JSON.parse(event.data). احرص دائمًا على وضع JSON.parse داخل try/catch للتعامل بسلاسة مع JSON غير الصحيح الوارد من الخادم، وذلك بتسجيل الخطأ وتجاوز الحدث غير الصحيح.

أنشئ EventSource وأغلقه داخل useEffect: أنشئ الاتصال عند تركيب المكوّن، وأرفق معالجات الأحداث، ثم أعد دالة تنظيف تستدعي eventSource.close(). ومن دون التنظيف، يتسرب الاتصال عند إزالة تركيب المكوّن أو انتقال المستخدم إلى صفحة أخرى أو إعادة تشغيل التأثير مع تبعيات مختلفة.

داخل معالج eventSource.onmessage، حدّث حالة React لتعكس البيانات الجديدة: setMessages(prev => [...prev, JSON.parse(event.data)]). استخدم الصيغة الوظيفية لـ setState لتجنب مشكلات الإغلاق القديم؛ إذ يحتفظ معالج الحدث بقيمة الحالة الأولية، بينما يضمن التحديث الوظيفي أنك تعمل دائمًا على أحدث قيمة للحالة.

يعيد EventSource الاتصال تلقائيًا عند فقدان الاتصال بسبب خطأ في الشبكة أو إعادة تشغيل الخادم. ينتظر المتصفح مهلة قصيرة (عادةً 3 ثوانٍ، ويمكن للخادم ضبطها عبر retry: 3000 في الدفق)، ثم يعيد الاتصال. لا تحتاجون إلى تنفيذ منطق إعادة الاتصال، فهو مدمج في واجهة EventSource البرمجية.

يتتبع EventSource معرّف آخر حدث تم استلامه (يحدده الخادم باستخدام id: 123 في الدفق). عند إعادة الاتصال، يرسل المتصفح هذا المعرّف تلقائيًا في ترويسة HTTP المسماة Last-Event-ID. ويستخدم الخادم المصمم جيدًا هذا المعرّف لإعادة إرسال الأحداث الفائتة، مما يضمن عدم فقدان أي أحداث أثناء إعادة الاتصال.

لا يدعم EventSource الترويسات المخصصة مباشرةً. للمصادقة، استخدموا ملفات تعريف الارتباط (new EventSource(url, { withCredentials: true }) يرسل ملفات تعريف الارتباط) أو أدرجوا رمز المصادقة في مَعلمة استعلام ضمن عنوان URL. وإذا كنتم بحاجة إلى ترويسات Authorization، فاستخدموا Fetch API مع ReadableStream بدلًا من EventSource لمعالجة استجابة SSE يدويًا.

عندما يواجه EventSource خطأً، يتم تشغيل معالج onerror. ستكون قيمة readyState هي CONNECTING (إذا كان سيعيد المحاولة) أو CLOSED (إذا لم يكن سيعيد المحاولة). داخل onerror، تحققوا من readyState للتمييز بين خطأ مؤقت في الشبكة (ستتم إعادة المحاولة تلقائيًا) وفشل دائم (أعاد الخادم حالة غير 200). عند حدوث أخطاء دائمة، أغلقوا الاتصال وأبلغوا المستخدم.

ماذا يحدث عندما ينقطع اتصال EventSource بسبب خطأ في الشبكة؟

ينشئ new EventSource(url) اتصال SSE بحالات readyStates التالية: CONNECTING وOPEN وCLOSED. يتولى onmessage معالجة الأحداث العامة، بينما يتولى addEventListener معالجة أنواع الأحداث المسماة. تستخرج JSON.parse(event.data) البيانات المنظمة. أنشئوا EventSource ونظفوه داخل useEffect. إعادة الاتصال التلقائي مدمجة؛ إذ يعيد EventSource المحاولة بعد أخطاء الشبكة، ويستخدم Last-Event-ID لإعادة إرسال الأحداث الفائتة. وتتم المصادقة عبر ملفات تعريف الارتباط (withCredentials) أو مَعلمات الاستعلام في عنوان URL.