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.
API SSE | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
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:
Sự kiện | Mô tả |
---|---|
onopen | Khi kết nối với máy chủ được mở |
onmessage | Khi một tin nhắn được nhận |
onerror | Khi xảy ra lỗi |
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Điểm ưu tiên, điểm khuyến khích, khu vực ưu tiên khi xét tuyển năm 2022
Hôm qua -
Các cách làm, tùy chỉnh trong bài sẽ giúp tăng tốc Windows 10 của bạn "nhanh như gió"
Hôm qua 6 -
Sạc không dây là gì? Nó nhanh hơn hay chậm hơn sạc dây? Danh sách smartphone Android hỗ trợ sạc không dây
Hôm qua -
Hàm COUNTIFS, cách dùng hàm đếm ô theo nhiều điều kiện trong Excel
Hôm qua -
4 cách kiểm tra lịch sử giao dịch BIDV trên điện thoại, máy tính
Hôm qua -
Cách sao chép hoặc tạo bản sao toàn bộ trang tính trong Google Sheets
Hôm qua -
PING là gì? Test PING như thế nào?
Hôm qua -
Cách chặn từ khóa và Hashtag trên Twitter
Hôm qua -
Dynamic System Updates là gì?
Hôm qua -
Cách dùng Terabox lưu trữ với 1TB miễn phí
Hôm qua 5