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

Tại sao nên chọn Supabase cho hệ thống chat real-time

Trong bối cảnh các ứng dụng web hiện đại, khả năng giao tiếp tức thời là một yếu tố then chốt quyết định trải nghiệm người dùng. Việc xây dựng một hệ thống chat real-time không còn quá phức tạp nếu có sự hỗ trợ từ các nền tảng Backend-as-a-Service (BaaS) như Supabase. Với Supabase, bạn có thể triển khai một hệ thống chat hoàn chỉnh mà không cần phải lo lắng về việc quản lý server hay cấu hình WebSocket phức tạp.

Supabase cung cấp Realtime Engine dựa trên PostgreSQL, cho phép lắng nghe và phản hồi các thay đổi dữ liệu gần như tức thì. Kết hợp với React - một thư viện UI phổ biến và linh hoạt - bạn có thể xây dựng giao diện chat mượt mà, phản hồi nhanh và dễ bảo trì.

Thiết lập dự án và kết nối Supabase

Để bắt đầu, bạn cần tạo một project mới trên Supabase Dashboard. Sau khi project được tạo, lưu lại các thông tin như Project URL và anon public key - chúng sẽ được sử dụng để kết nối từ phía client.

Tiếp theo, trong thư mục React, cài đặt các package cần thiết:

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

Tạo file supabaseClient.js để khởi tạo client:

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)

Thiết kế cơ sở dữ liệu cho hệ thống chat

Supabase cho phép bạn tạo và quản lý database trực tiếp từ dashboard. Với hệ thống chat, bạn cần ít nhất hai bảng:

- users: lưu thông tin người dùng (id, username, avatar, created_at). - messages: lưu tin nhắn (id, room_id, user_id, content, created_at, updated_at).

Bật tính năng Realtime trong bảng messages để cho phép client lắng nghe các thay đổi. Điều này đảm bảo tin nhắn mới sẽ được hiển thị ngay lập tức cho tất cả người tham gia.

Xây dựng giao diện chat với React

Giao diện chat thường bao gồm ba phần chính: danh sách phòng chat, danh sách tin nhắn và input để gửi tin. Sử dụng React hooks như useState và useEffect để quản lý trạng thái và side effects.

Ví dụ component hiển thị tin nhắn:

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()
Quảng cáo
300x250 In-Content Advertisement


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.