HTML5 Server-Sent Events

LINK DEMO

HTML5 Server-Sent Events cho phép ta lấy những dữ liệu cập nhật từ server xuống máy trạm.

Server-Sent Events – Phương thức trao đổi thông tin

Khi ta muốn trang web tự động cập nhật dữ liệu mới thì ta cần dùng đến Server-Sent events.

Ví dụ: Cập nhật của Facebook/Twitter, cập nhật giá cả, tin tức, kết quả, etc.

Các trình duyệt hỗ trợ

Hầu hết trình duyệt đều hỗ trợ Server-Sent Events, ngoại trừ IE.

Nhận thông tin – Server-Sent Event 

Ví dụ

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

Giải thích ví dụ:

• Tạo một đối tượng EventSource , và chỉ định đường dẫn URL của trang gửi thông tin cập nhật (ví dụ như “demo_sse.php”)
• Mỗi khoảng thời gian thông tin được trả về, sự kiện diễn ra.
• Khi sự kiện diễn ra, thông tin nhận được trả về cho phần tử có id=”result”.

Kiểm tra sự hỗ trợ của trình duyệt cho Server-Sent Events

if(typeof(EventSource)!=="undefined") 
  { 
  // Có! Server-sent events được hỗ trợ! 
  // Viết code..... 
  } 
else 
  { 
  // Xin lỗi! không hỗ trợ rồi ... 
  }  

Code ví dụ Server-Side

Để sử dụng được ví dụ trên, bạn cần có một server thực thi gửi dữ liệu (file thực thi ví dụ như PHP hoặc ASP,..)

Để tạo ra đường truyền dữ liệu của Server-side event, bạn phải thiết lập “Content-Type” là “text/event-stream”.

Code 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();
?>

Code ASP (VB) (demo_sse.asp):

<% Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: " & now()) Response.Flush() %>

Giải thích code:

• Thiết lập “Content-Type” là “text/event-stream”
• Chỉ định trang không lưu cache.
• Xuất dữ liệu ( “data: ” + dữ liệu)
• Đẩy dữ liệu (flush data) sang trang web.

Đối tượng EventSource

Trong ví dụ trên ta sử dụng sự kiện onmessage để nhận thông tin, ngoài ra còn có nhiều sự kiện khác mà ta có thể sử dụng.

Sự kiện

• onopen: Khi kết nối đến server được mở
• onmessage: Khi dữ liệu gửi đến
• onerror: Khi xảy ra lỗi

Theo khoapham.vn