HTML5 SSE API

SSE إختصار لـ Server Send Event وهو يسمح لصفحة الويب الحصول على التحديثات من الخادم تلقائيًا.

ما هو Server-Send Event؟

الحدث المرسل من الخادم (SSE) هو عندما تحصل صفحة الويب تلقائيًا على تحديثات من الخادم، وتعد طريقة جديدة لصفحات الويب للاتصال بخادم الويب.

SSE يسمح لصفحة الويب بإجراء اتصال مفتوح بخادم الويب حتى يتمكن خادم الويب من إرسال استجابة جديدة تلقائيًا في أي وقت ، ولا داعي لإعادة الاتصال وتشغيل نفس البرنامج النصي للخادم من البداية فى كل مرة.

الأحداث المرسلة من الخادم (SSE) أحادية الاتجاه مما يعني أن البيانات يتم تسليمها في اتجاه واحد من الخادم إلى العميل (متصفح ويب).

من الممكن أيضًا باستخدام كائن XMLHttpRequest الذي يسمح لكود JavaScript الخاص بك بتقديم طلب إلى خادم الويب ، ولكنه تبادل واحد لواحد، وهذا يعني بمجرد أن يقدم خادم الويب استجابته ، ينتهي الاتصال.

إرسال الرسائل باستخدام البرنامج النصي للخادم – SSE

لنقم بإنشاء ملف PHP باسم “server_send.php” وكتابة البرنامج النصي التالي فيه:

<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
 
// Get the current Year
$currentYear = date("Y");
 
// Send it in a message
echo "Current Year is: " . $currentYear . "\n\n";
flush();
?>

توضيح الكود السابق:

header(“Content-Type: text/event-stream”) تقوم بتعيين نوع الـ MIME إلى text/event-stream، وهو مطلوب بواسطة معيار الحدث من جانب الخادم.
header(“Cache-Control: no-cache”) يخبر خادم الويب بإيقاف التخزين المؤقت وإلا قد يتم تخزين إخراج النص البرمجي مؤقتًا.
currentYear = date(“Y”)$ يقوم هذا المتغير بتخزين السنة الحالية.
السطر التاسع: يجب أن تبدأ كل رسالة يتم إرسالها عبر الأحداث التي يرسلها الخادم ببيانات نصية متبوعة بنص الرسالة الفعلي وتسلسل أحرف السطر الجديد (n \n\).
()flush، استخدمنا هذه الوظيفة ( built-in PHP ) للتأكد من إرسال البيانات على الفور ، بدلاً من تخزينها مؤقتًا حتى اكتمال كود PHP.

تلقي الأحداث المرسلة من الخادم – SSE

يتم استخدام كائن EventSource لتلقي إعلامات الأحداث المرسلة من الخادم، كالتالى:

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

فى المثال السابق، قمنا بإنشاء مستند HTML باسم “sse_example.html” ووضعه في نفس دليل المشروع حيث يوجد ملف “server_send.php“، ويتلقى مستند HTML هذا السنة الحالية الذي أبلغ عنها خادم الويب ويعرضه للمستخدم.

مثال – SSE

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
     <title>Server-Sent Events Example</title>
  </head>
  <body>
      <div id="result">
          <!--Server response will be appear here-->
      </div>

      <script>
        window.onload = function() {
            var source = new EventSource("server_send.php");
            source.onmessage = function(event) {
                document.getElementById("result").innerHTML += "Current Year received from web server is: " + event.data + "<br>";
            };
        };
      </script>
  </body>
</html>

فى المثال السابق:

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

كيفية التحقق من دعم المستعرض؟ – Browser support

للتحقق من صحة دعم ميزة SSE في المستعرض:

if (typeof(EventSource) !== "undefined") {
    // Congratulation, your browser support Server-send Events!
    // And you can run any code here...
} else {
    // Sorry, your browser do not support Server-send Events!
}

دعم المتصفحات لتخزين الويب – SSE

المتصفح	Firefox	Chrome	Internet Explorer	Safari	Opera
من بداية الإصدار	6.0	6.0	79.0	5.0	11.5

HTML5 Web Workers API HTML5 Application Cache

الإبلاغ عن خطأ

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!