HTML5 Server-Sent Events

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

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Phạm Hy Hiếu nói về những vấn đề cơ bản về mạng neuron

Phạm Hy Hiếu nói về những vấn đề cơ bản về mạng neuron

Đây là tài liệu được viết bởi mình và bạn Phạm Hy Hiếu về những vấn đề cơ bản nhất của mạng neuron

Giá rẻ - Xu thế đang lên của tablet

Giá rẻ - Xu thế đang lên của tablet

Không phải là quá khó để chúng ta có thể nhận thấy việc tablet giá rẻ đang chiếm lĩnh trên thị trường hiện nay. Khởi đầu với Kindle Fire, chiếc tablet có mức giá chưa tới 200 USD (4 triệu đồng) của Amazon. Được bán ra với mức giá chấp nhận lỗ của Amazon để kiếm lợi từ những nội dung số, Kindle Fire thực sự là một cú hích lớn đối với tablet Android.

Bạn đã thật sự bắt đầu cho Drupal 8?

Bạn đã thật sự bắt đầu cho Drupal 8?

You may not be able to control when Drupal 8 is ready. But you can control when you are ready for Drupal 8. Attending DrupalCon Austin is a great way to start.

Công ty diệt chuột T&C

 

Diet con trung