API HTML SSE
Sự kiện do máy chủ gửi (SSE) cho phép một trang web nhận các bản 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ậ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 các sự kiện do máy chủ gửi, 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, 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:
Thí 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:
- 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 tin nhắn tích cực 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ợ sự kiện do máy chủ gửi
Trong ví dụ tryit ở trên, có một số dòng mã bổ sung để kiểm tra hỗ trợ của trình duyệt cho 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, 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ã 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();
?>
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ớ 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, 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 |