HTML5 – CSS – Tutorial – Step 13

HTML5 Server-Sent Events

• 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.
• 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.
1. 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”)
2. Mỗi khoảng thời gian thông tin được trả về, sự kiện diễn ra.
3. Khi sự kiện diễn ra, thông tin nhận được trả về cho phần tử có id=”result”.

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

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

if(typeof(EventSource)!=="undefined"){ 
     // Yes! Server-sent events supported! 
     // Your code..... 
   }
else { 
    // sorry! Your browser has not support Server-sent events... 
}

5. Để 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”. trong file php (ở đây là demo_sse.php)

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

[highlighter]