From 5beb7d4cd57a08cec52100dbda9acdfb20c45af9 Mon Sep 17 00:00:00 2001
From: Bryan Loh <bryanlohxz@gmail.com>
Date: Sat, 28 Oct 2023 04:01:33 +0800
Subject: [PATCH] Fix socket io namespace clash in production

---
 .github/workflows/deploy-production.yml     | 2 +-
 collaboration-service/src/index.js          | 5 ++++-
 compose.yml                                 | 2 +-
 frontend-service/src/pages/Collaboration.js | 5 +++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/deploy-production.yml b/.github/workflows/deploy-production.yml
index 874ad6ad..fdbe18e9 100644
--- a/.github/workflows/deploy-production.yml
+++ b/.github/workflows/deploy-production.yml
@@ -40,7 +40,7 @@ jobs:
           export REACT_APP_QUESTIONS_SERVICE_HOST=http://peerprep.bryanlohxz.com/api/questions-service
           export REACT_APP_USERS_SERVICE_HOST=http://peerprep.bryanlohxz.com/api/users-service
           export REACT_APP_MATCHMAKING_SERVICE_HOST=ws://peerprep.bryanlohxz.com/api/matchmaking-service
-          export REACT_APP_COLLABORATION_SERVICE_HOST=ws://peerprep.bryanlohxz.com/api/collaboration-service
+          export REACT_APP_COLLABORATION_SERVICE_HOST=http://peerprep.bryanlohxz.com
           export CI=false
           yarn build
       - name: Set up Git
diff --git a/collaboration-service/src/index.js b/collaboration-service/src/index.js
index 8f74848e..cebc7814 100644
--- a/collaboration-service/src/index.js
+++ b/collaboration-service/src/index.js
@@ -4,7 +4,10 @@ import NodeCache from "node-cache";
 import { Server } from "socket.io";
 
 const httpServer = createServer();
-const io = new Server(httpServer, { cors: { origin: "*" } });
+const io = new Server(httpServer, {
+  cors: { origin: "*" },
+  path: "/api/collaboration-service",
+});
 const roomQuestionsCache = new NodeCache();
 
 const clientEvents = {
diff --git a/compose.yml b/compose.yml
index 12d61292..bc07f6e0 100644
--- a/compose.yml
+++ b/compose.yml
@@ -12,7 +12,7 @@ services:
       REACT_APP_QUESTIONS_SERVICE_HOST: http://localhost:3001
       REACT_APP_USERS_SERVICE_HOST: http://localhost:3002
       REACT_APP_MATCHMAKING_SERVICE_HOST: ws://localhost:3003
-      REACT_APP_COLLABORATION_SERVICE_HOST: ws://localhost:3004
+      REACT_APP_COLLABORATION_SERVICE_HOST: http://localhost:3004
     volumes:
       - ./frontend-service:/app
     command: yarn start
diff --git a/frontend-service/src/pages/Collaboration.js b/frontend-service/src/pages/Collaboration.js
index d5edd8b1..9ac85732 100644
--- a/frontend-service/src/pages/Collaboration.js
+++ b/frontend-service/src/pages/Collaboration.js
@@ -61,6 +61,7 @@ const Collaboration = () => {
     const token = window.localStorage.getItem("token");
     const socket = io(`${process.env.REACT_APP_COLLABORATION_SERVICE_HOST}`, {
       query: { difficulty, roomId, token },
+      path: "/api/collaboration-service",
     });
     setSocket(socket);
 
@@ -92,6 +93,10 @@ const Collaboration = () => {
     socket.on("disconnect", () => {
       return navigate("/matchmaking");
     });
+
+    return async () => {
+      socket.disconnect();
+    };
   }, [navigate, searchParams]);
 
   useEffect(() => {