[최종 프로젝트] supabase realtime(1) Broadcast

Supabase Realtime

Supabase Realtime은 클라이언트와 데이터베이스 간에 실시간 동기화를 지원합니다. 이를 통해 사용자는 데이터가 변경된 부분을 즉시 반영할 수 있습니다. Realtime에는 세 가지 주요 작동 방식이 있습니다.

 

Broadcast

• 클라이언트 간에 메시지를 주고받는 기본 방식입니다.
• 데이터베이스와 관계없이 클라이언트 간에 실시간 이벤트를 공유할 수 있습니다.
• 채팅에서 실시간으로 메시지를 전송, 다수의 사용자에게 동시에 알림 보내기 가능

// 채널이 특정 이벤트를 구독하도록 활성화하기

// room/topic을 구독합니다. 채널은 'realtime'을 제외한 어떤 이름이든 사용 가능!
const channelA = supabase.channel('room-1')

// 수신한 메시지를 console.log에 출력하기
function messageReceived(payload) {
  console.log(payload)
}

// 채널 구독하기(subscribe)
channelA
  .on(
    'broadcast',
    { event: 'test' },
    (payload) => messageReceived(payload)
  )
  .subscribe()

• supabase.channel('room-1') 으로 ’room-1’이라는 이름의 채널을 생성합니다.
• 채널 안에서 클라이언트 간의 메시지를 broadcast할 수 있습니다.
• .on() 메서드를 사용해서 특정 이벤트를 구독할 수 있습니다. (현재는 ‘test’ 이벤트)
• .subscribe() 는 채널을 활성화하고 이벤트를 수신합니다.

// 채널에 broadcast로 메시지 전송하기

const channelA = supabase.channel('room-1')

channelA.subscribe((status) => {
  // 연결이 이루어질 때까지 대기
  if (status !== 'SUBSCRIBED') {
    return null
  }

  // 클라이언트가 구독을 완료하면 메시지를 보냅니다.
  channelA.send({
    type: 'broadcast', // broadcast 타입 메시지
    event: 'test', // 이벤트 이름 'test'
    payload: { message: 'hello, world' }, // 전송할 메시지 내용
  })
})

• channelA.subscribe() 는 채널 구독을 활성화합니다.
• .send() 메서드를 사용해서 메시지를 broadcast할 수 있습니다.
• broadcast된 메시지는 동일한 채널을 구독 중인 다른 클라이언트들에게 전송됩니다.