القائمة الرئيسية

الصفحات

 HTML5 - Server Sent Events


Conventional web applications generate events which are dispatched to the web server. For example, a simple click on a link requests a new page from the server.

The type of events which are flowing from web browser to the web server may be called client-sent events.

Along with HTML5, WHATWG Web Applications 1.0 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). Using SSE you can push DOM events continuously from your web server to the visitor's browser.

The event streaming approach opens a persistent connection to the server, sending data to the client when new information is available, eliminating the need for continuous polling.

Server-sent events standardize how we stream data from the server to the client.

تنشئ تطبيقات الويب التقليدية أحداثًا يتم إرسالها إلى خادم الويب. على سبيل المثال ، نقرة بسيطة على ارتباط تطلب صفحة جديدة من الخادم. قد يسمى نوع الأحداث التي تتدفق من متصفح الويب إلى خادم الويب الأحداث المرسلة من قبل العميل. إلى جانب HTML5 ، يقدم WHATWG Web Applications 1.0 الأحداث التي تتدفق من خادم الويب إلى متصفحات الويب وتسمى الأحداث المرسلة من الخادم (SSE). باستخدام SSE ، يمكنك دفع أحداث DOM باستمرار من خادم الويب الخاص بك إلى متصفح الزائر. يفتح أسلوب تدفق الأحداث اتصالاً مستمراً بالخادم ، ويرسل البيانات إلى العميل عند توفر معلومات جديدة ، مما يلغي الحاجة إلى الاستقصاء المستمر. تعمل الأحداث المرسلة من الخادم على توحيد كيفية دفق البيانات من الخادم إلى العميل.

Web Application for SSE

To use Server-Sent Events in a web application, you would need to add an <eventsource> element to the document.

The src attribute of <eventsource> element should point to an URL which should provide a persistent HTTP connection that sends a data stream containing the events.

The URL would point to a PHP, PERL or any Python script which would take care of sending event data consistently. Following is a simple example of web application which would expect server time.

لاستخدام أحداث Server-Sent في تطبيق ويب ، ستحتاج إلى إضافة عنصر <eventsource> إلى المستند. يجب أن تشير السمة src لعنصر <eventsource> إلى عنوان URL الذي يجب أن يوفر اتصال HTTP مستمرًا يرسل دفق بيانات يحتوي على الأحداث. سيشير عنوان URL إلى PHP أو PERL أو أي برنامج نصي من Python يتولى إرسال بيانات الحدث باستمرار. فيما يلي مثال بسيط لتطبيق الويب الذي يتوقع وقتًا للخادم.

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         /* Define event handling logic here */
      </script>
   </head>
   
   <body>
      <div id = "sse">
         <eventsource src = "/cgi-bin/ticker.cgi" />
      </div>
		
      <div id = "ticker">
         <TIME>
      </div>
   </body>
</html>

Server Side Script for SSE

A server side script should send Content-type header specifying the type text/event-stream as follows.

print "Content-Type: text/event-stream\n\n";

After setting Content-Type, server side script would send an Event: tag followed by event name. Following example would send Server-Time as event name terminated by a new line character.

print "Event: server-time\n";

Final step is to send event data using Data: tag which would be followed by integer of string value terminated by a new line character as follows −

$time = localtime();
print "Data: $time\n";

Finally, following is complete ticker.cgi written in Perl −

#!/usr/bin/perl  
print "Content-Type: text/event-stream\n\n";  

while(true) { 
   print "Event: server-time\n"; 
   $time = localtime(); 
   print "Data: $time\n"; 
   sleep(5); 
} 

Handle Server-Sent Events

Let us modify our web application to handle server-sent events. Following is the final example.

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", 
         eventHandler, false); 
    
         function eventHandler(event) { 

            // Alert time sent by the server 
            document.querySelector('#ticker').innerHTML = event.data; 
         } 
      </script> 
   </head> 
  
   <body> 
      <div id = "sse"> 
         <eventsource src = "/cgi-bin/ticker.cgi" /> 
      </div> 
   
      <div id = "ticker" name = "ticker"> 
         [TIME] 
      </div> 
   </body> 
</html>
هل اعجبك الموضوع :

تعليقات