Trong thế giới web ngày nay, các tính năng thời gian thực như trò chuyện trực tiếp, thông báo, và game nhiều người chơi xuất hiện ở khắp mọi nơi. Nhưng làm thế nào để các ứng dụng này cập nhật tức thì — mà không cần tải lại trang?
Bí mật chính là WebSockets — một công nghệ mạnh mẽ cho phép trình duyệt và máy chủ trò chuyện với nhau một cách tức thì.
Trong hướng dẫn thân thiện với người mới bắt đầu này, chúng ta sẽ cùng tìm hiểu WebSocket là gì, khi nào nên dùng và cách xây dựng một ứng dụng thời gian thực nhỏ để xem nó hoạt động như thế nào.
WebSocket là gì?
WebSocket cho phép trình duyệt và máy chủ gửi tin nhắn qua lại thông qua một kết nối duy trì liên tục, luôn mở.
So sánh với HTTP thông thường:
Điều gì khiến WebSocket "ngầu"?
- Vì nó cho phép cập nhật tức thì mà không cần trình duyệt "hỏi lại" — cực kỳ lý tưởng cho ứng dụng thời gian thực.
Khi nào nên dùng WebSocket?
Hãy dùng WebSocket khi ứng dụng của bạn cần giao tiếp tức thời:
- Ứng dụng chat trực tiếp
- Game nhiều người chơi
- Theo dõi vị trí thời gian thực
- Giá cổ phiếu hoặc tiền điện tử trực tiếp
- Thông báo tức thì
Nếu chỉ cần cập nhật đơn giản, không thường xuyên, bạn có thể dùng HTTP polling hoặc Server-Sent Events (SSE).
Xây dựng một ứng dụng WebSocket đơn giản
Chúng ta sẽ dùng Node.js và thư viện WebSocket có tên là ws.
1. Tạo WebSocket Server
Tạo một file mới tên là server.js:
// server.js
const WebSocket = require('ws'); // Create WebSocket server on port 8080
const server = new WebSocket.Server({ port: 8080 }); server.on('connection', socket => { console.log('🔌 New client connected'); socket.on('message', message => { console.log('Received:', message); socket.send(`Server received: ${message}`); }); socket.on('close', () => console.log('❌ Client disconnected'));
});
Cài đặt thư viện cần thiết và chạy server:
npm install ws
node server.js
2. Kết nối từ trình duyệt
Mở DevTools Console trên trình duyệt và dán đoạn mã sau:
const socket = new WebSocket('ws://localhost:8080'); socket.onopen = () => { console.log('✅ Connected to server'); socket.send('Hello from the browser!');
}; socket.onmessage = (event) => { console.log('💬 Message from server:', event.data);
}; socket.onclose = () => { console.log('🔒 Connection closed');
};
Bạn sẽ thấy việc giao tiếp thời gian thực giữa trình duyệt và server Node.js — không cần refresh, không cần reload.
Cách hoạt động (Giản lược)
- Trình duyệt (client) mở kết nối WebSocket đến máy chủ.
- Máy chủ chấp nhận và giữ kết nối mở.
- Cả hai bên có thể gửi tin nhắn bất kỳ lúc nào.
- Kết nối sẽ giữ cho đến khi một bên đóng lại.
Mẹo nhanh khi dùng thực tế
- Dùng
wss://(WebSocket qua HTTPS) trong môi trường production để đảm bảo bảo mật. - Xử lý việc mất kết nối và thử lại (vì mạng không phải lúc nào cũng ổn định).
- WebSocket rất mạnh cho các tính năng thời gian thực, nhưng đừng lạm dụng nếu polling cũng đủ.
Kết luận
WebSocket thoạt đầu có vẻ phức tạp — nhưng khi bạn thử một ví dụ đơn giản, bạn sẽ hiểu ngay.
Chúng cực kỳ hữu ích khi bạn muốn giao tiếp tức thì giữa người dùng và server.
Dù bạn đang xây dựng ứng dụng chat hay dashboard thời gian thực, học WebSocket sẽ giúp bạn nâng tầm kỹ năng lập trình web của mình.