WebSocket là gì ?
Websocket là một công nghệ giao tiếp hai chiều (full-duplex) trên giao thức HTTP , cho phép việc gửi và nhận dữ liệu giữa client và server để tạo một kết nối theo thời gian thực . Giao thức này không sử dụng HTTP mà thực hiện nó qua TCP. Mặc dù được thiết kế để chuyên sử dụng cho các ứng dụng web, lập trình viên vẫn có thể đưa chúng vào bất kì loại ứng dụng nào.
- Ưu điểm
WebSocket cung cấp giao thức giao tiếp hai chiều mạnh mẽ. Nó có độ trễ thấp và dễ xử lý lỗi. Websocket thường được sử dụng cho những trường hợp yêu cầu real time như chat, hiển thị biểu đồ ,thông tin chứng khoán hay game online nhiều người chơi cùng lúc. - Nhược điểm
– Khó khăn trong việc xử lý lỗi kết nối: Một số tình huống không mong muốn có thể xảy ra trong quá trình truyền thông qua WebSocket, như mất kết nối mạng hoặc lỗi máy chủ. Xử lý các lỗi này có thể phức tạp hơn so với các phương pháp truyền thông truyền thống như Ajax.
– Tăng tải cho máy chủ: Vì WebSocket tạo và duy trì kết nối liên tục giữa client và server, điều này có thể dẫn đến một lượng lớn kết nối đồng thời được mở tại máy chủ. Điều này có thể gây tăng tải cho máy chủ, đặc biệt khi có một lượng lớn người dùng truy cập ứng dụng cùng một lúc.
– Có thể dễ dàng bị tấn công DDoS: Vì WebSocket yêu cầu duy trì kết nối liên tục và không có cơ chế hạn chế số lượng kết nối từ một địa chỉ IP cụ thể, nó có thể dễ dàng bị tấn công DDoS (tấn công từ chối dịch vụ) bằng cách mở nhiều kết nối từ nhiều nguồn khác nhau, làm cho máy chủ quá tải.
– Khó khăn trong việc xử lý các phiên bản cũ hơn của HTTP: WebSocket cần một số phiên bản cụ thể của giao thức HTTP để hoạt động (ví dụ: HTTP/1.1 hoặc HTTP/2). Điều này có thể gây khó khăn cho việc triển khai trên các hệ thống không hỗ trợ các phiên bản này.
Cấu trúc của WebSocket
Giao thức chuẩn thông thường của WebSocket là ws:// , giao thức secure là wss:// . Chuẩn giao tiếp là String và hỗ trợ buffered arrays và blobs.
Một khi được tạo lập các message WebSocket có thể được truyền đến và đi thông qua các method của WebSocket.
WebSocket Events
Bản chất bất đồng bộ của WebSocket có nghĩa là một khi một kết nối WebSocket được mở, ứng dụng sẽ lắng nghe những sự kiện. Để bắt đầu lắng nghe các sự kiện, bạn có thể thêm hàm callback vào object WebSocket hoặc sử dụng DOM method addEventListener() để thêm event listener.
Object WebSocket phát đi 4 sự kiện:
Open: Server phản hồi lại request để mở kết nối WebSocket. Event này thông báo rằng handshake thành công và kết nối Websocket được khởi tạo. Callback của sự kiện này là onopen.
websocket.js
// Trình xử lý sự kiện để mở kết nối WebSocket
ws.onopen = function(e) {
console.log("Connection established");
};
Message: Client nhận được data chứa trong message từ server. Callback tương ứng của sự kiện này là onmessage.
websocket.js
// Trình xử lý sự kiện để nhận tin nhắn văn bản
ws.onmessage = function(e) {
console.log("Message received", e, e.data);
};
Error: Sự kiện xảy ra khi có bất kỳ lỗi nào trong kết nối WebSocket. Callback với sự kiện này là onerror.
websocket.js
// Trình xử lý sự kiện cho các lỗi trong đối tượng WebSocket
ws.onerror = function(e) {
console.log("WebSocket Error: " , e);
// Chức năng tùy chỉnh để xử lý lỗi
handleErrors(e);
};
Close: Kết nối được đóng lại. Callback tương ứng với sự kiện này là onclose.
websocket.js
// Trình xử lý sự kiện cho các kết nối đóng
ws.onclose = function(e) {
console.log("Connection closed", e);
};
Các methods của WebSocket
WebSocket cung cấp 2 method:
send(): method send(data) truyền data trên kết nối. Nếu vì lý do nào đó, kết nối không tồn tại hoặc bị đóng, method này sẽ trả về exception về tình trạng không hợp lệ của kết nối.
// Send a text message
ws.send("This is a message using WebSockets.");
close(): Method close() dùng để đóng kết nối hiện tại. Nếu kết nối đã bị đóng từ trước đó (có thể do lỗi kết nối), nó không gây ảnh hưởng gì. Method này nhận hai argument tùy chọn: code (dạng số) và reason (dạng text)
// Gửi tin nhắn văn bản
ws.close(1000, "Closing Connection Normally");
Những thuộc tính của WebSocket object
Object WebSocket có những thuộc tính sau:
readyState: Đây là một thuộc tính read-only thể hiện trạng thái của kết nối với những giá trị sau:
- 0: Kết nối đang trong tiến trình được khởi tạo
- 1: Kết nối được khởi tạo và bạn có thể gửi message giữa client và server
- 2: Kết nối đang trong quá trình đóng handshake
- 3: Kết nối đã được đóng và không thể mở lại
bufferedAmount: Thuộc tính read-only thể hiện số lượng bytes của UTF-8 text được queued bằng method send(). Ví dụ dưới đây sử dụng thuộc tính này nhằm chắc chắn rằng message chỉ được gửi khi buffer chưa bị đầy.
// Kích thước bộ đệm tối đa 6400.
var THRESHOLD = 6400;
//Tạo kết nối WebSocket mới
var ws = new WebSocket("ws://echo.websocket.org");
ws.onopen = function () {
//Gửi cập nhật mỗi giây.
setInterval( function() {
if (ws.bufferedAmount < THRESHOLD) {
ws.send(getApplicationState());
}
}, 1000);
};
protocol: Cho server biết giao thức nào client hiểu và có thể sử dụng trên WebSocket.
// Kết nối với máy chủ với nhiều lựa chọn giao thức
var ws = new WebSocket("ws://echo.websocket.org", [ "protocol", "another protocol"])
echoSocket.onopen = function(e) {
// Kiểm tra giao thức được chọn bởi máy chủ
console.log( ws.protocol);
}
Như vậy chúng ta đã cùng tìm hiểu tổng quan về WebSocket object, cách nó được khởi tạo, các sự kiện, method, thuộc tính có thể sử dụng với nó. Mong các bạn cảm thấy kiến thức này hữu ích. Trong phần sau mình sẽ tìm hiểu làm thế nào để tạo ra 1 game online đơn giản nhé .
Cảm ơn các bạn đã theo dõi bài viết.
