HTML SSE API

Server-Sent Events (SSE) cho phép một trang web nhận các bản cập nhật từ máy chủ.

Server-Sent Events - Nhắn tin một chiều

Server-Sent Events là khi một trang web tự động nhận cập nhật từ máy chủ.

Điều này cũng có thể xảy ra trước đây, nhưng trang web sẽ phải hỏi xem có bản cập nhật nào không. Với Server-Sent Events, các bản cập nhật sẽ tự động đến.

Ví dụ, cập nhật Facebook/Twitter, cập nhật giá cổ phiếu, new feed (nguồn cấp tin tức), kết quả thể thao, v.v...

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ Server-Sent Events.

Nhận thông báo Server-Sent Event

Đối tượng EventSource được sử dụng để nhận thông báo sự kiện do máy chủ gửi:

Ví dụ:

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

Ví dụ được giải thích như sau:

• Tạo một đối tượng EventSource mới và chỉ định URL của trang gửi các bản cập nhật (trong ví dụ này là "demo_sse.php")
• Mỗi khi nhận được bản cập nhật, sự kiện onmessage sẽ xảy ra
• Khi sự kiện onmessage xảy ra, hãy đặt dữ liệu đã nhận vào phần tử có id="result"

Kiểm tra hỗ trợ Server-Sent Events

Trong ví dụ ở trên, có một số dòng code bổ sung để kiểm tra hỗ trợ của trình duyệt cho Server-Sent Events:

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}

Ví dụ về code phía máy chủ

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

Cú pháp luồng sự kiện phía máy chủ rất đơn giản. Đặt header "Content-Type" thành "text/event-stream". Bây giờ, bạn có thể bắt đầu gửi các luồng sự kiện.

Code trong 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 trong ASP (VB) (demo_sse.asp):

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

Code được giải thích như sau:

• Đặt header "Content-Type" thành "text/event-stream".
• Chỉ định rằng trang không được lưu vào bộ nhớ cache
• Xuất dữ liệu để gửi (Luôn bắt đầu bằng "data:")
• Chuyển dữ liệu đầu ra trở lại trang web

Đối tượng EventSource

Trong các ví dụ trên, tác giả bài viết đã sử dụng sự kiện onmessage để nhận tin nhắn. Nhưng các sự kiện khác cũng có sẵn: