Sự kiện Server-Sent trong HTML5
Trong hướng dẫn này, bạn sẽ học cách sử dụng tính năng sự kiện do máy chủ gửi (Server-Sent) HTML5 để tạo kết nối một chiều và liên tục giữa trang web và máy chủ.
Sự kiện do máy chủ gửi (Server-Sent) là gì?
Sự kiện do máy chủ gửi HTML5 là một cách mới để các trang web giao tiếp với máy chủ web. Cũng có thể với đối tượng XMLHttpRequest cho phép mã JavaScript của bạn thực hiện yêu cầu đến máy chủ web, nhưng đó là trao đổi một đối một - có nghĩa là khi máy chủ web cung cấp phản hồi của nó, quá trình giao tiếp sẽ kết thúc. Đối tượng XMLHttpRequest là cốt lõi của tất cả các hoạt động Ajax.
Tuy nhiên, có một số tình huống mà các trang web yêu cầu kết nối lâu dài hơn với máy chủ web. Một ví dụ điển hình là báo giá cổ phiếu trên các trang web tài chính nơi giá được cập nhật tự động. Một ví dụ khác là một mã tin tức chạy trên các trang web truyền thông khác nhau.
Bạn có thể tạo những thứ như vậy bằng các sự kiện do máy chủ HTML5 gửi. Nó cho phép một trang web giữ kết nối mở với máy chủ web để máy chủ web có thể tự động gửi phản hồi mới bất kỳ lúc nào, không cần kết nối lại và chạy lại cùng một tập lệnh máy chủ từ đầu.
Lưu ý: Sự kiện do máy chủ gửi (SSE) là một chiều có nghĩa là dữ liệu được phân phối theo một hướng từ máy chủ đến máy khách. Một ứng dụng khách thường là một trình duyệt web.
Mẹo: Tính năng sự kiện do máy chủ gửi của HTML5 được hỗ trợ trong tất cả các trình duyệt web hiện đại chính như Firefox, Chrome, Safari và Opera ngoại trừ Internet Explorer.
Gửi tin nhắn bằng tập lệnh máy chủ
Hãy tạo một tệp PHP có tên "server_time.php" và nhập tập lệnh sau vào đó. Nó sẽ chỉ báo cáo thời gian hiện tại của đồng hồ tích hợp của máy chủ web trong các khoảng thời gian đều đặn. Chúng tôi sẽ truy xuất lần này và cập nhật trang web cho phù hợp sau trong hướng dẫn này.
Ví dụ
<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
// Get the current time on server
$currentTime = date("h:i:s", time());
// Send it in a message
echo "data: " . $currentTime . "\n\n";
flush();
?>Hai dòng đầu tiên của tập lệnh PHP đặt hai tiêu đề quan trọng. Đầu tiên, nó đặt kiểu MIME thành text/event-stream, kiểu này được yêu cầu bởi tiêu chuẩn sự kiện phía máy chủ. Dòng thứ hai yêu cầu máy chủ web tắt bộ nhớ đệm nếu không đầu ra của tập lệnh của bạn có thể được lưu vào bộ nhớ đệm.
Mọi tin nhắn được gửi thông qua các sự kiện do máy chủ gửi HTML5 phải bắt đầu bằng văn bản, data:sau đó là văn bản tin nhắn thực và chuỗi ký tự dòng mới ( \n\n).
Và cuối cùng, chúng tôi đã sử dụng hàm PHP flush()để đảm bảo rằng dữ liệu được gửi ngay lập tức, thay vì được lưu vào bộ đệm cho đến khi mã PHP hoàn tất.
Xử lý tin nhắn trong một trang web
Đối tượng EventSource được sử dụng để nhận thông báo sự kiện do máy chủ gửi.
Bây giờ chúng ta hãy tạo một tài liệu HTML có tên là "demo_sse.html" và đặt nó vào cùng một thư mục dự án nơi chứa tệp "server_time.php". Tài liệu HTML này chỉ đơn giản là nhận thời gian hiện tại do máy chủ web báo cáo và hiển thị nó cho người dùng.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Server-Sent Events</title>
<script>
window.onload = function() {
var source = new EventSource("server_time.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += "New time received from web server: " + event.data + "<br>";
};
};
</script>
</head>
<body>
<div id="result">
<!--Server response will be inserted here-->
</div>
</body>
</html>