Lập trình Tool Chat Online trên Website bằng PHP, MySQL, Node.js và React

1. Công cụ chat online trên website thường được phát triển bằng các ngôn ngữ lập trình và công nghệ nào?

• Front-end (giao diện người dùng): Sử dụng HTML, CSS, JavaScript, và các thư viện như React, Angular, hoặc Vue.js để xây dựng giao diện tương tác.

• Back-end (xử lý phía máy chủ): Thường sử dụng PHP, Node.js, Python, Ruby, hoặc Java (tuỳ thuộc vào hệ thống).

• Real-time Communication: Sử dụng WebSocket hoặc AJAX để trao đổi dữ liệu theo thời gian thực, thường thông qua các thư viện như Socket.IO (Node.js).

• Cơ sở dữ liệu: Dùng MySQL, PostgreSQL, MongoDB hoặc Firebase để lưu trữ dữ liệu người dùng và tin nhắn.

• Tích hợp API: Hoặc tích hợp các tool như Tawk.to, LiveChat hoặc Zendesk có thể được tích hợp nhanh mà không cần xây dựng từ đầu.

2. Hướng dẫn xây dựng Tool Chat Online trên Website bằng PHP, MySQL, Node.js và React

2.1. Front-end: React

• Nhiệm vụ: Giao diện người dùng (UI) hiển thị khung chat, danh sách tin nhắn, và hỗ trợ gửi/nhận tin nhắn.
• Kỹ thuật:
  • Sử dụng thư viện Axios hoặc Fetch API để gửi/nhận yêu cầu HTTP đến máy chủ.
  • Sử dụng Socket.IO-client để kết nối thời gian thực.

  • Ví dụ mã React:

    
    import io from 'socket.io-client';
    const socket = io('http://localhost:5000');
    
    function Chat() {
      const [messages, setMessages] = React.useState([]);
      const [input, setInput] = React.useState('');
    
      React.useEffect(() => {
        socket.on('message', (message) => {
          setMessages([...messages, message]);
        });
      }, [messages]);
    
      const sendMessage = () => {
        socket.emit('message', input);
        setInput('');
      };
    
      return (
        <div>
          <ul>
            {messages.map((msg, index) => (
              <li key={index}>{msg}</li>
            ))}
          </ul>
          <input value={input} onChange={(e) => setInput(e.target.value)} />
          <button onClick={sendMessage}>Send</button>
        </div>
      );
    }
    export default Chat;
    
    		
    		

2.2. Back-end: Node.js với Socket.IO

• Nhiệm vụ: Xử lý kết nối thời gian thực và chuyển tiếp tin nhắn giữa các người dùng.
• Kỹ thuật:
  • Sử dụng Socket.IO để tạo server WebSocket.
  • Node.js đảm bảo kết nối liên tục và hiệu suất cao.

  • Ví dụ mã Node.js:

    
    const express = require('express');
    const http = require('http');
    const { Server } = require('socket.io');
    
    const app = express();
    const server = http.createServer(app);
    const io = new Server(server);
    
    io.on('connection', (socket) => {
      console.log('A user connected');
    
      socket.on('message', (msg) => {
        io.emit('message', msg); // Gửi tin nhắn đến tất cả người dùng
      });
    
      socket.on('disconnect', () => {
        console.log('User disconnected');
      });
    });
    
    server.listen(5000, () => {
      console.log('Server running on http://localhost:5000');
    });
    
    
    
    

2.3. Back-end: PHP và MySQL

• Nhiệm vụ:
  • Lưu trữ tin nhắn vào cơ sở dữ liệu để truy vấn khi cần.
  • Cung cấp API RESTful để truy vấn hoặc gửi tin nhắn.
• Kỹ thuật:
  • Tạo cơ sở dữ liệu MySQL với bảng tin nhắn:

    
    CREATE TABLE messages (
      id INT AUTO_INCREMENT PRIMARY KEY,
      user VARCHAR(50),
      content TEXT,
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    );
    
    

  • API PHP để lưu tin nhắn:

    prepare("INSERT INTO messages (user, content) VALUES (?, ?)");
        $stmt->bind_param("ss", $user, $content);
        $stmt->execute();
        echo "Message saved!";
    }
    
    // Xử lý GET yêu cầu lấy tin nhắn
    if ($_SERVER['REQUEST_METHOD'] === 'GET') {
        $result = $conn->query("SELECT * FROM messages ORDER BY created_at ASC");
        $messages = $result->fetch_all(MYSQLI_ASSOC);
        echo json_encode($messages);
    }
    ?>
    
    

2.4. Kết nối các thành phần

• Front-end (React) sẽ gửi tin nhắn tới server Node.js qua WebSocket hoặc gọi API PHP để lưu tin nhắn vào MySQL.
• Back-end Node.js sẽ chuyển tiếp tin nhắn theo thời gian thực cho các người dùng khác thông qua Socket.IO.
• PHP và MySQL đảm bảo lưu trữ tin nhắn lâu dài, cho phép người dùng truy cập lại lịch sử chat.

2.5. Lợi ích của kiến trúc này

• Tính thời gian thực: Node.js và WebSocket xử lý tin nhắn nhanh chóng, mượt mà.
• Lưu trữ dữ liệu bền vững: MySQL và PHP đảm bảo lưu trữ tin nhắn lâu dài.
• Giao diện hiện đại: React cung cấp giao diện tương tác, dễ sử dụng.

2.6. Công cụ bổ sung

• PM2: Quản lý server Node.js.
• Nginx hoặc Apache: Làm máy chủ proxy cho cả Node.js và PHP.
• Firebase hoặc Redis: Nếu muốn tăng tốc độ truy vấn hoặc quản lý trạng thái chat.

Bằng cách kết hợp các công nghệ trên, bạn có thể xây dựng một hệ thống chat online mạnh mẽ và linh hoạt, phục vụ cả thời gian thực và lưu trữ dữ liệu lâu dài.

3. Cấu trúc bảng tabl data chat 1 - n users

Để biết được ai đang chat với ai trong bảng tin nhắn MySQL, bạn cần thiết kế bảng phù hợp để lưu thông tin về người gửi, người nhận và nội dung tin nhắn. Ví dụ:

Cấu trúc bảng MySQL để quản lý tin nhắn cá nhân

CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    sender_id INT NOT NULL,       -- ID người gửi
    receiver_id INT NOT NULL,    -- ID người nhận
    content TEXT NOT NULL,       -- Nội dung tin nhắn
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP -- Thời gian gửi
);

Cách hoạt động

1. Xác định người gửi và người nhận: sender_id là ID của người gửi, và receiver_id là ID của người nhận. Cả hai có thể tham chiếu tới bảng users chứa thông tin người dùng.

2. Truy vấn tin nhắn giữa hai người dùng:

   
   SELECT * 
   FROM messages 
   WHERE (sender_id = 1 AND receiver_id = 2) 
      OR (sender_id = 2 AND receiver_id = 1)
   ORDER BY created_at ASC;
   
   

Truy vấn này lấy tất cả các tin nhắn giữa người dùng có ID 1 và 2.

1. Mở rộng cho nhiều người nhận (nhóm chat): Thêm cột group_id để quản lý tin nhắn nhóm, hoặc tạo một bảng khác để lưu danh sách các nhóm.

Bảng mẫu users

Để xác định ai là người gửi hoặc nhận, bạn cần một bảng người dùng:

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    email VARCHAR(100) NOT NULL
);

Lợi ích thiết kế

• Dễ dàng truy vấn lịch sử chat giữa các người dùng.
• Có thể mở rộng để hỗ trợ nhóm chat hoặc các tính năng như trạng thái đọc tin nhắn (is_read).