Giới thiệu kỹ thuật server sent events
Kỹ thuật Server Sent Events (SSE) hay một tên khác là Event Source là một kỹ thuật cho phép kết nối thời gian thực giữa server và browser. Kỹ thuật này chạy trên nền HTML5.
Ưu điểm của SSE
Nhiều ưu điểm của kỹ thuật server sent events giúp chúng ta triển khai rất nhanh chóng
- Code rất đơn giản khi muốn cập nhật nhanh các trạng thái từ server cho các client.
- Client có thể tự động kết nối lại server nếu bị mất kết nối (bạn không code gì)
- Thời gian kết nối lại từ client có thể chỉnh được từ server (do bạn quyết định)
- Khi thực hiện kết nối lại, client sẽ tự động gửi id của event cuối cùng nó nhận được, nhờ đó từ server có thể biết được client đã bị bỏ qua bao nhiêu message để gửi lại những message đó.
Ứng dụng SSE trong những trường hợp nào
Có thể ứng dụng kỹ thuật server sent events trong nhiều trường hợp muốn truyền thông tin tự động nhanh chóng từ server về cho các user như: các bảng dashboard (các bảng trạng thái chuyến bay, tỷ giá tiền tệ, tỷ giá chứng khoán), News feeds , status của server. Các ứng dụng có dữ liệu thay đổi nhanh như giá cả, thị trường, tình trạng hàng hóa, kết quả thể thao, kết quả sổ xố, tường thuật sự kiện nóng,…đều có thể áp dụng kỹ thuật này rất tiện lợi và đơn giản.
Nhưng bạn chú ý: SSE hoạt động với hầu hết các browser, ngoại trừ IE.
Triển khai kỹ thuật server sent events
Khi triển khai kỹ thuật server sent events , bạn sẽ code ở 2 nơi: browser và server
a. Code javascript ở browser:
- Code trong browser để đón dữ liệu được đổ từ server về và hiện ra trong trang.
- Bạn tạo đối tượng EventSource để chuẩn bị nhận thông tin từ server. Cụ thể hơn, EventSource đón dữ liệu từ 1 trang web chạy trên server, code đại khái như sau (đọc đi hé, khoan làm lab)
var source = new EventSource("abc.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
- Mỗi lần nhận được update thì sự kiện onmessage xảy ra . Trong sự kiện này, bạn làm gì đó thì tùy, thường thì sẽ lấy dữ liệu từ server để hiện trong trang web (event.data).
- Không phải browser nào cũng hỗ trợ SSE (IE không hỗ trợ) . Để test browser có hỗ trợ không thì code như sau : (đọc đi hé, khoan làm lab)
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
} else {
// Sorry! No server-sent events support..
}
- Đóng kết nối
source.close();
b. Code cung cấp dữ liệu từ server
- Trên server, bạn tạo 1 trang web để cung cấp dữ liệu về browser, (như ví dụ trên là file abc.php)
- Trong file này, bạn chỉ thị Content-Type là text/event-stream thì sẽ send được event streams.
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: Bây giờ là: {$time}\n\n";
flush();
?>
- Trong file này, xuất data về browser như sau:
+ Nếu xuất chỉ 1 dòng: bắt đầu là chữ data: , kết thúc là \n\n
+ Nếu xuất nhiều dòng thì mỗi dòng bắt đầu là data: , cuối mỗi dòng là \n , tận dùng mới dùng \n\n
data: dòng đầu\n data: dòng cuối cùng\n\n
- Điều chỉnh thời gian kết nối lại (Reconnection-timeout)
Mặc định browser sẽ kết nối lại cứ sau khoảng 3 giây. Từ server, bạn có thể điều chỉnh thời gian này bằng dòng lệnh retry khi output data, đơn vị tính là miligiây. Ví dụ sau là 10 giây:
retry: 10000\n data: chào bạn\n\n
- id của event: có thể gửi id của event về cho browser bằng cách thêm 1 dòng bắt đầu bằng id:
id: 12345\n data: dòng thứ nhất\n data: dòng cuối\n\n
Chỉ định id sẽ giúp browser có được thông tin của event cuối, id bạn chỉ định sẽ là thuộc tính lastEventId trong event object. Giá trị của id cũng có trong HTTP header (Last-Event-ID) của request kế.
Bài viết kế tiếp sẽ hướng dẫn cụ thể các bạn triển khai trong PHP: Sử dụng SSE trong PHP
