From f0d4a2d592b68e62eb1fd27f5582f296a1bbed2a Mon Sep 17 00:00:00 2001 From: shlee9999 <95556588+shlee9999@users.noreply.github.com> Date: Mon, 9 Dec 2024 14:10:31 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Feat:=20=EC=95=8C=EB=A6=BC=20=EA=B5=AC?= =?UTF-8?q?=EB=8F=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SendMessageForm/index.tsx | 1 + src/hooks/useSubscribe.ts | 143 +++++++++++++---------- 2 files changed, 80 insertions(+), 64 deletions(-) diff --git a/src/components/SendMessageForm/index.tsx b/src/components/SendMessageForm/index.tsx index 08478c6..480d090 100644 --- a/src/components/SendMessageForm/index.tsx +++ b/src/components/SendMessageForm/index.tsx @@ -24,6 +24,7 @@ export default function SendMessageForm({ chatRoomId, ...rest }: SendMessageForm if (!message.trim()) return sendMessage(message) $form.reset() + $form['message'].focus() } return ( diff --git a/src/hooks/useSubscribe.ts b/src/hooks/useSubscribe.ts index 5ee7aeb..f8016e5 100644 --- a/src/hooks/useSubscribe.ts +++ b/src/hooks/useSubscribe.ts @@ -2,6 +2,7 @@ import { InfiniteData, useQueryClient } from '@tanstack/react-query' import { useEffect } from 'react' import { useWebSocket } from '~/WebSocketContext' import { FetchChatMessageListResponse } from '~apis/chat/fetchChatMessageList' +import { CreateChatRoomResponse } from '~apis/chatRoom/createChatRoom' import { useHomePageData } from '~apis/main/useHomePageData' import { FetchNotificationListResponse } from '~apis/notification/fetchNotificationList' import { queryKey } from '~constants/queryKey' @@ -15,94 +16,108 @@ export default function useSubscribe() { const { isConnected, subscribe } = useWebSocket() const queryClient = useQueryClient() const { showNotification } = usePushNotificationStore() + useEffect(() => { if (isConnected) { - console.log('구독!') subscribe(`/user/queue/errors`, message => { const response = JSON.parse(message.body) console.log('에러 구독', response) }) subscribe(`/sub/message/${email}`, message => { - const response = JSON.parse(message.body) as { - data: { + const response = JSON.parse(message.body) + if (response.code === 1000) { + //* 첫 연결 시 모든 채팅방 반환 + type Data = { chatRoomId: number unreadCount: number - }[] - } - console.log('이메일 구독', response) - response.data.forEach(chatRoom => { - subscribe(`/sub/chat/${chatRoom.chatRoomId}`, message => { - const res = JSON.parse(message.body) as APIResponse - console.log('채팅방 구독', res) - queryClient.invalidateQueries({ - queryKey: queryKey.social.chatRoomList(), - }) - if (res.data.chatId) - queryClient.setQueryData>>( - queryKey.social.chatMessageList(res.data.chatRoomId), - oldData => { - if (!oldData) { - const initialPage: APIResponse = { - code: 200, - status: 'OK', - message: 'Success', - data: { - content: [res.data], - size: 1, - number: 0, - numberOfElements: 1, - first: true, - last: true, - empty: false, - sort: { - empty: true, - sorted: false, - unsorted: true, - }, - pageable: { - offset: 0, + } + const data = response.data as Data[] + + console.log('이메일 구독', response) + + data.forEach((chatRoom: Data) => { + subscribe(`/sub/chat/${chatRoom.chatRoomId}`, message => { + const res = JSON.parse(message.body) as APIResponse + console.log('채팅방 구독', res) + queryClient.invalidateQueries({ + queryKey: queryKey.social.chatRoomList(), + }) + if (res.data.chatId) + queryClient.setQueryData>>( + queryKey.social.chatMessageList(res.data.chatRoomId), + oldData => { + if (!oldData) { + const initialPage: APIResponse = { + code: 200, + status: 'OK', + message: 'Success', + data: { + content: [res.data], + size: 1, + number: 0, + numberOfElements: 1, + first: true, + last: true, + empty: false, sort: { empty: true, sorted: false, unsorted: true, }, - pageSize: 1, - paged: true, - pageNumber: 0, - unpaged: false, + pageable: { + offset: 0, + sort: { + empty: true, + sorted: false, + unsorted: true, + }, + pageSize: 1, + paged: true, + pageNumber: 0, + unpaged: false, + }, }, - }, + } + return { + pages: [initialPage], + pageParams: [null], + } } return { - pages: [initialPage], - pageParams: [null], - } - } - return { - ...oldData, - pages: oldData.pages.map((page, index) => { - if (index === 0) { - return { - ...page, - data: { - ...page.data, - content: [...page.data.content, res.data], - numberOfElements: page.data.numberOfElements + 1, - }, + ...oldData, + pages: oldData.pages.map((page, index) => { + if (index === 0) { + return { + ...page, + data: { + ...page.data, + content: [...page.data.content, res.data], + numberOfElements: page.data.numberOfElements + 1, + }, + } } - } - return page - }), + return page + }), + } } - } - ) + ) + }) }) - }) + } + if (response.code === 1001) { + //* 첫 연결 이후부터 새로운 채팅방 생성 시 + const data = response.data as CreateChatRoomResponse + //todo 새로운 채팅방 추가 + } }) - subscribe(`sub/notification/${email}`, message => { + subscribe(`/sub/notification/${email}`, message => { const response = JSON.parse(message.body) as APIResponse + console.log('알림 구독') + if (!response.data.content) { + return + } showNotification(response.data.content) console.log(response) queryClient.setQueryData>>(