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ử <eventsource> tới tài liệu.
Thuộc tính src của phần tử <eventsource> nên chỉ tới một URL mà nên cung cấp một kết nối HTTP lâu bền mà gửi một luồng dữ liệu chứa các sự kiện đó.
URL sẽ chỉ tới một PHP, PERL hoặc bất kỳ Python 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/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ý 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>
Trước khi thử nghiệm Server-Side Event, tôi đề nghị bạn xem lại để chắc chắn rằng trình duyệt của bạn hỗ trợ khái niệm này.
Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học HTML5 phổ biến khác tại vietjack.com:
