👊 웹소켓의 채팅 데이터와 REST API의 채팅 데이터를 함께 관리하기

분야	작성자	작성일
FE	조배경	24년 12월 04일

채팅 정렬 기능 도입 이전에 채팅 데이터 관리 방법

우리 서비스의 채팅은, 웹소켓으로는 실시간으로 데이터를 송수신하고 rest api로는 이전 데이터를 가져올 수 있다.

각각 받는 데이터를 한번에 관리하고자 채팅 데이터의 상태를 chatData에 저장했다.

이 chatData에는 웹소켓이 제공하는 최신 채팅 20개와, 무한스크롤해서 가져오는 rest api의 채팅 데이터를 누적하여 저장한다.

이때, 웹소켓은 계속해서 실시간 데이터를 가져오고, 최신 데이터 20개를 유지한다.

그렇기 때문에 실시간 데이터를 송수신할 때마다 rest api는 웹소켓이 갖고 있던 데이터 중 가장 마지막에 있는 데이터를 기억하고, 이를 가져와야한다.

즉 웹소켓 데이터를 새로 받아올 때마다 latestChatId를 업데이트하여, 해당 지점부터 rest api로 다시 가져온다.

단순히 채팅 송수신, 무한스크롤, 좋아요 기능만 있을 때에는 이 방법이 가능했다.

API에 채팅 정렬 기능이 추가된다면?

하지만 채팅을 좋아요순으로 정렬하는 api를 추가해본다면 어떨까?

chatData가 모두 정렬이 적용돼야 하므로, chatData에 속한 웹소켓으로 받아온 데이터도 정렬이 되어야 한다.

현재 구조로는 주어진 api는 api로 받아온 데이터에 한해서만 정렬이 될 것이다.

chatData의 상위 20개는 항상 웹소켓이기 때문에, 이 방식대로라면 웹소켓 데이터는 정렬이 되지 않아 기대와는 다른 화면이 나올 것이다.

받아오는 데이터의 역할을 명확히 하자.

현 상황으로 각 데이터의 역할은 다음과 같다.

• 웹소켓 데이터: 상위 20개 데이터 목록 + 실시간으로 데이터 송수신
• rest api의 데이터: 무한스크롤로 받는 이전 채팅 데이터 목록

데이터 목록을 웹소켓과 rest api 모두 받고 있는데, rest api에만 책임을 부여하자.

그렇게 해서 다시 생각한 역할을 다음과 같다.

• 웹소켓 데이터: 실시간으로 데이터 송수신(1개씩 받게됨)
• rest api의 데이터: 실시간을 제외한 모든 채팅 데이터 목록

이렇게 역할을 나누면, 좋아요순으로 다시 정렬 요청을 한다면 모든 데이터에 반영될 것이다.

useInfiniteQuery의 기능 활용하기

기존에는, useInfiniteQuery를 사용하는 쪽에서 커스텀하여 latestChatId를 보내줬는데, useInfiniteQuery의 기능을 활용해서 바꿔보자.

받아와야하는 채팅 목록 중 가장 최신의 채팅의 id를 page 처럼 쓰고 있으니, 이를 녹여내자.

export const useGetChatList = ({
  stockId,
  latestChatId,
  pageSize,
  order,
}: GetChatListRequest) => {
  return useInfiniteQuery({
    queryKey: ['chatList', stockId, order],
    queryFn: ({ pageParam }) =>
      getChatList({
        stockId,
        latestChatId: pageParam?.latestChatId,
        pageSize,
        order,
      }),
    // lastestChatId를 nextPageParam으로써 넘기고자 함
    getNextPageParam: (lastPage) => 
      lastPage.hasMore
        ? {
            latestChatId: lastPage.chats[lastPage.chats.length - 1].id,
          }
        : undefined,
    // initialPageParam 지정
    initialPageParam: { latestChatId },
    // select 옵션을 통해 필요한 데이터만 뽑아서 사용
    select: (data) => ({
      pages: [...data.pages].flatMap((page) => page.chats),
      pageParams: [...data.pageParams],
    }),
  });
};

컴포넌트에서는 어떻게 사용하면 될까?

const { fetchNextPage, data, status, isFetching, hasNextPage } =
  useGetChatList({
    stockId,
    order,
  });

// IntersectionObserver에 의해 감지되면 실행
const fetchMoreChats = () => {
  fetchNextPage(); // 다음 페이지 실행

  // 응답이 성공적이면 데이터 저장
  if (status === 'success') {
    setChatData(data.pages);
  }
};

const { ref } = useInfiniteScroll({
  onIntersect: fetchMoreChats,
  hasNextPage,
});

• useGetChatList를 불러온다.
• observer를 통해 특정 영역에 닿는 것을 감지하고 데이터를 패칭한다.

// 정렬을 하여 데이터가 변한다면 새롭게 저장해야한다.
useEffect(() => {
  if (status === 'success') {
    setChatData(data.pages.flat());
  }
}, [data, status]);

• 보통 무한스크롤은 observer로 감지되면 fetchNextPage를 실행하는데, 정렬로 인한 데이터 변경은 따로 감지하지 못한다.
• 따라서 useEffect로 감싸서 데이터가 변화하면 새로 저장한다.

const handleChat = useCallback((message: ChatDataResponse | ChatData) => {
	// chats 배열로 오는 응답은 return
  if ('chats' in message) return; 

	// 실시간으로 응답오는 단일 메시지만 chatData에 저장
  const validatedSingleChat = ChatDataSchema.parse(message);
  if (validatedSingleChat) {
    setChatData((prev) => [{ ...validatedSingleChat } as ChatData, ...prev]);
  }
}, []);

• 웹소켓에서 채팅 브로드캐스트 이벤트가 발생하면 실행되는 함수이다.
• 상위 20개 목록은 chats 배열로 오고, 단일 메시지 송수신은 단일 객체로 오기 때문에 이 점을 가지고 검사를 했다.