Supabase으로 실시간 채팅기능 만들기 (Real-time database)

 

Supabase는 오픈 소스 서비스로, Firebase의 대안으로 사용할 수 있는 serverless DB 솔루션 입니다.

PostgreSQL을 DB engine으로 사용하고 있어 복잡한 쿼리 작업도 용이하게 사용할 수 있습니다.

 

 

 

주요 기능

1. 실시간 데이터베이스 (Real-time Database)
   • PostgreSQL의 데이터 변경 사항(삽입, 수정, 삭제 등)을 실시간으로 감지하여 클라이언트에 전달합니다.
   • 실시간 기능은 웹소켓(WebSocket)을 통해 동작합니다.
2. 인증(Authentication)
   • 사용자 등록, 로그인, 소셜 로그인(Google, Facebook 등) 같은 인증 기능을 지원합니다.
   • Role-Based Access Control(RBAC) 및 JWT 토큰 기반 인증 제공.
3. 스토리지(Storage)
   • 파일 업로드 및 관리를 위한 스토리지 서비스 제공.
   • 이미지, 동영상 등 파일을 업로드하고 URL로 쉽게 접근 가능.
4. Edge Functions (서버리스 함수)
   • JavaScript 및 TypeScript로 작성된 서버리스 함수를 호스팅할 수 있는 기능.
   • 데이터베이스 트리거와 통합 가능.
5. SQL 쿼리 및 관리
   • PostgreSQL 데이터베이스를 직접 쿼리할 수 있는 인터페이스 제공.
   • GUI 기반의 데이터베이스 관리 도구도 포함.

 

https://supabase.com/

Supabase | The Open Source Firebase Alternative

 

 

 

---

 

 

 

[실시간 채팅 구현 예시]

Dashboard에서 new project생성

 

 

 

설치

npm install @supabase/supabase-js

 

 

기본 설정

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

const supabaseUrl = 'https://your-project.supabase.co';
const supabaseKey = 'public-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

 

 

 

 

https://supabase.com/docs/guides/realtime/broadcast

Broadcast | Supabase Docs

const ChatMessage = () => {
  const channel = useRef<RealtimeChannel>()

  const [messages, setMessages] = useState(initialMessages)

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const {
      target: { value },
    } = event

    setMessage(value)
  }

  const onSubmit = (event: React.FormEvent) => {
    event.preventDefault()
    setMessages((prevMsgs) => [
      ...prevMsgs,
      {
        payload: message,
      },
    ])

    // channel에 입력한 값을 보냄
    channel.current?.send({
      type: 'broadcast',
      event: 'message',
      payload: { message },
    })
  }


  useEffect(() => {
    const supabase = createClient(supabaseUrl, supabaseKey)
    // 무작위 숫자의 id로 unique한 room channel 생성
    const channel = supabase.channel(`room-${chatRoomId}`)
    
    // broadcast : 실시간 이벤트, 동일 채널에 연결된 모든 클아이언트에 데이터를 전달
    // event : 이벤트 필터, 'message'라는 이벤트에 대해서만 콜백함수 호출
    // callback : 이벤트 발생했을 대 실행될 코드
    channel.on('broadcast', { event: 'message' }, (payload) => {
       setMessages((prevMsgs) => [...prevMsgs, payload.payload])
    })
  }, [])

  return (
    <div>
   		...
      <form className="relative flex" onSubmit={onSubmit}>
        <input onChange={onChange} />
        <button>입력</button>
      </form>
    </div>
  )
}

export default ChatMessage

 

 

 

 

 

 

 

 

 

반응형