Bài 48: Sự kiện Server-Sent trong HTML5
Sự kiện Server-Sent cho phép trang web của bạn tự động cập nhật nội dung từ máy chủ.
Sự kiện Server-Sent – Cách gửi message
Sự kiện server-sent cho phép trang web của bạn tự động cập nhật nội dung từ máy chủ.
Trước kia, nếu muốn cập nhật một thay đổi nào đó từ máy chủ, bạn phải viết một đoạn mã kết nối tới máy chủ yêu cầu cập nhật -> máy chủ phản hồi -> bạn cập nhật thông tin vừa phản hồi. Với sự kiện server-sent, máy chủ sẽ gửi thông tin cập nhật một cách tự động.
Ví dụ: Cập nhật Facebook/Twitter, giá cổ phiếu, tin tức, kết quả thể thao, v.v.
Trình duyệt hỗ trợ
Dưới đây là danh sách một số phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ sự kiện server-sent.
| API |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| SSE | 6.0 | Không hỗ trợ | 6.0 | 5.0 | 11.5 |
Nhận các thông báo cập nhật từ máy chủ
Đối tượng EventSource được sử dụng để nhận thông báo cập nhật từ sự kiện server-sent:
<!DOCTYPE html>
<html>
<body>
<h1>Nhận cập nhật từ máy chủ</h1>
<div id="result"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML = " Xin lỗi, trình duyệt của bạn không hỗ trợ server-sent events...";
}
</script>
</body>
</html>
Giải thích ví dụ:
- Tạo mới đối tượng EventSource với tham số là địa chỉ nhận cập nhật ( Ví dụ: “/demo/demo_sse.php”)
- Sự kiện onmessage sẽ được kích hoạt nếu có cập nhật mới
- Khi sự kiện onmessage xảy ra, hiển thị dữ liệu vừa nhận được vào thẻ có id=”result”
Kiểm tra trình duyệt hỗ trợ các sự kiện Server-Sent
Trong ví dụ ở trên, chúng ta có sử dụng đoạn mã để kiểm tra trình duyệt có hỗ trợ các sự kiện server-sent hay không:
if(typeof(EventSource) !== "undefined") {
// Trình duyệt hỗ trợ sự kiện Server-sent!
// Viết tiếp code...
} else {
// Xin lỗi! Trình duyệt không hỗ trợ sự kiện server-sent..
}
Ví dụ code phía máy chủ (Server-Side)
Ví dụ ở trên để chạy được, bạn cần một máy chủ có khả năng gửi dữ liệu cập nhật (như PHP hay ASP).
Cú pháp sự kiện phía máy chủ rất đơn giản. Thiết lập các “Content-Type” với tiêu đề là “text/event-stream”. Bây giờ bạn có thể bắt đầu gửi các thông điệp.
Đoạn code trong PHP (demo_sse.php):
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: Thời gian của máy chủ là: {$time}\n\n";
flush();
?>
Đoạn code trong ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: Thời gian của máy chủ là: " & now())
Response.Flush()
%>
Giải thích ví dụ:
- Cài đặt “Content-Type” với tiêu đề là “text/event-stream”
- Thiết lập để trình duyệt không lưu trữ dữ liệu cache
- Hiển thị dữ liệu gửi (Luôn luôn bắt đầu bằng “data: “)
- Đẩy dữ liệu tới trang
Đối tượng EventSource
Trong ví dụ bên trên chúng ta đã sử dụng sự kiện onmessage để nhận thông điệp. Ngoài ra, còn có một số sự kiện chúng ta cũng có thể sử dụng:
| Sự kiện | Mô tả |
|---|---|
| onopen | Khi một kết nối tới máy chủ đã được mở |
| onmessage | Khi một Message đã được nhận |
| onerror | Xảy ra khi có lỗi |
