Cach Xay Dung Ung Dung Chat Real-Time Voi Supabase Va React

Chat real-time đã trở thành một tính năng không thể thiếu trong các ứng dụng hiện đại. Với sự phát triển của công nghệ, việc xây dựng một ứng dụng chat hoàn chỉnh không còn quá phức tạp. Bài viết này sẽ hướng dẫn bạn cách xây dựng một ứng dụng chat real-time sử dụng Supabase và React, hai công nghệ mạnh mẽ và dễ sử dụng.

Supabase là một nền tảng Backend-as-a-Service (BaaS) mã nguồn mở, cung cấp các dịch vụ như cơ sở dữ liệu, xác thực, lưu trữ tệp và real-time. React là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng. Kết hợp Supabase và React sẽ giúp bạn tạo ra một ứng dụng chat real-time nhanh chóng và hiệu quả.

Trước khi bắt đầu, bạn cần cài đặt Node.js và npm trên máy tính. Sau đó, tạo một dự án React mới bằng lệnh:

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

Tiếp theo, bạn cần tạo một dự án Supabase. Truy cập vào trang web của Supabase, đăng nhập và tạo một dự án mới. Sau khi dự án được tạo, bạn sẽ nhận được một URL và một khóa API. Lưu ý các thông tin này để sử dụng sau này.

Bây giờ, chúng ta sẽ bắt đầu xây dựng giao diện chat. Tạo một component mới tên là ChatRoom:

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

const ChatRoom = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');


// Hàm để gửi tin nhắn
  const sendMessage = async () => {
    // Mã nguồn sẽ được điền vào đây
  };


return (
    <div>
      <div>
        {messages.map((message, index) => (
          <div key={index}>
            <strong>{message.user}:</strong> {message.text}
          </div>
        ))}
      </div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
      />
      <button onClick={sendMessage}>Gửi</button>
    </div>
  );
};


export default ChatRoom;

Để kết nối Supabase và xử lý real-time, bạn cần cài đặt thư viện Supabase:

npm install @supabase/supabase-js

Sau đó, khởi tạo Supabase trong component ChatRoom:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseKey = 'YOUR_SUPABASE_KEY';
const supabase = createClient(supabaseUrl, supabaseKey);


const ChatRoom = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');


useEffect(() => {
    // Lấy tin nhắn từ Supabase
    const getMessages = async () => {
      const { data, error } = await supabase
        .from('messages')
        .select('*')
        .order('created_at', { ascending: false })
        .limit(20);


if (error) console.error(error);
      else setMessages(data.reverse());
    };


getMessages();


// Lắng nghe thay đổi real-time
    const mySubscription = supabase
      .from('messages')
      .on('INSERT', (payload) => {
        setMessages((prevMessages) => [...prevMessages, payload.new]);
      })
      .subscribe();


return () => supabase.removeSubscription(mySubscription);
  }, []);


const sendMessage = async () => {
    if (input.trim() === '') return;


const { error } = await supabase
      .from('messages')
      .insert([{ user: 'User', text: input, created_at: new Date() }]);


if (error) console.error(error);
    else setInput('');
  };
Quảng cáo
300x250 In-Content Advertisement


return (
    <div>
      <div>
        {messages.map((message, index) => (
          <div key={index}>
            <strong>{message.user}:</strong> {message.text}
          </div>
        ))}
      </div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
      />
      <button onClick={sendMessage}>Gửi</button>
    </div>
  );
};


export default ChatRoom;

Để ứng dụng chat hoàn chỉnh hơn, bạn có thể thêm tính năng xác thực người dùng. Supabase cung cấp dịch vụ xác thực tích hợp sẵn. Bạn có thể sử dụng nó để đăng ký và đăng nhập người dùng:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseKey = 'YOUR_SUPABASE_KEY';
const supabase = createClient(supabaseUrl, supabaseKey);


const ChatRoom = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [user, setUser] = useState(null);


useEffect(() => {
    // Kiểm tra trạng thái đăng nhập
    const checkAuth = async () => {
      const { data: { user } } = await supabase.auth.getUser();
      setUser(user);
    };


checkAuth();


// Lấy tin nhắn từ Supabase
    const getMessages = async () => {
      const { data, error } = await supabase
        .from('messages')
        .select('*')
        .order('created_at', { ascending: false })
        .limit(20);


if (error) console.error(error);
      else setMessages(data.reverse());
    };


getMessages();


// Lắng nghe thay đổi real-time
    const mySubscription = supabase
      .from('messages')
      .on('INSERT', (payload) => {
        setMessages((prevMessages) => [...prevMessages, payload.new]);
      })
      .subscribe();


return () => supabase.removeSubscription(mySubscription);
  }, []);


const sendMessage = async () => {
    if (input.trim() === '' || !user) return;


const { error } = await supabase
      .from('messages')
      .insert([{ user: user.email, text: input, created_at: new Date() }]);


if (error) console.error(error);
    else setInput('');
  };


return (
    <div>
      <div>
        {messages.map((message, index) => (
          <div key={index}>
            <strong>{message.user}:</strong> {message.text}
          </div>
        ))}
      </div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
      />
      <button onClick={sendMessage}>Gửi</button>
    </div>
  );
};


export default ChatRoom;

Trong bài viết này, chúng ta đã tìm hiểu cách xây dựng một ứng dụng chat real-time sử dụng Supabase và React. Supabase cung cấp một nền tảng mạnh mẽ và dễ sử dụng để xây dựng các ứng dụng real-time, trong khi React giúp tạo ra giao diện người dùng linh hoạt và tương tác. Hy vọng bài viết này sẽ giúp bạn bắt đầu với dự án chat real-time của riêng mình. Chúc bạn thành công!