واجهة برمجة تطبيقات HTML SSE
تتيح الأحداث المرسلة من الخادم (SSE) لصفحة الويب الحصول على تحديثات من الخادم.
الأحداث المرسلة من الخادم - طريقة واحدة للمراسلة
الحدث الذي يرسله الخادم هو عندما تحصل صفحة الويب تلقائيًا على تحديثات من الخادم.
كان هذا ممكنًا أيضًا من قبل ، ولكن صفحة الويب يجب أن تسأل عما إذا كانت هناك تحديثات متاحة. مع الأحداث المرسلة من الخادم ، تأتي التحديثات تلقائيًا.
أمثلة: تحديثات Facebook / Twitter ، تحديثات أسعار الأسهم ، موجز الأخبار ، نتائج الرياضة ، إلخ.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الأحداث المرسلة من الخادم بشكل كامل.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | 79.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 ، ضع البيانات المستلمة في العنصر ذي المعرف = "النتيجة"
تحقق من دعم الأحداث المرسلة من الخادم
في مثال tryit أعلاه ، كانت هناك بعض الأسطر الإضافية من التعليمات البرمجية للتحقق من دعم المتصفح للأحداث التي يرسلها الخادم:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
مثال على رمز جانب الخادم
لكي يعمل المثال أعلاه ، تحتاج إلى خادم قادر على إرسال تحديثات البيانات (مثل PHP أو ASP).
يعتبر تركيب دفق الحدث من جانب الخادم أمرًا بسيطًا. اضبط رأس "نوع المحتوى" على "نص / حدث-تيار". الآن يمكنك البدء في إرسال تدفقات الحدث.
كود 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()
%>
وأوضح الكود:
- اضبط رأس "نوع المحتوى" على "نص / حدث-تيار"
- حدد أن الصفحة لا يجب تخزينها في ذاكرة التخزين المؤقت
- إخراج البيانات المراد إرسالها ( ابدأ دائمًا بـ "data:")
- قم بمسح بيانات الإخراج مرة أخرى إلى صفحة الويب
كائن EventSource
في الأمثلة أعلاه ، استخدمنا حدث onmessage للحصول على الرسائل. لكن الأحداث الأخرى متوفرة أيضًا:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |