Fix socket connection and routing issues

H1B0B0 · Feb 13, 2024 · 922456a · 922456a
1 parent 4f0cbcd
commit 922456a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/frontend/src/components/Room/AddRoomPanel.tsx b/frontend/src/components/Room/AddRoomPanel.tsx
@@ -42,8 +42,8 @@ function AddRoomPanel({ hideAddRoomPanel }: any) {
 
     setMyRooms([...myRooms, newRoom]);
     hideAddRoomPanel(true);
-    router.replace(`/chat/${joinId}`);
     socket?.emit("join_room", joinId);
+    router.replace(`/chat/${joinId}`);
   };
 
   const handleSubmitCreate = (e: any) => {
@@ -58,8 +58,8 @@ function AddRoomPanel({ hideAddRoomPanel }: any) {
     };
     setMyRooms([...myRooms, newRoom]);
     hideAddRoomPanel(true);
-    router.replace(`/chat/${id}`);
     socket?.emit("join_room", id, title);
+    router.replace(`/chat/${id}`);
   };
 
   return (

diff --git a/frontend/src/contexts/SocketContext.tsx b/frontend/src/contexts/SocketContext.tsx
@@ -42,17 +42,22 @@ export default function SocketProvider({
       router.replace("/");
       return;
     }
-    let socket = socketIO.connect(process.env.NEXT_PUBLIC_BASE_URL!);
-    socket.on("receive_message", (data: IMessage) => {
-      setMessages((prev) => {
-        const newMessages = { ...prev };
-        newMessages[data.roomId] = [...(newMessages[data.roomId] ?? []), data];
-        return newMessages;
+    if (!socket) {
+      let socket = socketIO.connect(process.env.NEXT_PUBLIC_BASE_URL!);
+      socket.on("receive_message", (data: IMessage) => {
+        setMessages((prev) => {
+          const newMessages = { ...prev };
+          newMessages[data.roomId] = [
+            ...(newMessages[data.roomId] ?? []),
+            data,
+          ];
+          return newMessages;
+        });
       });
-    });
-    socket.on("users_response", (data) => setRoomUsers(data));
-    socket?.emit("change_name", username);
-    setSocket(socket);
+      socket.on("users_response", (data) => setRoomUsers(data));
+      socket?.emit("change_name", username);
+      setSocket(socket);
+    }
   }, []);
 
   useEffect(() => {