close

Xây dựng Máy chủ WebSocket Cơ bản với Node.js

Ứng dụng Chat thời gian thực là một ví dụ minh họa tuyệt vời về cách sử dụng WebSocket với Node.js để tạo ra trải nghiệm tương tác và thú vị cho người dùng. Trong bài viết này, chúng ta sẽ khám phá cách xây dựng một ứng dụng Chat thời gian thực sử dụng WebSocket và Node.js.

Bước 1: Chuẩn bị Môi Trường

Trước hết, đảm bảo bạn đã cài đặt Node.js trên máy tính của mình. Tạo một thư mục mới cho dự án của bạn và di chuyển vào thư mục đó qua Terminal hoặc Command Prompt.

Bước 2: Cài Đặt Thư Viện WebSocket

Sử dụng thư viện "ws" như đã làm ở trước đây để cài đặt thư viện WebSocket:

npm install ws

Bước 3: Xây Dựng Máy Chủ WebSocket

Tạo một tệp có tên "server.js" và viết mã sau:

// Import thư viện WebSocket
const WebSocket = require('ws');

// Tạo máy chủ WebSocket
const server = new WebSocket.Server({ port: 8080 });

// Danh sách các kết nối (clients)
const clients = new Set();

// Xử lý khi có kết nối mới
server.on('connection', (socket) => {
    console.log('Client đã kết nối.');
    
    // Thêm kết nối vào danh sách
    clients.add(socket);

    // Xử lý khi nhận tin nhắn từ client
    socket.on('message', (message) => {
        // Gửi tin nhắn đến tất cả các kết nối khác
        for (const client of clients) {
            if (client !== socket) {
                client.send(message);
            }
        }
    });

    // Xử lý khi kết nối đóng
    socket.on('close', () => {
        console.log('Client đã ngắt kết nối.');
        // Xóa kết nối khỏi danh sách
        clients.delete(socket);
    });
});

Bước 4: Tạo Giao Diện Người Dùng (Client)

Tạo một tệp có tên "index.html" và viết mã sau:

<!DOCTYPE html>
<html>
<head>
    <title>Chat thời gian thực</title>
</head>
<body>
    <input type="text" id="message" placeholder="Nhập tin nhắn">
    <button onclick="send()">Gửi</button>
    <div id="chat"></div>
    
    <script>
        const socket = new WebSocket('ws://localhost:8080');
        socket.onmessage = (event) => {
            const chat = document.getElementById('chat');
            chat.innerHTML += '<p>' + event.data + '</p>';
        };

        function send() {
            const messageInput = document.getElementById('message');
            const message = messageInput.value;
            socket.send(message);
            messageInput.value = '';
        }
    </script>
</body>
</html>

Bước 5: Chạy Máy Chủ và Mở Trình Duyệt

Trong Terminal, chạy lệnh sau để khởi động máy chủ WebSocket:

node server.js

Mở trình duyệt và truy cập địa chỉ "http://localhost:8080" để sử dụng ứng dụng Chat thời gian thực.

 

Kết Luận

Chúc mừng! Bạn đã xây dựng thành công một ứng dụng Chat thời gian thực sử dụng WebSocket và Node.js. Ứng dụng này cho phép người dùng tương tác và gửi nhận tin nhắn trong thời gian thực. Bạn có thể tiếp tục mở rộng và tùy chỉnh ứng dụng này để tạo ra các tính năng thú vị khác!