HTML5: Server-Sent
Giải phóng thời gian, khai phóng năng lực
Server-Sent cho phép một trang web có được thông tin cập nhật từ máy chủ.
Sự kiện Server-Sent – Thông điệp một chiều
Sự kiện server-sent được kích hoạt khi một trang web tự động được cập nhật từ máy chủ.
Sự kiện này cũng có thể được kích hoạt trước khi có hành động cập nhật, nhưng trang web phải có bản cập nhật có sẵn.
Những tình huống sau thường áp dụng server-sent: các thao tác cập nhật trên Facebook/Twitter, giá chứng khoán, news feed, kết quả thể thao, ...
Trình duyệt hỗ trợ
Sự kiện Server-Sent được hầu hết các trình duyệt hỗ trợ, ngoại trừ trình duyệt IE.
Lấy dữ liệu từ sự kiện Server-Sent
Để lấy dữ liệu từ sự kiện server-sent ta sử dụng đối tượng EventSource.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>
<script>
if(typeof(EventSource) != "undefined"){ //Nếu trình duyệt hỗ trợ Server-Sent
var source=new EventSource( "demo_sse.php");
source.onmessage = function(event){
document.getElementById( "result").innerHTML += event.data + "<br>";
};
}
else{ //nếu không thì
document.getElementById( "result").innerHTML = "Trình duyệt này không hỗ trợ sự kiện server-sent!";
}
</script>
</body>
</html>
Giải thích ví dụ:
Ø Tạo một đối tượng EventSource, và chỉ định URL của trang gửi bản cập nhật (trong ví dụ này là "demo_sse.php")
Ø Mỗi khi nhận cập nhật thì sự kiện onmessage được kích hoạt
Ø Khi sự kiện onmessage được kích hoạt thì dữ liệu nhận được sẽ được đưa vào phần tử có id="result"
Còn đây là mã lệnh của file demo_sse.php:
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: Thời gian hiện tại của máy chủ là: {$time}\n\n";
flush();
?>
Giải thích mã lệnh PHP:
Ø Đặt "Content-Type" của header là "text/event-stream"
Ø Đặt “Cache-Control” của header là ‘no-cache’
Ø Dùng hàm date() để lấy thời gian thực của server
Ø Dùng hàm echo để hiển thị kết quả
Ø Dùng hàm flush() để đưa kết quả hiển thị về trang web
Đối tượng EventSource
Đối tượng này có ba sự kiện chính được thể hiện ở bảng dưới đây:
|
Sự kiện |
Mô tả |
|
onopen |
Sự kiện này được kích hoạt khi một kết nối đến máy chủ được mở |
|
onmessage |
Sự kiện này được kích hoạt khi nhận tin nhắn |
|
onerror |
Sự kiện này được kích hoạt khi có lỗi xảy ra |
Giải phóng thời gian, khai phóng năng lực