Tìm hiểu về kỹ thuật Long-Polling, Websockets, Server-Sent Events, Comet

Hiện nay ứng dụng web đã phát triển khác xa so với ngày đầu nó xuất hiện, kèm theo đó là vô số các kỹ thuật mới được áp dụng để phục vụ cho quá trình này nhằm đem lại trải nghiệm mới mẻ, đầy hứng thú và cũng không kém phần tiện dụng cho người dùng.

Để các bạn có 1 cái nhìn rõ ràng hơn về công nghệ web hiện đại, hôm nay mình sẽ giới thiệu với các bạn 1 số kỹ thuật hiện nay thường được sử dụng trong các ứng dụng web thời gian thực.

(Trong các ví dụ bên dưới, máy khách (client) sẽ là trình duyệt của người dùng, server sẽ là webserver hosting của website , bên trái là client và bên phải là server). Tuy nhiên trước tiên mình sẽ giới thiệu mô hình truy cập theo giao thức http truyền thống.

Regular HTTP

  • Người dùng gửi yêu cầu (request) 1 website từ một máy chủ.
  • Máy chủ (server) tính toán dữ liệu trả về ( response ).
  • Máy chủ gửi dữ liệu trả về (response) cho người dùng (client).

~> Client chủ động gửi request đến server thì sẽ có response trả về cho client, còn nếu ko có request từ client thì server sẽ không làm gì cả.

AJAX Polling:

  • Client yêu cầu 1 trang web từ server sử dụng “Regular http” (đã nói ở trên).
  • Trang web mà client vừa yêu cầu sẽ dùng javascript thực hiện request liên tục đến 1 file trên server trong một khoảng thời gian đều đặn (ví dụ: cứ mỗi 2 giây sẽ gửi 1 request đến server).
  • Server sẽ tính toán response ứng với mỗi request và gửi lại response cho client giống như giao thức http truyền thống.

AJAX Long-Polling:

  • Client yêu cầu 1 trang web từ server sử dụng “Regular http” (đã nói ở trên).
  • Trang web mà client vừa yêu cầu sẽ dùng javascript thực hiện request đến 1 file trên server.
  • Server sẽ không gửi response ngay cho client (ứng với request đã gửi) mà sẽ đợi cho đến khi có dữ liệu mới.
  • Khi có dữ liệu mới, server sẽ gửi dữ liệu mới đó (response) về cho client.
  • Client sau khi nhận dữ liệu mới từ server, ngay lập tức sẽ tiếp tục 1 request khác đến server để bắt đầu lại toàn bộ tiến trình này (bước 3 đến 5).

~> Client sẽ gửi request đến server, server tiến hành kiếm tra dữ liệu và đến khi nào có dữ liệu mới thì mới gửi response về cho client. Sau đó client lại tiếp tục tự động gửi 1 request mới và đợi dữ liệu mới trả về.

HTML5 Websockets:

WebSockets hỗ trợ phương thức giao tiếp 2 chiều giữa client và server thông qua TCP (port 80 và 443). Theo phân tích từ http://websocket.org/quantum.html, WebSockets có thể giảm kích thước của HTTP header lên đến 500 – 1000 lần, giảm độ trễ của network lên đến 3 lần. Do đó, hỗ trợ tốt hơn đối với các ứng dụng web apps real – time.

  • Client yêu cầu 1 trang web từ server sử dụng “Regular http” (đã nói ở trên).
  • Trang web mà client vừa yêu cầu sẽ dùng javascript mở 1 kết nối đến server.
  • Bây giờ cả server và client có thể gửi nhận nhiều dữ liệu khác nhau với nhau khi có dữ liệu mới (giống như kiểu 2 bên đang chat với nhau chứ không phải tuân theo qui tắc nào).

~> Tức là client và server luôn nhận dữ liệu mới theo thời gian thực (2 chiều: server đến client hoặc client đến server). Lúc này trên server sẽ thực hiện 1 vòng lặp (loop) sự kiện (bước 1 đến 3) để thực hiện lại nhiều lần quy trình này và bạn có thể kết nối đến server từ 1 tên miền (domain) khác. Ngoài ra bạn cũng có thể sử dụng websocket server của bên thứ 3 cung cấp (ví dụ: http://pusher.com/) và việc còn lại là bạn chỉ việc code trên client ( dễ dàng hơn nhiều vì trước đó bạn phải code cả phía server và client).

Để dễ hiểu hơn, mình xin giải thích thêm cái hình ở trên, hình này minh họa nhiều trường hợp có thể xảy ra khi áp dụng web socket:

  • Trường hợp 1: tạo connect với server ~> nhận 2 response từ server.
  • Trường hợp 2: tạo connect với server ~> nhận 1 response từ server ~> client gửi tiếp 1 request khác đến server.
  • Trường hợp 3: tạo connect với server ~> nhận 2 response từ server ~> server trả về tiếp 1 reponse khác cho client (mặc dù không có request mới nào).

Tham khảo

https://techmaster.vn/posts/33693/ky-thuat-long-polling-websockets-server-sent-events-comet

Leave a Reply

Your email address will not be published. Required fields are marked *