diff --git a/frontend/src/hooks/useBackendData.ts b/frontend/src/hooks/useBackendData.ts index d347f93..a69ac5e 100644 --- a/frontend/src/hooks/useBackendData.ts +++ b/frontend/src/hooks/useBackendData.ts @@ -7,20 +7,22 @@ import useWebSocketConnection from './useWebSocketConnection' function useBackendData(userInfo: UserInfo) { console.log('[Rooms] useBackendData') - const { onMessage, sendMessage, disconnect } = useWebSocketConnection(userInfo) + const { onMessage, cleanUpOnMessage, sendMessage, disconnect } = useWebSocketConnection(userInfo) const { roomData, setRoomData } = useRoomData() const { addChatMessage } = useAllChat() useEffect(() => { console.log('[Rooms] add onMessage Listener') - onMessage((messageString) => { + const messageCallback = (messageString: string) => { console.log('[Rooms] message from ws', messageString) const messageObject = JSON.parse(messageString) !!messageObject.roomsData && setRoomData(messageObject) !!messageObject.content && addChatMessage(messageObject) return disconnect - }) + } + onMessage(messageCallback) + return () => cleanUpOnMessage(messageCallback) }, []) return { roomData, sendMessage } diff --git a/frontend/src/hooks/useWebSocketConnection.ts b/frontend/src/hooks/useWebSocketConnection.ts index 77aa0b1..3fbb7bb 100644 --- a/frontend/src/hooks/useWebSocketConnection.ts +++ b/frontend/src/hooks/useWebSocketConnection.ts @@ -37,8 +37,12 @@ function useWebSocketConnection(userInfo: UserInfo) { ) const disconnect = useCallback(webSocketConnection.close, [webSocketConnection]) + const cleanUpOnMessage = useCallback((callbackToRemove: any) => { + console.log('[Rooms] cleanUpOnMessage') + webSocketConnection.removeEventListener('message', callbackToRemove) + }, [webSocketConnection]) - return { onMessage, sendMessage, disconnect } + return { onMessage, cleanUpOnMessage, sendMessage, disconnect } } export default useWebSocketConnection