SSE – Server-Sent Event trong HTML5
Server-Sent Event (viết tắt là SSE) cho phép trang web của bạn tự động cập nhật nội dung từ máy chủ. Server-Sent Event – Thông điệp một chiều Trước kia, nếu muốn cập nhật một thay đổi nào đó (vd: tỷ giá, tin tức mới,…) từ máy chủ, bạn phải viết một đoạn mã kết nối tới máy chủ ...
Server-Sent Event (viết tắt là SSE) cho phép trang web của bạn tự động cập nhật nội dung từ máy chủ.
Server-Sent Event – Thông điệp một chiều
Trước kia, nếu muốn cập nhật một thay đổi nào đó (vd: tỷ giá, tin tức mới,…) 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 server-sent event, máy chủ sẽ gửi thông tin cập nhật một cách tự động.
Ví dụ ứng dụng: Cập nhật về like hay status mới của bạn bè trên Facebook/Twitter, cập nhật giá cổ phiếu, kết quả thể thao, v.vv…
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| SSE | 6.0 | 6.0 | Không hỗ trợ | 5.0 | 11.5 |
Nhận thông báo cập nhật
EventSource được sử dụng để nhận thông báo cập nhật từ server-sent event:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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/demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + "<br>"; }; } else { document.getElementById("result").innerHTML = "Rất tiếc, trình duyệt của bạn không hỗ trợ server-sent event..."; } </script> </body> </html> |
Demo
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 (trong ví dụ là: “/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ợ Server-Sent Event
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ợ server-sent event hay không:
|
1 2 3 4 5 6 |
if(typeof(EventSource) !== "undefined") { // Trình duyệt hỗ trợ Server-sent event! // Viết tiếp mã... } else { // Rất tiếc! Trình duyệt không hỗ trợ server-sent event.. } |
Đoạn mã trên máy chủ
Để ví dụ bên trên hoạt động, website của bạn phải có khả năng gửi cập nhật (có thể sử dụng PHP hoặc ASP).
Bạn cần thiết lập “Content-Type” là “text/event-stream”.
Viết mã bằng PHP (demo_sse.php):
|
1 2 3 4 5 6 7 8 |
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: Thời gian trên máy chủ hiện tại là: {$time}
"; flush(); ?> |
Viết bằng ASP:
|
1 2 3 4 5 6 |
<% Response.ContentType = "text/event-stream" Response.Expires = -1 Response.Write("data: The server time is: " & now()) Response.Flush() %> |
Giải thích:
- Thiết lập “Content-Type” có giá trị “text/event-stream”
- Thiết lập để trình duyệt không lưu trữ tạm thời (không cache)
- Hiển thị thông tin cần gửi (Luôn luôn bắt đầu bằng “data: “)
- Gửi dữ liệu đi
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 | Miêu tả |
|---|---|
| onopen | Xảy ra khi đã mở xong kết nối tới máy chủ |
| onmessage | Xảy ra khi nhận thông điệp mới |
| onerror | Xảy ra khi có lỗi |
