Giới Thiệu WebSocket

Hãy hình dung bạn đang ở một nhà hàng và gọi món ăn. Trong cách giao tiếp truyền thống giống như HTTP Request, bạn sẽ phải gọi phục vụ, đợi họ mang món và nếu muốn biết tình trạng món ăn của mình, bạn phải liên tục vẫy tay và hỏi: "Món ăn của tôi sắp xong chưa?".

Tuy nhiên, với WebSocket, bạn sẽ nhận một thiết bị nhắn tin từ người phục vụ. Thay vì phải hỏi đi hỏi lại, thiết bị này sẽ reo ngay khi món ăn của bạn đã sẵn sàng. Đây chính là cách thức WebSocket hoạt động: khi kết nối đã được thiết lập, máy chủ có thể gửi các bản cập nhật đến máy khách một cách tức thì mà không cần máy khách phải gửi yêu cầu liên tục.

WebSocket Là Gì?

WebSocket là một giao thức giao tiếp cho phép trao đổi dữ liệu thời gian thực giữa máy khách (ví dụ: trình duyệt) và máy chủ qua một kết nối liên tục. Khác với giao thức HTTP truyền thống, nơi mà máy khách phải gửi yêu cầu để nhận cập nhật, WebSocket cho phép máy chủ tự động gửi thông tin mới đến máy khách ngay khi có dữ liệu mới.

Ứng Dụng Thực Tế Của WebSocket

1. Ứng dụng trò chuyện: Các nền tảng nhắn tin tức thời như WhatsApp, Slack, Messenger đều sử dụng WebSocket để gửi tin nhắn thời gian thực.
2. Thông báo tức thời: Các bản cập nhật như giá cổ phiếu, tỷ số thể thao hoặc tin tức nóng đều sử dụng WebSocket để gửi thông báo tức thì đến người dùng.
3. Trò chơi nhiều người chơi: Trong các trò chơi đòi hỏi sự tương tác nhanh giữa người chơi, WebSocket giúp giảm độ trễ trong giao tiếp.
4. Công cụ cộng tác: Các ứng dụng như Google Docs hay bảng trắng trực tuyến sử dụng WebSocket để đồng bộ hoá thay đổi ngay lập tức giữa các người dùng.

Cách Thiết Lập WebSocket Trong Node.js

Hãy cùng nhau triển khai một máy chủ WebSocket cơ bản sử dụng Node.js với gói ws.

Bước 1: Cài Đặt Các Thư Viện Cần Thiết

Đầu tiên, bạn cần cài đặt thư viện ws để hỗ trợ WebSocket trong Node.js.

npm install ws

Bước 2: Tạo Máy Chủ WebSocket

Dưới đây là mã nguồn cho một máy chủ WebSocket đơn giản, lắng nghe các kết nối và tin nhắn đến:

const WebSocket = require('ws');

// Tạo một máy chủ WebSocket trên cổng 8080
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('Khách hàng mới đã kết nối');

    // Gửi tin nhắn chào mừng khi khách hàng kết nối
    ws.send(JSON.stringify({ message: 'Chào mừng bạn đến với Máy chủ WebSocket!' }));

    // Lắng nghe tin nhắn từ khách hàng
    ws.on('message', (message) => {
        console.log(`Nhận được: ${message}`);

        // Phát tin nhắn đến tất cả khách hàng đã kết nối
        wss.clients.forEach(client => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(`Echo: ${message}`);
            }
        });
    });

    // Xử lý ngắt kết nối khách hàng
    ws.on('close', () => {
        console.log('Khách hàng đã ngắt kết nối');
    });
});

console.log('Máy chủ WebSocket đang chạy tại ws://localhost:8080');

Máy chủ WebSocket ở đây có các chức năng:

• Chấp nhận kết nối từ khách hàng mới.
• Gửi tin nhắn chào mừng đến từng khách hàng.
• Lắng nghe tin nhắn từ khách hàng và phản hồi lại.
• Phát tin nhắn đến tất cả các khách hàng đang kết nối.

Tạo WebSocket Client (Trình Duyệt)

Để kết nối với máy chủ WebSocket từ trang web, bạn có thể sử dụng API WebSocket tích hợp trong JavaScript:

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

// Lắng nghe tin nhắn từ máy chủ
socket.onmessage = (event) => {
    console.log('Máy chủ nói:', event.data);
};

// Gửi tin nhắn đến máy chủ
socket.onopen = () => {
    console.log('Đã kết nối đến máy chủ WebSocket');
    socket.send('Xin chào, Máy chủ WebSocket!');
};

// Xử lý khi ngắt kết nối
socket.onclose = () => {
    console.log('Đã ngắt kết nối với máy chủ WebSocket');
};

Nâng Cao Máy Chủ WebSocket: Thông Báo Thời Gian Thực

Chúng ta có thể cải tiến máy chủ để gửi các bản cập nhật theo thời gian thực định kỳ (ví dụ: cập nhật giá cổ phiếu):

setInterval(() => {
    const stockPrice = (Math.random() * 100).toFixed(2); // Tạo một giá cổ phiếu ngẫu nhiên

    wss.clients.forEach(client => {
        if (client.readyState === WebSocket.OPEN) {
            client.send(JSON.stringify({ stock: `AAPL: $${stockPrice}` }));
        }
    });
}, 5000); // Gửi bản cập nhật mỗi 5 giây

Giờ thì mọi khách hàng kết nối sẽ nhận thông tin cập nhật giá cổ phiếu theo thời gian thực sau mỗi 5 giây.

Kết Luận

WebSocket đã mở ra một kỷ nguyên mới cho việc phát triển các ứng dụng như trò chuyện, thông báo tức thì, trò chơi đa người cùng các công cụ cộng tác. Bằng cách giảm độ trễ và tối ưu hoá việc sử dụng tài nguyên, WebSocket cung cấp giải pháp tuyệt vời cho các ứng dụng hiện đại yêu cầu sự tương tác theo thời gian thực.
source: viblo