[Next.js 14 + Supabase ] Supabase realtime (1)

 

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

Realtime | Supabase Docs

 

 

 

Realtime 에는 세 가지 방식이 있음 

 

Broadcast

Broadcast 방식은 모든 사용자에게 동일한 데이터를 전송하는 방식입니다.

이 방식은 채팅 시스템에서 실시간으로 메시지를 전송하거나, 다수의 사용자에게 동시에 알림을 보낼 때 유용합니다. Supabase의 Realtime 서비스는 이러한 Broadcast 방식을 지원하며, 사용자는 이를 이용하여 실시간 채팅 기능 등을 구현할 수 있습니다.

 

---

Presence

Presence 방식은 현재 연결된 사용자를 실시간으로 추적하는 방식입니다.

이 방식은 실시간 채팅에서 현재 접속 중인 사용자를 표시하거나, 게임에서 같은 세션에 있는 플레이어를 보여주는 등의 용도로 사용될 수 있습니다.

Supabase의 Realtime 서비스는 Presence를 지원하여, 사용자는 이를 활용하여 실시간 사용자 추적 기능을 구현할 수 있습니다.

 

---

Postgres Changes

Postgres Changes 방식은 데이터베이스에서 발생하는 변경 사항을 실시간으로 추적하는 방식입니다.

이를 통해 사용자는 데이터베이스의 상태 변경을 실시간으로 모니터링하고, 필요에 따라 즉각적인 반응을 할 수 있습니다. Supabase의 Realtime 서비스는 이러한 Postgres Changes를 지원하여, 사용자는 데이터베이스의 실시간 변경 사항 추적 기능을 구현할 수 있습니다.

 

 

---

 

 

채팅 목록을 구현하기 위해서 

 

chatActions.ts를 구현한다. 

 

admin api 에 접근하면 모든 유저들을 불러올 수 있다. 

"use server";

import { createServerSupabaseAdminClient } from "utils/supabase/server";

//모든 유저의 정보를 가져오기 위해서는  admin api 사용필요

export const getAllUsers = async () => {

  const supabase = await createServerSupabaseAdminClient();

  const {

    data: { users },

    error,

  } = await supabase.auth.admin.listUsers();

  if (error) {

    console.log(error);

    return [];

  }

  return users;

};

 

 

그리고 ChatPeopleList에서 

useQuery 를 사용한다. 

  //getAllUsers

  const getAllUsersQuery = useQuery({

    queryKey: ["users"],

    queryFn: async () => {

      const allUsers = await getAllUsers();

      console.log(allUsers);

      return allUsers;

    },

  });

 

 

콘솔을 확인하면 

supabase의 유저와 맞게  두명의 유저가 출력되는 것을 확인 가능하다. 

 

 

 

 

 

 

 

윈도우의 경우에는 

ctrl + shift +n  을 눌러서 시크릿 모드로 켜주고 

localhost 3000으로 들어간다 . 

 

 

 

실시간 채팅을 하기 위해서 

다른 유저로 로그인을 해서 두 명의 유저를 준비한다. 

 

 

 

 

 

이저 채팅방에는 모든 유저에서 현재 로그인한 유저를 제외한 사람들이 뜨면된다.

 

 chat- > page.tsx에서 

getSession 기능을 사용해서 현재 로그인 된 유저를 가져와서 그 유저를

chatPeopleList로 전달해준다. 

  const supabase = await createServerSupabaseClient();

  const {

    data: { session },

  } = await supabase.auth.getSession();

  return (

    <div className="w-full h-screen flex justify-center items-center">

      <ChatPeopleList loggedInUser={session?.user} />

      <ChatScreen />

    </div>

  );

}

 

 

그리고 ChatPeopleList에서 

현재 로그인 유저의 정보를 props로 받아주고 

export default function ChatPeopleList({ loggedInUser }) {

 

useQuery를 사용해서 모든 유저를 받아올때 filter를 사용해서 

본인만 제외한다. 

  //getAllUsers

  const getAllUsersQuery = useQuery({

    queryKey: ["users"],

    queryFn: async () => {

      const allUsers = await getAllUsers();

      console.log(allUsers);

      return allUsers.filter((user) => user.id !== loggedInUser.id);

    },

  });

 

그리고 그 리스트를 map을 통해서 뿌려주면

  return (

    <div className="h-screen min-w-60 flex flex-col bg-gray-50 ">

      {getAllUsersQuery.data?.map((user, index) => (

        <Person

          onclick={() => {

            setSelectedUserId(user.id);

            setSelectedUserIndex(index);

          }}

          index={index}

          isActive={selectedUserId === user.id}

          name={user.email.split("@")[0]}

          onChatScreen={false}

          onlineAt={new Date().toISOString()}

          userId={user.id}

        />

      ))}

 

 

그리고 그 리스트에서 특정 유저를 선택하면

 

그 유저와 대화한 내역이 출력돼야한다.

 

 그래서 action에 getUserById를 추가해주고 

유저 id를 전달받아 그 유저의 데이터만 가져오도록 한다.

export async function getUserById(userId) {

  const supabase = await createServerSupabaseAdminClient();

  const {

    data: { user },

    error,

  } = await supabase.auth.admin.getUserById(userId);

  if (error) {

    return null;

  }

  return user;

}

 

 

이제 채팅방 컴포넌트인

ChatScreen 에서 

 

유저의 데이터가 null이 아닐 경우에만 

내용이 출력되도록 수정해주면됨

export default function ChatScreen() {

  const selectedUserId = useRecoilValue(selectedUserIdState);

  const selectedUserIndex = useRecoilValue(selectedUserIndexState);

  const selectedUserQuery = useQuery({

    queryKey: ["user", selectedUserId],

    queryFn: () => getUserById(selectedUserId),

  });

  return selectedUserQuery.data !== null ? (

    <div className="w-full h-screen flex flex-col ">

      {/* 유저 영역 */}

      <Person

        index={selectedUserIndex}

        isActive={false}

        name={selectedUserQuery.data?.email?.split("@")?.[0]}

        onChatScreen={true}

        onlineAt={new Date().toISOString()}

        userId={selectedUserQuery.data?.id}

      />

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

https://lopunko.notion.site/137c1b4b997b48d0bb9218a074771044

로펀의 인프런 강의 | Notion