57- واجهة برمجة تطبيقات SSE في HTML

تتيح Server-Sent Events (SSE) لصفحة الويب الحصول على تحديثات من الخادم بشكل تلقائي.

رسائل أحادية الاتجاه

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

أمثلة على استخدام SSE:

• تحديثات مواقع التواصل الاجتماعي مثل Facebook و Twitter.
• تحديثات أسعار الأسهم في الأسواق المالية.
• بث الأخبار العاجلة والمستجدات.
• نتائج المباريات الرياضية المباشرة.

دعم المتصفحات

يوضح الجدول أدناه أول إصدار من كل متصفح يدعم تقنية Server-Sent Events بشكل كامل:

استقبال إشعارات Server-Sent Events

يتم استخدام كائن EventSource لاستقبال إشعارات Server-Sent Events من الخادم.

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

شرح المثال:

• إنشاء كائن EventSource جديد، وتحديد عنوان URL للصفحة التي ترسل التحديثات (في هذا المثال “demo_sse.php”).
• في كل مرة يتم فيها استقبال تحديث، يحدث حدث onmessage.
• عند حدوث حدث onmessage، يتم وضع البيانات المستلمة في العنصر الذي يحمل المعرف “result”.

التحقق من دعم Server-Sent Events:

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}

مثال على كود الخادم

لكي يعمل المثال أعلاه، تحتاج إلى خادم قادر على إرسال تحديثات البيانات (مثل PHP أو ASP).

بناء جملة دفق الأحداث من جانب الخادم بسيط. قم بتعيين الرأس “Content-Type” إلى “text/event-stream”. الآن يمكنك البدء في إرسال تدفقات الأحداث.

كود PHP (demo_sse.php):

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

كود ASP (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

شرح الكود:

1. تعيين الرأس “Content-Type” إلى “text/event-stream”.
2. منع التخزين المؤقت للصفحة.
3. إخراج البيانات المطلوب إرسالها (دائماً تبدأ بـ “data: “).
4. إرسال البيانات فوراً إلى صفحة الويب.

كائن EventSource

في الأمثلة السابقة، استخدمنا حدث onmessage لاستقبال الرسائل. ولكن هناك أحداث أخرى متاحة أيضاً: