API HTML SSE
Sự kiện do máy chủ gửi (SSE) cho phép trang web nhận thông tin cập nhật từ máy chủ.
Sự kiện do máy chủ gửi - Nhắn tin một chiều
Sự kiện do máy chủ gửi là khi một trang web tự động nhận các bản cập nhật từ máy chủ.
Điều này trước đây cũng có thể thực hiện được, nhưng trang web sẽ phải hỏi xem có bản cập nhật nào không. Với các sự kiện do máy chủ gửi, các bản cập nhật sẽ tự động xuất hiện.
Ví dụ: Cập nhật Facebook/Twitter, cập nhật giá cổ phiếu, 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 đủ các sự kiện do máy chủ gửi.
API | |||||
---|---|---|---|---|---|
SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
Nhận thông báo sự kiện do máy chủ gửi
Đố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>";
};
Hãy tự mình thử »Ví dụ giải thích:
- 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 lần nhận được bản cập nhật, sự kiện onmessage sẽ xảy ra
- Khi xảy ra sự kiện onmessage, hãy đưa dữ liệu nhận được vào phần tử có id="result"
Kiểm tra hỗ trợ sự kiện do máy chủ gửi
Trong ví dụ về thử nghiệm ở trên có một số dòng mã bổ sung để kiểm tra sự hỗ trợ của trình duyệt đối với các sự kiện do máy chủ gửi:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
Ví dụ về mã phía máy chủ
Để ví dụ trên hoạt động được, 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 tiêu đề "Loại nội dung" thành "văn bản/luồng sự kiện". Bây giờ bạn có thể bắt đầu gửi các luồng sự kiện.
Mã bằng 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();
?>
Mã trong ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
Mã giải thích:
- Đặt tiêu đề "Loại nội dung" thành "văn bản/luồng sự kiện"
- Chỉ định rằng trang không được lưu vào bộ nhớ đệm
- Xuất dữ liệu cần gửi ( Luôn bắt đầu bằng "data:")
- Xoá dữ liệu đầu ra trở lại trang web
Đối tượng EventSource
Trong các ví dụ trên, chúng tôi đã 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:
Events | Description |
---|---|
onopen | When a connection to the server is opened |
onmessage | When a message is received |
onerror | When an error occurs |