2024-01-15 본 캠프 72일차 / 91일차 TIL (realtime chat)

2024-01-12 본 캠프 71일차 / 90일차 TIL (realtime chat)

주요 진행사항

- real time chat 구성

 

supabase realtime 이용 chat 만들기 (2)

이전 내용 참고

2024-01-12 본 캠프 71일차 / 90일차 TIL (realtime chat(1))

 

 

위 로직을 통해 변경된 state에 따라서 DmContainer를 띄운다.

Dm Container는 직접적으로 상대방 유저와 실시간 채팅을 할 수 있는 공간으로 인식하면 되겠다.

 

4. 해당유저와 기존에 채팅방 정보가 dm_channels에 저장이 되었었는지 확인 후 채널 구독

  useEffect(() => {
    console.log("check out", currentDmChannel);
    if (currentDmChannel) {
      console.log("check in", currentDmChannel);
      // dm 채널 연결
      connectChannel(currentDmChannel);
    }
  }, [currentDmChannel]);

 

이미 상대방 유저와 채팅방 정보가 DB에 저장되어있는가를 고려해야한다. 

만약 상대방 유저와 내가 연결된 DB 정보가 있다면 해당 정보를 통해 채널을 연결시키면되겠다.

하지만 없다면 먼저 DB에 해당 정보를 저장하는 것이 우선되어야 할 것이다.

 

5. 보내기 로직

 // 채팅방 여부 확인
  const dm_channel = await supabase.rpc("get_dm_channels", {
    p_space_id: spaceId,
    p_user_id: currentUser?.id!,
    p_receiver_id: receiverId,
  });

  // (1)채팅방이 기존에 없는 경우
  if (!dm_channel.data?.length) {
    // (1-1) 채팅방 생성
    const { data: newDmChannel } = await supabase
      .from("dm_channels")
      .insert({
        space_id: spaceId,
        user: currentUser?.id!,
        other_user: receiverId,
      })
      .select(`*`)
      .single();
    // (1-2) 메시지 보내기
    if (newDmChannel) {
      await supabase.from("dm_messages").insert({
        dm_id: newDmChannel.id,
        message,
        receiver_id: receiverId,
        sender_id: currentUser?.id!,
      });
  	}
  } else {
    // (2) 채팅방이 기존에 있는 경우
    // 해당 채팅방으로 메시지 바로 전송
    await supabase.from("dm_messages").insert({
      dm_id: dm_channel.data[0].id!,
      message,
      receiver_id: receiverId,
      sender_id: currentUser?.id!,
    });
 }

따라서 없을 경우 메시지를 보내기 전 채팅방을 먼저 구성하는 것이 우선되어야한다.

해당 로직은 메시지를 보낼 때 추가하였다.

 

미리 만들어 둔 supabase rpc 함수를 통해 상대방과 나의 기존의 채팅방 정보가 있는지 체크하고,

있다면 우선해서 dm_channels 테이블에 채팅방을 생성한다.

그 후 메시지를 보낸다.

기존에 채팅방이 있는 경우에는 바로 메시지를 보내면 되겠다.