Cách hoạt động của Server-Sent Events trong HTML5

Server-Sent Events (SSE) chuẩn hóa cách streaming dữ liệu từ server đến client. Để sử dụng SSE trong ứng dụng web, bạn cần thêm phần tử <eventsource> vào tài liệu.

Thuộc tính src của <eventsource> phải trỏ đến một URL cung cấp kết nối HTTP liên tục, gửi luồng dữ liệu chứa các sự kiện.

URL này sẽ trỏ đến script PHP, PERL hoặc Python chịu trách nhiệm gửi dữ liệu sự kiện liên tục. Dưới đây là ví dụ đơn giản của ứng dụng web mong đợi thời gian từ server.

Ví dụ Client-side

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript">
      document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
      function eventHandler(event){
        // Hiển thị thời gian gửi từ 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>

Ví dụ Server-side (Perl)

Dưới đây là file ticker.cgi viết bằng 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);
}

Lưu ý: Phần tử <eventsource> đã bị loại bỏ trong tiêu chuẩn hiện tại, thay thế bởi API EventSource trong JavaScript. Xem thêm về EventSource API.