240812 TIL

join으로 데이터 받아오기

기존의 channel_id와 channel 정보를 따로 받아오는 방식에서 join으로 변경해주었다.

    const { data, error } = await supabase
      .from('chat_subscribe')
      .select(`
        created_at,
        channel_id,
        chat_channels(
          *
        )
        `)
      .eq('user_id', user_id)

---

채팅목록 실시간으로 업데이트

채팅의 last message도 실시간으로 업데이트 되게 하였다.

  const getlastMessage = async (channel_id: number, owner_id: string): Promise<{ time: string, message: string } | null> => {
    //유저의 마지막 대화 불러오기
    const user_id = await userdata.id;
    if (owner_id === user_id) {
      //채널주
      const { data, error } = await supabase
        .from('chat_messages')
        .select('*')
        .eq("channel_id", channel_id)
        .order('created_at', { ascending: false })
        .limit(1)
        .maybeSingle();
      if (!data) {
        return { time: '', message: '대화를 시작해보세요' }
      } else {
        const message = JSON.parse(JSON.stringify(data.content)).message as string;
        const time = data.created_at.slice(11, 16) as string;
        return { time, message }
      }
    } else {
      //팬
      const { data, error } = await supabase
        .from('chat_messages')
        .select('*')
        .eq("channel_id", channel_id)
        .in("user_id", [user_id, owner_id])
        .order('created_at', { ascending: false })
        .limit(1)
        .maybeSingle();
      if (!data) {
        return { time: '', message: '대화를 시작해보세요' }
      } else {
        const message = JSON.parse(JSON.stringify(data.content)).message as string;
        const time = data.created_at.slice(11, 16) as string;
        return { time, message }
      }
    }
  }

  //실시간
  const receiveChatMessage = async () => {
    const user_id = await userdata.id;
    const channels = supabase
      .channel("changes")
      .on(
        "postgres_changes",
        {
          event: "INSERT",
          schema: "public",
          table: "chat_messages",
          filter: `channel_id=in.(${channelIdList})`
        },
        (payload) => {
          const newMessage = payload.new;
          const message = JSON.parse(JSON.stringify(newMessage.content)).message as string;
          const time = newMessage.created_at.slice(11, 16) as string;
          if (myChannel && newMessage.channel_id === myChannel.channel_id) {
            setMyChannel({
              ...myChannel,
              created_at: time,
              message: message
            })
          } else {
            if (chatListData) {
              setChatListData(chatListData?.map((pre) => {
                if (pre) {
                  if (pre?.channel_id === newMessage.channel_id && (newMessage.user_id === user_id || newMessage.user_id === pre?.owner_id)) {
                    return {
                      ...pre,
                      created_at: time,
                      message: message
                    }
                  } else {
                    return pre;
                  }
                }
              }))
            }
          }
        }
      )
      .subscribe();
  };

---

created_at 기준으로 필터링

내가 채팅을 구독한 시점을 받아와 메세지 필터링에 적용시켜주었다.

  const checkMySubCreatedAtTime = async (): Promise<String | null> => {
    const user_id = await userdata.id;
    const { data, error } = await supabase
      .from("chat_subscribe")
      .select("created_at")
      .eq("channel_id", channel_id)
      .eq("user_id", user_id)
      .single();
    if (error) {
      console.log(error);
      return null;
    } else {
      return data.created_at;
    }
  };

생성 시점을 반환해주고

      const created_at_time = await checkMySubCreatedAtTime();
      const { data, error } = await supabase
        .from("chat_messages")
        .select("*")
        .in("user_id", [user_id, influ_id])
        .eq("channel_id", channel_id)
        .order('created_at', { ascending: true })
        .gt('created_at', created_at_time);

필터링에 적용시켜준다.