أحداث Server-Sent HTML

تسمح أحداث Server-Sent للصفحة بالحصول على تحديثات من الخادم.

أحداث Server-Sent - رسائل أحادية الاتجاه

أحداث Server-Sent هي تلك التي يتم فيها تلقي التحديثات من الخادم تلقائيًا.

من الممكن أن يتم القيام بذلك من قبل، شريطة أن يكون الموقع الإلكتروني مطالبًا بتحقق من وجود تحديثات متاحة. من خلال أحداث Server-Sent، يمكن أن تصل التحديثات تلقائيًا.

على سبيل المثال: تحديثات Facebook/Twitter، تحديثات أسعار الأسهم، مقالات جديدة، نتائج المباريات، إلخ.

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

الرقم في الجدول يشير إلى المتصفح الذي يدعم بشكل كامل أحداث server-sent الأولى.

API
SSE 6.0 لا يدعم 6.0 5.0 11.5

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

يستخدم دالة EventSource لاستقبال إشعارات إرسال الخادم:

مثال

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، يتم إدخال البيانات التي تم استقبالها في العنصر ذي id "result"

تحقق من دعم أحداث Server-Sent

في مثال TIY، كتبنا كود إضافي للتحقق من دعم المتصفح لأحداث إرسال الخادم:

if(typeof(EventSource) !== "undefined") {
    // نعم! يدعم إرسال الأحداث من الخادم!
    // بعض الكود.....
}
    // عذراً! لا يدعم إرسال الأحداث من الخادم!
}

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

للحصول على تشغيل المثال السابق، تحتاج إلى ability لتحديث إرسال الخادم (مثل 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()
%>

توضيح الكود:

  • ضبط رأس "Content-Type" إلى "text/event-stream"
  • عدم حجب الصفحة
  • حدد تاريخًا للاستخدام (يبدأ دائمًا بـ "data: ")
  • إدخال بيانات تحديث الصفحة

مثل EventSource

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

الحادث الوصف
onopen عند فتح اتصال إلى الخادم
onmessage عند استقبال رسالة
onerror عند حدوث خطأ