أحداث 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

استقبال إشعارات إرسال الخادم

يستخدم مكتبة 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، يتم دفع البيانات التي تم استقبالها إلى عنصر يتم تحديد هوية "result".

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

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

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

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

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

قواعد اللغة للحدث الموجه من الخادم بسيطة جدًا. قم بضبط عنوان "Content-Type" إلى "text/event-stream". الآن يمكنك البدء في إرسال تدفق الحدث.

كود PHP في 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 في ASP (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 عند حدوث خطأ