Xây dựng ứng dụng chat real-time với Supabase và React

Giới thiệu

Trong thời đại công nghệ hiện nay, việc xây dựng ứng dụng chat real-time trở nên phổ biến hơn bao giờ hết. Supabase là một nền tảng Backend-as-a-Service (BaaS) mạnh mẽ, cho phép các nhà phát triển dễ dàng triển khai các ứng dụng real-time mà không cần quá nhiều kiến thức về server. Kết hợp với React, một thư viện JavaScript phổ biến, chúng ta có thể tạo ra một ứng dụng chat hiệu quả và dễ dàng mở rộng.

Chuẩn bị môi trường

Trước khi bắt đầu, hãy đảm bảo rằng bạn đã cài đặt Node.js và npm trên máy của mình. Tiếp theo, chúng ta cần tạo một dự án mới với React và cài đặt các dependencies cần thiết. Sử dụng lệnh sau để tạo một ứng dụng React mới:

npx create-react-app realtime-chat
cd realtime-chat

Sau đó, cài đặt Supabase và các thư viện khác:

npm install @supabase/supabase-js

Thiết lập Supabase

Để sử dụng Supabase, bạn cần tạo một tài khoản trên trang web của họ. Sau khi đăng nhập, tạo một project mới và lấy URL và key từ phần API. Chúng ta sẽ sử dụng chúng để kết nối với Supabase trong ứng dụng React của mình.

Xây dựng giao diện chat

Bây giờ, chúng ta sẽ tạo một giao diện chat đơn giản. Tạo một file Chat.js trong thư mục src và thêm code sau:

import React, { useState, useEffect } from 'react';

function Chat() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');


useEffect(() => {
    // Kết nối với Supabase
    const supabase = new SupabaseClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_KEY');


// Lắng nghe sự kiện real-time
    supabase
      .channel('public')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'messages' }, (payload) => {
        setMessages([...messages, payload.new]);
      })
      .subscribe();
  }, []);
Quảng cáo
300x250 In-Content Advertisement


const sendMessage = () => {
    const supabase = new SupabaseClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_KEY');
    supabase
      .from('messages')
      .insert({ message: input })
      .then(() => setInput(''));
  };


return (
    <div>
      <div>
        {messages.map((message, index) => (
          <div key={index}>{message.message}</div>
        ))}
      </div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}


export default Chat;

Tích hợp real-time

Trong đoạn code trên, chúng ta đã sử dụng useEffect để lắng nghe các thay đổi trong bảng messages của Supabase. Khi có một message mới được thêm vào, setMessages sẽ cập nhật state và hiển thị message đó trong giao diện chat.

Kết luận

Việc xây dựng một ứng dụng chat real-time với Supabase và React không chỉ đơn giản mà còn rất hiệu quả. Supabase giúp chúng ta quản lý backend một cách dễ dàng, trong khi React cung cấp một giao diện người dùng linh hoạt. Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách kết hợp hai công nghệ này để tạo ra một ứng dụng chat hoàn chỉnh.

Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, hãy để lại bình luận bên dưới. Chúc bạn thành công với dự án của mình!