Kỹ thuật Server Sent Events – truyền dữ liệu tự động từ server

Giới thiệu kỹ thuật server sent events

Kỹ thuật Server Sent Events (SSE) hay còn gọi với một tên khác là Event Source. Đây là một kỹ thuật hay, giúp truyền dữ liệu tự động đơn giản nhanh chóng từ server về client.

Khi cần truyền tự động về client trạng thái đã thay đổi của dữ liệu. Ví dụ số like, tình hình thời tiết, tường thuật bóng đá… thì SSE là giải pháp cho bạn.

server sent events

Ưu điểm của SSE

Kỹ thuật server sent events có nhiều đặc điểm hay, dễ dàng triển khai. Sau đây là một số ưu điểm:

  1. Code rất đơn giản khi muốn cập nhật nhanh các trạng thái trên server tự động cho client.
  2. Client có thể tự động kết nối lại server nếu bị mất kết nối. Developer không cần code thêm gì.
  3. Thời gian kết nối lại từ client có thể chỉnh được. Giá trị thời gian này do developer quyết định
  4. 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 mà nó nhận được. Nhờ đó server có thể biết được client đã bị mất bao nhiêu message để gửi lại những message đó. Hay quá phải không nào.

Ứng dụng SSE trong những trường hợp nào

Như đã đề cập trên, bạn có thể dùng kỹ thuật server sent events trong trường hợp muốn truyền dữ liệu tự động từ server về cho các user. Có thể liệt kê một số như là các 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 (tin tức mới đưa vào trên server), 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, dữ liệu truyền về client tự động khi có thay đổi mà không cần user yêu cầu xem

Nhưng bạn chú ý nhé: 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ẽ thực hiện code ở 2 nơi: đó là code ở browser và và code ở server.

Code javascript ở browser

Bạn code trong browser là để đón dữ liệu đổ từ server. Và sau đó là hiện dữ liệu đó ra trong trang. Code gồm 3 hoạt động sau:

  • Đầu tiên là tạo đối tượng EventSource để chuẩn bị nhận thông tin từ server. EventSource đón dữ liệu từ 1 trang web chạy trên server (abc.php) . Code mẫu như sau :
<script>
  var source  = new EventSource("abc.php");
</script>
  • Mỗi lần nhận được update thì sự kiện onmessage của Event Source sẽ xảy ra . Trong sự kiện này, bạn làm gì thì tùy nhưng thường thì sẽ lấy dữ liệu để hiện trong trang. Xem mẫu như sau:
<script>
  source.onmessage = function(event) {
     document.getElementById("result").innerHTML += event.data + "<br>";
 };
</script>
  • Đóng kết nối: dùng hàm close để đóng, tuy nhiên code này có thể bỏ qua.
<script> 
source.close(); 
</script>

Chú ý là 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 :

if(typeof(EventSource) !== "undefined") {
     // Yes! Server-sent events support!
} else {
     // Sorry! No server-sent events support..
}

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, ví dụ abc.php
  • Trong file này, bạn chỉ thị Content-Type là text/event-stream thì sẽ send được event streams.
<?php //abc.php
   header('Content-Type: text/event-stream');
   header('Cache-Control: no-cache');
   $time = date('r'); 
   echo "data: Bây giờ là: {$time}\n\n";
?>
  • Trong file trên server (abc.php), xuất data về browser như sau: Nếu xuất chỉ 1 dòng thì bắt đầu là chữ data:  còn 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  còn ở dòng 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 : Mặc định browser sẽ kết nối lại cứ sau khoảng 3 giây. Nhưng 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 nhé: Sử dụng SSE trong PHP

BÀI VIẾT LIÊN QUANXEM THÊM