본문 바로가기
프론트엔드/Supabase + Jotai

Supabase - Realtime(실시간)

by 학습하는 청년 2024. 5. 29.

최종 수정 : 2024-05-29

Realtime(실시간)

연결된 클라이언트에게 메시지를 주고 받는다.

 

Supabase 전 세계적으로 분포된 다음 기능을 활성화시키는 실시간 서버를 제공한다.

  • Broadcast : 짧은 대기 시간으로 클라이언트에서 클라이언트에게 임시 메시지를 보낸다.
  • Presence : 클라이언트 간 공유된 상태를 추적하고 동기화한다.
  • Postgres Changes : Postgres database의 변경 사항을 수신하고 승인된 클라이언트에게 보낸다.

 

실시간 API

기본적으로 데이터베이스에서는 실시간이 비활성되어 있다. 테이블 todos에 대한 실시간을 켜보자.

Database로 이동

 

클라이언트에서 todos 테이블에 삽입된 새 데이터를 수신할 수 있다.

// Initialize the JS client
import { createClient } from '@supabase/supabase-js';
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

// Create a function to handle inserts
const handleInserts = (payload) => {
  console.log('Change received!', payload);
}

// Listen to inserts
supabase
  .channel('todos')
  .on('postres_changes', { event: 'INSERT', schema: 'public', table: 'todos' }, handleInserts)
  .subscribe();

데이터베이스 변경 사항을 수신하려면 subscribe()를 사용하라. 실시간 API는 PostgreSQL의 복제된 기능을 통해 동작한다. Postgres는 데이터베이스 변경사항을 supabase_realtime이라 불리는 publication에 보내고, publication을 관리함으로써 어떤 데이터가 broadcast되는지 관리할 수 있다.

 

예시

https://multiplayer.dev/

 

Realtime | Supabase

Realtime collaborative app to display broadcast, presence, and database listening over WebSockets

multiplayer.dev

 

Resources

Supabase GitHub 레퍼지토리에서 소스 코드와 문서를 찾아보라.

'프론트엔드 > Supabase + Jotai' 카테고리의 다른 글

생활코딩 - Supabase 입문 수업  (0) 2024.05.29
Supabase - Database  (0) 2024.05.29
Supabase - Edge Functions  (0) 2024.05.29
Supabase - Storage  (0) 2024.05.28
Supabase - Auth / Auth architecture /Auth with React  (0) 2024.05.25

댓글