HTML5 - Sự kiện do máy chủ gửi
Các ứng dụng web thông thường tạo ra các sự kiện được gửi đến máy chủ web. Ví dụ: một cú nhấp chuột đơn giản vào một liên kết yêu cầu một trang mới từ máy chủ.
Loại sự kiện đang truyền từ trình duyệt web đến máy chủ web có thể được gọi là sự kiện do máy khách gửi.
Cùng với HTML5, ứng dụng web WHATWG 1.0 giới thiệu các sự kiện truyền từ máy chủ web đến trình duyệt web và chúng được gọi là Sự kiện do máy chủ gửi (SSE). Sử dụng SSE, bạn có thể đẩy các sự kiện DOM liên tục từ máy chủ web của mình đến trình duyệt của khách truy cập.
Phương pháp truyền trực tuyến sự kiện mở ra một kết nối liên tục với máy chủ, gửi dữ liệu đến máy khách khi có thông tin mới, loại bỏ nhu cầu bỏ phiếu liên tục.
Các sự kiện do máy chủ gửi chuẩn hóa cách chúng tôi truyền dữ liệu từ máy chủ đến máy khách.
Ứng dụng web cho SSE
Để sử dụng Sự kiện do máy chủ gửi trong ứng dụng web, bạn cần thêm phần tử <eventsource> vào tài liệu.
Các src thuộc tính của phần tử <eventsource> phải trỏ đến một URL sẽ cung cấp kết nối HTTP liên tục để gửi luồng dữ liệu có chứa các sự kiện.
URL sẽ trỏ đến một PHP, PERL hoặc bất kỳ tập lệnh Python nào sẽ đảm nhiệm việc gửi dữ liệu sự kiện một cách nhất quán. Sau đây là một ví dụ đơn giản về ứng dụng web mong đợi thời gian máy chủ.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker">
<TIME>
</div>
</body>
</html>Tập lệnh phía máy chủ cho SSE
Một tập lệnh phía máy chủ sẽ gửi Content-typetiêu đề xác định loại text / event-stream như sau.
print "Content-Type: text/event-stream\n\n";Sau khi thiết lập Loại nội dung, tập lệnh phía máy chủ sẽ gửi Event: thẻ theo sau là tên sự kiện. Ví dụ sau sẽ gửi Server-Time dưới dạng tên sự kiện được kết thúc bởi một ký tự dòng mới.
print "Event: server-time\n";Bước cuối cùng là gửi dữ liệu sự kiện bằng Data: thẻ sẽ được theo sau bởi số nguyên của giá trị chuỗi được kết thúc bằng một ký tự dòng mới như sau:
$time = localtime();
print "Data: $time\n";Cuối cùng, sau đây là hoàn chỉnh ticker.cgi được viết bằng Perl -
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true) {
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);
}Xử lý các sự kiện do máy chủ gửi
Hãy để chúng tôi sửa đổi ứng dụng web của mình để xử lý các sự kiện do máy chủ gửi. Sau đây là ví dụ cuối cùng.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
document.getElementsByTagName("eventsource")[0].addEventListener("server-time",
eventHandler, false);
function eventHandler(event) {
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker" name = "ticker">
[TIME]
</div>
</body>
</html>Trước khi thử nghiệm các sự kiện do Máy chủ gửi, tôi khuyên bạn nên đảm bảo rằng trình duyệt web của bạn hỗ trợ khái niệm này.