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

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

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();
  }, []);

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;