Giới thiệu WebSockets

Chào mừng các bạn đã quay trở lại với thachleblog. Tuần vừa rồi mình vừa làm 1 project nho nhỏ liên quan đến WebSockets, do đó hôm nay viết bài chia sẻ cùng các bạn. Các bạn có muốn biết WebSockets là gì, khi nào chúng ta sử dụng nó không? Chúng ta cùng bắt đầu nhé.

Tại sao chúng ta lại cần websocket

Hiện tại, có 2 phương thức để client – server của web apps có thể giao tiếp được với nhau, đó là:

AJAX POLLING

Phương thức này có nghĩa là client gửi request liên tục lên server để lấy data thông qua AJAX sau những khoảng thời gian nhất định. Điều này bắt buộc server phải trả data về dữ liệu, cho dù có dữ liệu mới hay không.

Ví dụ cho các trường hợp này chính là tracking của google, thông thường sẽ được update sau 15’..

AJAX LONG POLLING

Phương thức này cũng tương tự như phương thức trên, nhưng thay vì server trả về reponse cho client sau khi nhận request thì ở phương thức này, server chỉ trả về response khi có dữ liệu mới.

Cả 2 phương thức này đều thông qua giao thức HTTP do đó sẽ bao gồm rất nhiều thông tin header (đồng nghĩa với chậm). Ngoài ra cả phương thức trên đều không hỗ trợ đồng song song giữa client server. Do đó, WebSocket ra đời để mang đến phương thức giao tiếp real time tốt hơn dành cho client – server, hỗ trợ song song – cả client và server đều có thể gửi và nhận request cùng một thời điểm.

Giới thiệu

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.

Giới thiệu WebSockets

Đặc điểm

+ Cấu trúc: hỗ trợ chuẩn giao thức mới: ws:// cho chuẩn thông thường và wss:// cho chuẩn secure (tương tự http:// và https://)

+ Message data types: chuẩn giao tiếp là String, hiện tại đã hỗ trợ buffered arrays (xem bài về protobuf tại đây) và blobs. Vẫn chưa hỗ trợ JSON (tuy nhiên có thể serialize thành String, xem thêm seriablize tại đây)

WebSockets API

Ở bài viết này, mình sẽ không trình bày cách để tạo một WebSockets mà sẽ giới thiệu WebSockets API (dựa trên JavaScripts API và HTML5).

Kiểm tra trình duyệt có hỗ trợ WebSockets hay không

Việc đầu tiên cần làm khi làm việc với WebSockets trên client là kiểm tra WebSockets có được trình duyệt hỗ trợ hay không:

if ('WebSocket' in window){
   /* WebSocket is supported. You can proceed with your code*/
} else {
   /*WebSockets are not supported. Try a fallback method like long-polling etc*/
}

 

Đóng/mở WebSockets

Giả sử trình duyệt hỗ trợ WebSockets, chúng ta bắt đầu khởi tạo và mở socket.

Khởi tạo WebSockets

var connection = new WebSocket('ws://example.org:12345/myapp');

 

hoặc với WebSockets secure

var connection = new WebSocket('wss://example.org:12345/myapp');

 

Mở connection đến server

connection.onopen = function(){
   /*Send a small message to the console once the connection is established */
   console.log('Connection open!');
}

 

Đóng WebSockets

connection.onclose = function(){
   console.log('Connection closed');
}

 

hoặc

connection.close();

 

Ngoài ra, chúng ta cũng có thể kiểm tra trường hợp có lỗi xảy ra

connection.onerror = function(error){
   console.log('Error detected: ' + error);
}

 

Gửi – nhận message

Gửi message đến server

var message = {
'name': 'bill murray',
'comment': 'No one will ever believe you'
};
connection.send(JSON.stringify(message));

 

Nhận message từ server

connection.onmessage = function(e){
   var server_message = e.data;
   console.log(server_message);
}

 

Ứng dụng của WebSockets

  • Trong các ứng dụng web chat (360live.vn/live là ứng dụng mà mình vừa làm)
  • Các game online nhiều người chơi trên HTML5: đánh bài, đánh cờ…
  • Các ứng dụng web aps real – time.

Kết luận

Vừa rồi là phần trình bày những hiểu biết của mình về WebSockets. Qua bài viết này, hy vọng các bạn đã có thể hiểu được ứng dụng WebSockets và làm việc với WebSockets khi cần. Rất mong nhận được ý kiến đóng góp của tất cả các bạn. Hẹn gặp lại các bạn ở các bài viết sau. Xin cảm ơn!

Tham khảo thêm:

https://stackoverflow.com/questions/11077857/what-are-long-polling-websockets-server-sent-events-sse-and-comet/12855533#12855533

http://www.developerfusion.com/article/143158/an-introduction-to-websockets/

https://os.alfajango.com/websockets-slides/#/5

Tham gia bình luận