19/09/2018, 15:08

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 Icon Chrome Icon FireFox Icon IE Icon Safari Icon Opera
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:

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:

Đ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):

Viết bằng ASP:

Giải thích:

  1. Thiết lập “Content-Type” có giá trị “text/event-stream”
  2. Thiết lập để trình duyệt không lưu trữ tạm thời (không cache)
  3. Hiển thị thông tin cần gửi (Luôn luôn bắt đầu bằng “data: “)
  4. 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ệnMiêu tả
onopenXảy ra khi đã mở xong kết nối tới máy chủ
onmessageXảy ra khi nhận thông điệp mới
onerrorXảy ra khi có lỗi
0