Xây Dựng Hệ Thống Chat Real-Time Với Supabase Và React

npm install @supabase/supabase-js
npm install @supabase/auth-ui-react @supabase/auth-ui-shared

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

import { useState, useEffect } from 'react'
import { supabase } from '@/lib/supabaseClient'

export default function MessageList({ roomId }) {
  const [messages, setMessages] = useState([])

useEffect(() => {
    const channel = supabase.channel(room_${roomId})

const subscription = supabase
      .from(messages:room_id=eq.${roomId})
      .on('INSERT', (payload) => {
        setMessages(prev => [...prev, payload.new])
      })
      .subscribe()

return () => supabase.removeSubscription(subscription)
  }, [roomId])

return (
    <div className="message-list">
      {messages.map(msg => (
        <div key={msg.id} className="message">
          <strong>{msg.user.username}:</strong> {msg.content}
        </div>
      ))}
    </div>
  )
}

Gửi và nhận tin nhắn

Để gửi tin nhắn, bạn chỉ cần insert vào bảng messages thông qua Supabase client:

const handleSubmit = async (e) => {
  e.preventDefault()
  if (!message.trim()) return

const { error } = await supabase
    .from('messages')
    .insert({
      room_id: roomId,
      user_id: userId,
      content: message
    })

if (!error) setMessage('')
}

Với Realtime subscription đã được thiết lập, mọi client đang lắng nghe room đó sẽ nhận được tin nhắn mới ngay lập tức, đảm bảo trải nghiệm chat liền mạch.

Quản lý phòng chat và người dùng

Ngoài tin nhắn, bạn có thể mở rộng hệ thống với danh sách phòng chat và quản lý session người dùng. Supabase Auth giúp đơn giản hóa việc đăng ký, đăng nhập và bảo mật. Bạn có thể lưu trữ thông tin user vào bảng users và liên kết với tin nhắn qua user_id.

Ví dụ tạo phòng chat mới:

const createRoom = async (name) => {
  const { data, error } = await supabase
    .from('rooms')
    .insert({ name })

if (error) console.error(error)
  return data
}

Tối ưu hiệu năng và trải nghiệm

Để đảm bảo ứng dụng hoạt động mượt mà, hãy cân nhắc:

– Pagination: Chỉ tải 50-100 tin nhắn gần nhất khi mở phòng chat, load thêm khi người dùng cuộn lên.
– Debounce: Tránh gửi tin nhắn quá nhanh bằng cách delay input.
– Loading states: Hiển thị trạng thái loading khi fetch dữ liệu.
– Error handling: Bắt và hiển thị lỗi một cách thân thiện.

Kết luận

Xây dựng hệ thống chat real-time với Supabase và React là một lựa chọn thông minh, giúp bạn tập trung vào trải nghiệm người dùng thay vì lo lắng về infrastructure. Supabase cung cấp đầy đủ các công cụ từ database, realtime subscription đến authentication, trong khi React giúp xây dựng giao diện linh hoạt và dễ bảo trì.

Với những kiến thức và code mẫu đã trình bày, bạn hoàn toàn có thể bắt tay vào tạo ra một ứng dụng chat hoàn chỉnh, sẵn sàng mở rộng và tích hợp thêm nhiều tính năng hấp dẫn khác.