لا يتم استخدام SSE (الأحداث المرسلة من الخادم) على نطاق واسع في عالم تطوير الويب، ستتناول هذه المقالة نظرة عميقة حول ماهية SSE، وكيف تعمل، وكيف يمكن الاستفادة منها طلبك.

---

ما هو SSE؟

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

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

كيف يعمل نظام SSE؟

يعمل بروتوكول SSE عن طريق إنشاء اتصال HTTP مستمر بين الخادم والعميل. يظل هذا الاتصال مفتوحًا طالما أراد العميل تلقي التحديثات من الخادم. عندما يكون لدى الخادم بيانات جديدة لإرسالها، فإنه يرسل استجابة HTTP بنوع MIME خاص "نص/دفق حدث".

تحتوي الاستجابة على سلسلة من الأحداث، يتم فصل كل منها بحرف سطر جديد ("\n"). كل حدث له التنسيق التالي:

event: [event type]\n
data: [message]\n\n

حقل "الحدث" اختياري ويستخدم لتوفير اسم للحدث. يحتوي حقل "البيانات" على الرسالة الفعلية التي يتم إرسالها. يتم استخدام حرفي السطر الجديد في نهاية كل حدث للإشارة إلى نهاية الحدث.

إليك مثال على استجابة SSE بسيطة:

HTTP/1.1 200 OK
Content-Type: text/event-stream

event: message
data: Hello, world!

event: message
data: This is a test message.

event: customEvent
data: {"foo": "bar", "baz": 123}

في هذا المثال، نقوم بإرسال ثلاثة أحداث إلى العميل. الحدثان الأولان لهما نوع الحدث "رسالة" ويحتويان على رسائل نصية بسيطة. الحدث الثالث له نوع الحدث "customEvent" ويحتوي على كائن JSON كرسالة له.

عندما يتلقى العميل استجابة SSE، فإنه يستخدم البيانات لتحديث واجهة المستخدم الخاصة به. ويمكن القيام بذلك باستخدام جافا سكريبت لمعالجة DOM، على سبيل المثال.

تنفيذ SSE

يعد تنفيذ SSE في تطبيقك أمرًا بسيطًا نسبيًا. فيما يلي مثال لكيفية تنفيذ SSE باستخدام Node.js وإطار عمل Express:

const express = require('express');
const app = express();

// Set up SSE endpoint
app.get('/events', (req, res) => {
  // Set headers
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  // Send initial event
  res.write('data: Connected\n\n');
  // Set interval to send periodic events
  const intervalId = setInterval(() => {
    res.write('data: Hello, world!\n\n');
  }, 1000);
  // Clean up on connection close
  req.on('close', () => {
    clearInterval(intervalId);
  });
});

// Start server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

في هذا المثال، نقوم بإعداد نقطة نهاية SSE عند "/events". نحن نقوم بتعيين الرؤوس اللازمة لـ SSE ونرسل حدثًا أوليًا إلى العميل للتأكد من إنشاء الاتصال.

نقوم بعد ذلك بإعداد فترة زمنية لإرسال الأحداث الدورية إلى العميل كل ثانية. أخيرًا، نقوم بتنظيف الفاصل الزمني عندما يتم إغلاق الاتصال من قبل العميل.

من جانب العميل، يمكننا استخدام كود JavaScript التالي للاستماع إلى أحداث SSE:

const source = new EventSource('/events');

source.addEventListener('message', (event) => {
  console.log(event.data);
});
source.addEventListener('error', (event) => {
  console.error('Error:', event);
});

في هذا المثال، نقوم بإنشاء كائن EventSource جديد ونمرر عنوان URL لنقطة نهاية SSE الخاصة بنا. نستمع بعد ذلك إلى حدث "الرسالة" ونسجل البيانات في وحدة التحكم. نحن نستمع أيضًا إلى حدث "الخطأ" في حالة وجود أي مشكلات في الاتصال.

لاحظ أن مسار EventSource على الواجهة الأمامية لا يمكن استخدامه إلا من خلال طلبات GET، إذا كنت تريد استخدام POST وطرق HTTP الأخرى، فستحتاج إلى تحليل بيانات الاستجابة بنفسك.

إذا كنت تريد تنفيذ Node.js أصليًا، فإليك واحدًا

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

يمكن استخدام SSE في مجموعة واسعة من التطبيقات التي تتطلب تحديثات في الوقت الفعلي. فيما يلي بعض الأمثلة:

• منصات الوسائط الاجتماعية: يمكن استخدام SSE لتوفير تحديثات في الوقت الفعلي لمنصات الوسائط الاجتماعية، مثل إشعارات الرسائل الجديدة أو التعليقات أو الإعجابات.

• التطبيقات المالية: يمكن استخدام SSE لتوفير تحديثات في الوقت الفعلي للتطبيقات المالية، مثل أسعار الأسهم أو أسعار صرف العملات أو الأخبار.

• الألعاب عبر الإنترنت: يمكن استخدام SSE لتوفير تحديثات في الوقت الفعلي لتطبيقات الألعاب عبر الإنترنت، مثل إشعارات أحداث اللعبة أو النتائج أو التصنيفات.

فوائد استخدام SSE

هناك العديد من الفوائد لاستخدام SSE مقارنة بطرق الاتصال الأخرى في الوقت الفعلي مثل الاقتراع أو WebSockets:

كفاءة

يستخدم SSE اتصال HTTP مستمرًا، مما يعني أن تكلفة إنشاء الاتصال وصيانته أقل بكثير من الطرق الأخرى. وهذا يجعل SSE أكثر كفاءة وأقل استهلاكًا للموارد، وهو أمر مهم بشكل خاص عند التعامل مع أعداد كبيرة من العملاء.

بساطة

SSE هو بروتوكول بسيط يسهل فهمه وتنفيذه. ولا يتطلب أي مكتبات أو أطر عمل خاصة ويمكن تنفيذه باستخدام تقنيات الويب القياسية مثل JavaScript وHTTP.

مصداقية

SSE هو بروتوكول موثوق به يوفر إعادة الاتصال التلقائي في حالة انقطاع الشبكة. وهذا يضمن استمرار العميل في تلقي التحديثات حتى في حالة فقدان الاتصال مؤقتًا.

خاتمة

تعد الأحداث المرسلة من الخادم (SSE) طريقة بسيطة وفعالة لإرسال التحديثات في الوقت الفعلي من الخادم إلى العميل عبر اتصال HTTP. إنه جزء من مواصفات HTML5 ويدعمه جميع متصفحات الويب الحديثة. يستخدم SSE تدفق بيانات أحادي الاتجاه، حيث يرسل الخادم رسائل إلى العميل، ولكن لا يمكن للعميل إرسال الرسائل مرة أخرى إلى الخادم. وهذا يوفر عليك من استطلاع الخادم باستمرار للأحداث، الأمر الذي لا يؤدي إلى تحسين الأداء فحسب، بل يقلل أيضًا من التعقيد.

إذا وجدت هذا مفيدًا، يرجى التفكير في الاشتراك في النشرة الإخبارية الخاصة بي للحصول على المزيد من المقالات والأدوات المفيدة حول تطوير الويب. شكرا على القراءة!