Nội dung chính
Sự kiện Server-Sent trong HTML5
Các ứng dụng web quy ước tạo các sự kiện mà được gửi tới Web Server. Ví dụ, một cú nhấp chuột đơn trên một link yêu cầu một trang mới từ Server.
Kiểu của các sự kiện mà chuyển từ trình duyệt web tới Web Server có thể được gọi là các sự kiện Client-Sent.
Cùng với HTML5, WHATWG Web Applications 1.0 giới thiệu các sự kiện mà chảy từ Web Server tới các trình duyệt web và chúng được gọi là Server-Sent Events (SSE). Sử dụng SSE bạn có thể đẩy các sự kiện DOM liên tục từ Web Server của bạn tới trình duyệt khách truy cập.
Sự tiếp cận luồng sự kiện mở một kết nối vĩnh cửu tới Server, gửi dữ liệu tới Client khi thông tin mới có sẵn, loại bỏ sự cần thiết để Poll liên tục.
Server-Sent Events tiêu chuẩn hóa cách chúng ta chảy luồng dữ liệu từ Server tới Client.
Ứng dụng web cho SSE
Để sử dụng Server-Sent Events trong một ứng dụng web, bạn sẽ cần thêm một phần tử
Thuộc tính src của phần tử
URL sẽ chỉ tới một PHP, PERL hoặc bất kỳ html script nào mà sẽ gửi dữ liệu sự kiện. Sau đây là một ví dụ đơn giản của ứng dụng web mà sẽ mong đợi Server Time:
<!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>
Server-Side Script cho SSE
Một Server-Side script nên gửi một Content-type header xác định text/event-stream như sau:.
print "Content-Type: text/event-stream\n\n";
Sau khi thiết lập Content-Type, Server-Side script sẽ gửi một thẻ Event: được theo sau bởi tên sự kiện. Ví dụ sau sẽ gửi Server-Time như là 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 để gửi dữ liệu sự kiện sử dụng thẻ Data: mà sẽ được theo sau bởi giá trị chuỗi Integer được kết thúc bởi một ký tự dòng mới như sau:
$time = localtime(); print "Data: $time\n";
Cuối cùng, ticker.cgi được viết đầy đủ trong Perl như sau:
#!/usr/bin/perlprint "Content-Type: text/event-stream\n\n";while(true){
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);
}
Xử lý Server-Side Event
Chúng ta chỉnh sửa ứng dụng web để xử lý Server-Side Event. Sau đây là ví dụ sau 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>