การทำงานของ Server-Sent Events ใน HTML5

Server-Sent Events (SSE) มาตรฐานการสตรีมข้อมูลจากเซิร์ฟเวอร์ไปยังไคลเอ็นต์ ใช้แท็ก <eventsource> (ปัจจุบันใช้ EventSource API ใน JavaScript แทน)

แอตทริบิวต์ src ของ <eventsource> ต้องชี้ไปที่ URL ที่ให้ persistent HTTP connection สตรีมข้อมูลเหตุการณ์ URL นี้มักชี้ไปสคริปต์ PHP, Perl, Python ที่ส่งข้อมูลต่อเนื่อง

ตัวอย่างฝั่งไคลเอ็นต์

<!DOCTYPE HTML> <html>    <head>       <script type="text/javascript">          document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);          function eventHandler(event){             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>

ตัวอย่างฝั่งเซิร์ฟเวอร์ (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);
}

หมายเหตุ: แท็ก <eventsource> ล้าสมัยแล้ว ควรใช้ EventSource API ใน JavaScript แทน ซึ่งรองรับดีกว่าและเป็นมาตรฐานปัจจุบัน