Video học lập trình mỗi ngày

Bài viết này mô tả cách sử dụng giao thức WebSocket. Sau khi chúng ta đã tìm hiểu về WebSocket ở bài trước, và từ đó chúng ta hiểu được WebSocket là gì? Và vì sao WebSocket lại xuất hiện và mang đến lợi ích gì. 

Thì tiếp theo tôi sẽ giới thiệu đến bạn một hướng dẫn thực hành về WebSocket một cách chi tiết hơn. Hy vọng giúp bạn học được nhiều kiến thức hơn trong việc sử dụng công nghệ realtime.

WebSocket là gì?

Ở bài trước đã nói rất rõ rồi. Những người mới sử dụng WebSocket sẽ hỏi cùng một câu hỏi: Chúng ta đã có giao thức HTTP, tại sao chúng ta cần một giao thức khác? Nó có thể mang lại những lợi ích gì? Câu trả lời rất đơn giản ở bài trước. ở đây không nói thêm và dành thời gian cho việc khác.

WebSocket có ưu điểm gì?

Các tính năng của WebSocket bao gồm: 

• (1) Dựa trên giao thức TCP, việc triển khai phía máy chủ tương đối dễ dàng. 
• (2) Nó có khả năng tương thích tốt với giao thức HTTP. Các cổng mặc định cũng là 80 và 443, và giao thức HTTP được sử dụng trong giai đoạn connect, vì vậy không dễ bị chặn trong quá trình connect và có thể vượt qua các máy chủ proxy HTTP khác nhau. 
• (3) Định dạng dữ liệu tương đối nhẹ, chi phí hiệu suất nhỏ và giao tiếp hiệu quả. 
• (4) Bạn có thể gửi dữ liệu văn bản hoặc dữ liệu nhị phân. 
• (5) Không có giới hạn tương đồng và máy khách có thể giao tiếp với bất kỳ máy chủ nào. 
• (6) Định danh giao thức là ws (nếu được mã hóa thì là wss) và trang web máy chủ là URL.

Nói nhanh và gọn, còn tìm hiểu sâu thì tôi đã nói là xem lại bài trước.

ws://example.com:80/some/path

Lập trình WebSocket

Cách sử dụng WebSocket khá đơn giản. Ở đây là một đoạn code đơn giản, giúp ban có thể hiểu ngay trong vòng 3 nốt nhạc. Còn nếu tò mò xem nó chạy thế nào thì click vào đây)

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};      

Ok, còn bây giờ chúng ta xem webscoket cung cấp API gì nào?

Websocket api

API của máy khách sử dụng WebSocket như sau. 

# WebSocket Constructor 

Client muốn khởi tạo một đối tượng WebSocket thì có thể sử dụng phương thức sau:

var ws = new WebSocket('ws://localhost:8080');

Máy khách sẽ kết nối với máy chủ sau khi thực hiện câu lệnh trên. Khuyến khích tìm hiểu thêm về các thuộc tính và phương thức khi khởi tạo vui lòng đọc thêm tại đây.

# webSocket.readyState 

readyState Thuộc tính trả về trạng thái hiện tại của đối tượng instance, có bốn loại. 

• CONNECTING: Giá trị là 0, có nghĩa là nó đang kết nối. 
• OPEN: Giá trị là 1, có nghĩa là kết nối thành công và bạn có thể giao tiếp. 
• CLOSING: Giá trị là 2, có nghĩa là kết nối đang được đóng. 
• CLOSED: Giá trị là 3, có nghĩa là kết nối đã bị đóng hoặc không thể mở kết nối.

Dưới đây là một ví dụ nhanh để xem:

switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
    break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
}

# webSocket.onopen 

thuộc tính onopen của đối tượng instance được sử dụng để chỉ định hàm callback sau khi kết nối thành công.

ws.onopen = function () {
  ws.send('Hello Server!');
}

Nếu bạn muốn chỉ định nhiều hàm callbacks, bạn có thể sử dụng phương pháp này đó là addEventListener

ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});

# webSocket.onclose 

Thuộc tính onclose của đối tượng instance được sử dụng để chỉ định hàm callbacks sau khi kết nối bị đóng.

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});

#webSocket.onmessage 

Thuộc tính onmessage của đối tượng instance được sử dụng để chỉ định hàm callbacks sau khi nhận dữ liệu máy chủ.

ws.onmessage = function(event) {
  var data = event.data;
  // Xử lý data ở đây
};

ws.addEventListener("message", function(event) {
  var data = event.data;
  // Xử lý data ở đây
});

Lưu ý rằng dữ liệu máy chủ có thể là văn bản hoặc dữ liệu nhị phân ( đối tượng blob hoặc đối tượng Arraybuffer).

ws.onmessage = function(event){
  if(typeof event.data === String) {
    console.log("Received data string");
  }

  if(event.data instanceof ArrayBuffer){
    var buffer = event.data;
    console.log("Received arraybuffer");
  }
}

#webSocket.send () 

phương thức send() của đối tượng instance được sử dụng để gửi dữ liệu đến máy chủ. 

Ví dụ về gửi văn bản hay một String.

ws.send('your message');

Ví dụ về việc gửi đối tượng Blob.

var file = document
  .querySelector('input[type="file"]')
  .files[0];
ws.send(file);

Ví dụ về việc gửi đối tượng ArrayBuffer.

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
  binary[i] = img.data[i];
}
ws.send(binary.buffer);

# webSocket.onerror 

Thuộc tính onerror của đối tượng instance được sử dụng để chỉ định hàm callbacks khi có lỗi được báo cáo.

socket.onerror = function(event) {
  // handle error event
};

socket.addEventListener("error", function(event) {
  // handle error event
});

Trên đây là cách client làm việc với Server thông qua những WebSocket API, vạy còn ngược lại có nghĩa là Đối với việc triển khai máy chủ WebSocket thì như thế nào, bạn có thể chờ bài viết tiếp theo hoặc có thể tham khảo ngay tại Wikipedia  

Ref: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

 Bài trước: Vì sao websocket ra đời và hoản cảnh?