Xây dựng ứng dụng thời gian thực với WebSockets
Polling không tốt cho ứng dụng của bạn.
Tôi từng xây dựng một widget chat bằng cách sử dụng AJAX polling. Tôi thiết lập ứng dụng để yêu cầu máy chủ gửi tin nhắn mới mỗi giây một lần. Nó hoạt động, nhưng chậm. Giao diện người dùng (UI) có cảm giác bị giật lag. Máy chủ phải làm việc quá sức. Hầu hết các yêu cầu đều trả về dữ liệu trống. Cảm giác giống như đang cố gắng đổ đầy một bồn tắm bằng một chiếc thìa cà phê vậy.
WebSockets thay đổi điều này.
Thay vì gửi các yêu cầu liên tục, bạn mở một kết nối duy nhất và bền vững. Điều này cho phép luồng dữ liệu hai chiều. Máy chủ có thể đẩy dữ liệu đến máy khách ngay lập tức. Máy khách có thể gửi dữ liệu đến máy chủ ngay lập tức.
Tại sao nên sử dụng WebSockets?
• Độ trễ giảm từ hàng trăm mili giây xuống còn hàng chục mili giây. • Tải của máy chủ trở nên dễ dự đoán hơn. • Bạn tiết kiệm băng thông bằng cách loại bỏ các HTTP header lặp đi lặp lại. • Nó hoạt động tốt cho chat, thông báo trực tiếp và các trò chơi nhiều người chơi.
Cách thức hoạt động:
Kết nối bắt đầu bằng một yêu cầu nâng cấp HTTP (HTTP upgrade request). Nếu máy chủ đồng ý, nó sẽ gửi mã trạng thái 101. Sau đó, bạn sử dụng giao thức văn bản hoặc nhị phân thô. Không còn cookie hay header nào làm chậm bước tiến của bạn nữa.
Những cạm bẫy thường gặp cần tránh:
- Mất kết nối: Mạng có thể gặp sự cố. Bạn phải triển khai một chiến lược thử lại như exponential backoff.
- Rò rỉ bộ nhớ: Luôn đóng socket khi người dùng rời đi. Các kết nối "zombie" sẽ ngốn bộ nhớ máy chủ.
- Vòng lặp tin nhắn: Khi phát sóng (broadcasting), hãy bỏ qua người gửi gốc. Nếu không, người dùng sẽ thấy tin nhắn của chính mình xuất hiện hai lần.
- Kết nối nhàn rỗi: Một số proxy sẽ đóng các kết nối im lặng. Hãy sử dụng cơ chế ping/pong heartbeat để giữ cho socket luôn hoạt động.
Đừng hỏi máy chủ xem có gì thay đổi hay không nữa. Hãy bắt đầu duy trì một đường dây mở để bạn có thể trò chuyện bất cứ khi nào cần.
Thử thách dành cho bạn:
Hãy lấy một ví dụ về chat cơ bản. Thêm chỉ báo "đang nhập..." (typing...). Triển khai nó lên một host như Render hoặc Fly.io. Một khi bạn thấy chỉ báo đó di chuyển trong thời gian thực mà không cần polling, nghĩa là bạn đã nâng cấp trình độ.