From 717e1157adf0e6de44058a8624665703e248d567 Mon Sep 17 00:00:00 2001 From: nimod7890 Date: Wed, 21 Aug 2024 14:21:12 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=A0=91=EC=86=8D=20=EC=8B=9C=20?= =?UTF-8?q?=EA=B8=B0=EB=8C=80=ED=8F=89=20=EC=B1=84=ED=8C=85=20=EB=82=B4?= =?UTF-8?q?=EC=97=AD=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/src/utils/socket.ts | 9 ++--- .../user/src/hooks/socket/useChatSocket.ts | 39 +++---------------- packages/user/src/services/socket.ts | 35 +++++++++-------- 3 files changed, 29 insertions(+), 54 deletions(-) diff --git a/packages/common/src/utils/socket.ts b/packages/common/src/utils/socket.ts index 907edc01..54f86ab8 100644 --- a/packages/common/src/utils/socket.ts +++ b/packages/common/src/utils/socket.ts @@ -13,6 +13,7 @@ export interface SendMessageProps { destination: string; body: unknown; headers?: Record; + requiresAuth?: boolean; } export default class Socket { @@ -68,19 +69,17 @@ export default class Socket { } } - async sendMessages({ destination, body }: SendMessageProps) { - if (!this.token) { + async sendMessages({ destination, body, headers, requiresAuth = true}: SendMessageProps) { + if (requiresAuth && !this.token) { throw new Error('로그인 후 참여할 수 있어요!'); } const messageProps = { destination, + headers, body: JSON.stringify(body), }; - if (!this.client.connected) { - await this.connect(); - } this.client.publish(messageProps); } diff --git a/packages/user/src/hooks/socket/useChatSocket.ts b/packages/user/src/hooks/socket/useChatSocket.ts index 3996d8ee..a39751ce 100644 --- a/packages/user/src/hooks/socket/useChatSocket.ts +++ b/packages/user/src/hooks/socket/useChatSocket.ts @@ -14,8 +14,6 @@ export default function useChatSocket() { const [storedChatList, storeChatList] = useChatListStorage(); const [chatList, setChatList] = useState(storedChatList); - const [isChatListSubscribed, setIsChatListSubscribed] = useState(false); - useEffect(() => storeChatList(chatList), [chatList]); const handleIncomingMessage: SocketSubscribeCallbackType = useCallback( @@ -35,11 +33,12 @@ export default function useChatSocket() { [setChatList], ); - const socketClient = socketManager.getSocketClient(); - + const handleSendMessage = useCallback( (content: string) => { try { + const socketClient = socketManager.getSocketClient(); + const chatMessage = { content }; socketClient.sendMessages({ @@ -54,7 +53,7 @@ export default function useChatSocket() { }); } }, - [socketClient], + [], ); const handleIncomingChatHistory: SocketSubscribeCallbackType = useCallback( @@ -63,37 +62,11 @@ export default function useChatSocket() { }, [setChatList], ); - - const handleRequestForSendingChatHistory = useCallback(async () => { - try { - await socketClient.sendMessages({ - destination: CHAT_SOCKET_ENDPOINTS.PUBLISH_CHAT_LIST, - body: {}, - }); - setIsChatListSubscribed(true); - } catch (error) { - const errorMessage = (error as Error).message; - toast({ - description: - errorMessage.length > 0 ? errorMessage : '기대평 내역을 불러오는 중 문제가 발생했습니다.', - }); - } - }, [setIsChatListSubscribed, socketClient]); - - const handleReceiveChatList: SocketSubscribeCallbackType = useCallback( - (data: unknown) => { - if (!isChatListSubscribed) { - handleRequestForSendingChatHistory(); - } - handleIncomingChatHistory(data); - }, - [isChatListSubscribed], - ); - + return { onReceiveMessage: handleIncomingMessage, onReceiveBlock: handleIncomingBlock, - onReceiveChatList: handleReceiveChatList, + onReceiveChatList: handleIncomingChatHistory, onSendMessage: handleSendMessage, messages: chatList, }; diff --git a/packages/user/src/services/socket.ts b/packages/user/src/services/socket.ts index 28cb6d9e..f524cb7e 100644 --- a/packages/user/src/services/socket.ts +++ b/packages/user/src/services/socket.ts @@ -1,11 +1,10 @@ import { - ACCESS_TOKEN_KEY, CHAT_SOCKET_ENDPOINTS, RACING_SOCKET_ENDPOINTS, } from '@softeer/common/constants'; -import { Cookie, Socket, SocketSubscribeCallbackType } from '@softeer/common/utils'; +import { Socket, SocketSubscribeCallbackType } from '@softeer/common/utils'; import { SOCKET_BASE_URL } from 'src/constants/environments.ts'; -import CustomError from 'src/utils/error.ts'; +import { toast } from 'src/hooks/useToast.ts'; class SocketManager { private socketClient: Socket | null = null; @@ -18,10 +17,6 @@ class SocketManager { private onReceiveStatus: SocketSubscribeCallbackType | null = null; - constructor(token: string | null) { - this.initializeSocketClient(token); - } - private initializeSocketClient(token?: string | null) { this.socketClient = new Socket(SOCKET_BASE_URL, token); } @@ -43,10 +38,6 @@ class SocketManager { onReceiveStatus: SocketSubscribeCallbackType; onReceiveChatList: SocketSubscribeCallbackType; }) { - if (this.socketClient) { - await this.socketClient.disconnect(); - } - this.initializeSocketClient(token); this.onReceiveChatList = onReceiveChatList; @@ -56,9 +47,16 @@ class SocketManager { try { await this.socketClient!.connect(); - this.subscribeToTopics(); } catch (error) { - throw new CustomError('서버에서 데이터를 불러오는 데 실패했습니다.', 500); + toast({ description: '새로고침 후 다시 시도해주세요.' }); + console.error('[Socket Connection Error]', error); + } + + try { + await this.subscribeToTopics(); + } catch (error) { + toast({ description: '새로고침 후 다시 시도해주세요.' }); + console.error('[Socket Subscribe Error]', error); } } @@ -72,13 +70,18 @@ class SocketManager { }); } - subscribeToTopics() { + async subscribeToTopics() { if (this.socketClient && this.socketClient.client.connected) { if (this.onReceiveChatList) { - this.socketClient.subscribe({ + await this.socketClient.subscribe({ destination: CHAT_SOCKET_ENDPOINTS.SUBSCRIBE_CHAT_LIST, callback: this.onReceiveChatList, }); + this.socketClient.sendMessages({ + destination: CHAT_SOCKET_ENDPOINTS.PUBLISH_CHAT_LIST, + body: {}, + requiresAuth: false, + }); } if (this.onReceiveMessage) { @@ -105,5 +108,5 @@ class SocketManager { } } -const socketManager = new SocketManager(Cookie.getCookie(ACCESS_TOKEN_KEY)); +const socketManager = new SocketManager(); export default socketManager; From f0bb1d670ae6b1390cc2df0e37011bbf6a606275 Mon Sep 17 00:00:00 2001 From: nimod7890 Date: Wed, 21 Aug 2024 14:25:09 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=86=8C=EC=BC=93=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EC=97=90=EB=9F=AC=20=ED=83=90=EC=A7=80=EC=9A=A9=20?= =?UTF-8?q?=EA=B5=AC=EB=8F=85=20=EA=B2=BD=EB=A1=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/src/constants/socket.ts | 2 ++ packages/user/src/services/socket.ts | 5 +++++ 2 files changed, 7 insertions(+) diff --git a/packages/common/src/constants/socket.ts b/packages/common/src/constants/socket.ts index 258f895a..dd2b444b 100644 --- a/packages/common/src/constants/socket.ts +++ b/packages/common/src/constants/socket.ts @@ -9,6 +9,8 @@ export const CHAT_SOCKET_ENDPOINTS = { PUBLISH_NOTICE: '/app/chat.sendNotice', SUBSCRIBE_CHAT_LIST: '/user/queue/chatHistory', PUBLISH_CHAT_LIST: '/app/chat.getHistory', + SUBSCRIBE_ERROR: '/user/queue/errors', + } as const; export const RACING_SOCKET_ENDPOINTS = { diff --git a/packages/user/src/services/socket.ts b/packages/user/src/services/socket.ts index f524cb7e..0a9cb54f 100644 --- a/packages/user/src/services/socket.ts +++ b/packages/user/src/services/socket.ts @@ -72,6 +72,11 @@ class SocketManager { async subscribeToTopics() { if (this.socketClient && this.socketClient.client.connected) { + this.socketClient.subscribe({ + destination: CHAT_SOCKET_ENDPOINTS.SUBSCRIBE_ERROR, + callback: (errorMessage) => console.error(errorMessage), + }); + if (this.onReceiveChatList) { await this.socketClient.subscribe({ destination: CHAT_SOCKET_ENDPOINTS.SUBSCRIBE_CHAT_LIST,