Bài 48: Sự kiện Server-Sent trong HTML5

Sự kiện Server-Sent cho phép trang web của bạn tự động cập nhật nội dung từ máy chủ.


Sự kiện Server-Sent – Cách gửi message

Sự kiện server-sent cho phép trang web của bạn tự động cập nhật nội dung từ máy chủ.

Trước kia, nếu muốn cập nhật một thay đổi nào đó từ máy chủ, bạn phải viết một đoạn mã kết nối tới máy chủ yêu cầu cập nhật -> máy chủ phản hồi -> bạn cập nhật thông tin vừa phản hồi. Với sự kiện server-sent, máy chủ sẽ gửi thông tin cập nhật một cách tự động.

Ví dụ: Cập nhật Facebook/Twitter, giá cổ phiếu, tin tức, kết quả thể thao, v.v.


Trình duyệt hỗ trợ

Dưới đây là danh sách một  số phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ sự kiện server-sent.

API  icon_chrome icon_ie icon_firefox  icon_safari icon_opera
SSE 6.0 Không hỗ trợ 6.0 5.0 11.5

Nhận các thông báo cập nhật từ máy chủ

Đối tượng EventSource được sử dụng để nhận thông báo cập nhật từ sự kiện server-sent:


<!DOCTYPE html>
<html>
<body>

<h1>Nhận cập nhật từ máy chủ</h1>
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML = " Xin lỗi, trình duyệt của bạn không hỗ trợ server-sent events...";
}
</script>

</body>
</html>

Giải thích ví dụ:

  • Tạo mới đối tượng EventSource với tham số là địa chỉ nhận cập nhật ( Ví dụ: “/demo/demo_sse.php”)
  • Sự kiện onmessage sẽ được kích hoạt nếu có cập nhật mới
  • Khi sự kiện onmessage xảy ra, hiển thị dữ liệu vừa nhận được vào thẻ có id=”result”

Kiểm tra trình duyệt hỗ trợ các sự kiện Server-Sent

Trong ví dụ ở trên, chúng ta có sử dụng đoạn mã để kiểm tra trình duyệt có hỗ trợ các sự kiện server-sent hay không:


if(typeof(EventSource) !== "undefined") {
    // Trình duyệt hỗ trợ sự kiện Server-sent!
    // Viết tiếp code...
} else {
    // Xin lỗi! Trình duyệt không hỗ trợ sự kiện server-sent..
}


Ví dụ code phía máy chủ (Server-Side)

Ví dụ ở trên để chạy được, bạn cần một máy chủ có khả năng gửi dữ liệu cập nhật (như PHP hay ASP).

Cú pháp sự kiện phía máy chủ rất đơn giản. Thiết lập các “Content-Type” với tiêu đề là “text/event-stream”. Bây giờ bạn có thể bắt đầu gửi các thông điệp.

Đoạn code trong PHP (demo_sse.php):


<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: Thời gian của máy chủ là: {$time}\n\n"; 
flush(); 
?>

Đoạn code trong ASP (VB) (demo_sse.asp):


<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: Thời gian của máy chủ là: " & now())
Response.Flush()
%>

Giải thích ví dụ:

  • Cài đặt “Content-Type” với tiêu đề là “text/event-stream”
  • Thiết lập để trình duyệt không lưu trữ dữ liệu cache
  • Hiển thị dữ liệu gửi (Luôn luôn bắt đầu bằng “data: “)
  • Đẩy dữ liệu tới trang

Đối tượng EventSource

Trong ví dụ bên trên chúng ta đã sử dụng sự kiện onmessage để nhận thông điệp. Ngoài ra, còn có một số sự kiện chúng ta cũng có thể sử dụng:

Sự kiện Mô tả
onopen Khi một kết nối tới máy chủ đã được mở
onmessage Khi một Message đã được nhận
onerror Xảy ra khi có lỗi

Có thể bạn sẽ thích…

Bình luận

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *