Reuse socket

Author: ruiqi7

backend/matching-service/src/handlers/matchHandler.ts

@@ -4,6 +4,7 @@ import { v4 as uuidv4 } from "uuid";
 import {
   MATCH_ACCEPTANCE_TIMEOUT,
   MATCH_FOUND,
+  MATCH_IN_PROGRESS,
   MATCH_SUCCESSFUL,
   MATCH_TIMEOUT,
   MATCH_UNSUCCESSFUL,
@@ -30,7 +31,10 @@ export const createMatchItem = (socket: Socket, matchRequest: MatchRequest) => {
     acceptedMatch: false,
   };
 
-  appendToMatchQueue(matchQueueItem);
+  const result = appendToMatchQueue(matchQueueItem);
+  if (!result) {
+    socket.emit(MATCH_IN_PROGRESS);
+  }
 };
 
 export const createMatch = (matchItems: MatchItem[]) => {
@@ -96,3 +100,9 @@ export const handleMatchDecline = (matchId: string) => {
   io.to(matchId).emit(MATCH_UNSUCCESSFUL);
   delete matches[matchId];
 };
+
+export const isUserMatched = (userId: string): boolean => {
+  return !!Object.values(matches).find(
+    (match) => match.item1.user.id === userId || match.item2.user.id === userId
+  );
+};

backend/matching-service/src/handlers/queueHandler.ts

@@ -1,5 +1,5 @@
 import { MatchItem } from "../types/matchTypes";
-import { createMatch } from "./matchHandler";
+import { createMatch, isUserMatched } from "./matchHandler";
 
 /* Basic queue set-up for websocket testing (feel free to replace with the actual queueing mechanism) */
 
@@ -10,6 +10,9 @@ setInterval(() => {
 }, 5000);
 
 const findMatch = () => {
+  matchQueue.forEach((item) =>
+    console.log(`${item.user.username} is ${item.socket.connected}`)
+  );
   if (matchQueue.length < 2) {
     return;
   }
@@ -30,7 +33,17 @@ const findMatch = () => {
 };
 
 export const appendToMatchQueue = (item: MatchItem) => {
-  if (!matchQueue.find((queueItem) => queueItem.user.id === item.user.id)) {
-    matchQueue.push(item);
+  if (
+    matchQueue.find(
+      (queueItem) =>
+        queueItem.user.id === item.user.id && queueItem.socket.connected
+    ) ||
+    isUserMatched(item.user.id)
+  ) {
+    return false;
   }
+
+  console.log(item.user.username);
+  matchQueue.push(item);
+  return true;
 };

backend/matching-service/src/utils/constants.ts

@@ -2,6 +2,7 @@
 export const MATCH_REQUEST = "match_request";
 export const MATCH_TIMEOUT = "match_timeout";
 export const MATCH_FOUND = "match_found";
+export const MATCH_IN_PROGRESS = "match_in_progress";
 export const MATCH_RECEIVED = "match_received";
 export const MATCH_ACCEPTED = "match_accepted";
 export const MATCH_DECLINED = "match_declined";

frontend/src/handlers/matchHandler.ts

@@ -1,8 +1,8 @@
-import { io, Socket } from "socket.io-client";
 import {
   MATCH_ACCEPTED,
   MATCH_DECLINED,
   MATCH_FOUND,
+  MATCH_IN_PROGRESS,
   MATCH_RECEIVED,
   MATCH_REQUEST,
   MATCH_SUCCESSFUL,
@@ -11,88 +11,114 @@ import {
   SOCKET_CLIENT_DISCONNECT,
   SOCKET_DISCONNECT,
   SOCKET_RECONNECT_FAILED,
+  SOCKET_RECONNECT_SUCCESS,
 } from "../utils/constants";
-import { User } from "../types/types";
+import { matchSocket } from "../utils/matchSocket";
 
-const SOCKET_URL = "http://localhost:3002";
+interface MatchUser {
+  id: string;
+  username: string;
+  profile?: string;
+}
 
 export class MatchHandler {
-  socket: Socket;
   matchId?: string;
+  user: MatchUser;
+  partner?: MatchUser;
 
-  constructor() {
-    this.socket = io(SOCKET_URL, {
-      reconnectionAttempts: 3,
-    });
+  constructor(user: MatchUser) {
+    this.user = user;
   }
 
-  findMatch = (
-    user: User,
-    complexities: string[],
-    categories: string[],
-    languages: string[],
-    timeout: number
+  private setMatchDetails = (
+    matchId: string,
+    user1: MatchUser,
+    user2: MatchUser
   ) => {
-    this.socket.emit(MATCH_REQUEST, {
-      user: {
-        id: user.id,
-        username: user.username,
-        profile: user.profilePictureUrl,
-      },
-      complexities: complexities,
-      categories: categories,
-      languages: languages,
-      timeout: timeout,
+    this.matchId = matchId;
+    user1.id !== this.user.id ? (this.partner = user1) : (this.partner = user2);
+
+    console.log(`Match ID: ${this.matchId}`);
+    console.log(`User: ${this.user!.username}`);
+    console.log(`Partner: ${this.partner!.username}`);
+  };
+
+  private openConnection = () => {
+    matchSocket.removeAllListeners();
+    this.initSocketListeners();
+    matchSocket.connect();
+  };
+
+  private closeConnection = () => {
+    matchSocket.removeAllListeners();
+    matchSocket.disconnect();
+  };
+
+  private initSocketListeners = () => {
+    matchSocket.on(MATCH_FOUND, ({ matchId, user1, user2 }) => {
+      this.setMatchDetails(matchId, user1, user2);
+      matchSocket.emit(MATCH_RECEIVED, this.matchId);
     });
 
-    this.socket.on(MATCH_FOUND, ({ matchId, user1, user2 }) => {
-      console.log(`Match ID: ${matchId}`);
-      console.log(`User 1: ${user1.username}`);
-      console.log(`User 2: ${user2.username}`);
-      this.matchId = matchId;
-      this.socket.emit(MATCH_RECEIVED, this.matchId);
+    matchSocket.on(MATCH_IN_PROGRESS, () => {
+      console.log("Matching in progress... / Match already found!");
     });
 
-    this.socket.on(MATCH_SUCCESSFUL, () => {
+    matchSocket.on(MATCH_SUCCESSFUL, () => {
       console.log("Match successful");
       this.closeConnection();
     });
 
-    this.socket.on(MATCH_UNSUCCESSFUL, () => {
+    matchSocket.on(MATCH_UNSUCCESSFUL, () => {
       console.log("Match unsuccessful");
       this.closeConnection();
     });
 
-    this.socket.on(MATCH_TIMEOUT, () => {
+    matchSocket.on(MATCH_TIMEOUT, () => {
       console.log("Match timeout");
       this.closeConnection();
     });
 
-    this.socket.on(SOCKET_DISCONNECT, (reason) => {
+    matchSocket.on(SOCKET_DISCONNECT, (reason) => {
       if (reason !== SOCKET_CLIENT_DISCONNECT) {
         console.log("Oops, something went wrong! Reconnecting...");
       }
     });
 
-    this.socket.io.on(SOCKET_RECONNECT_FAILED, () => {
+    matchSocket.io.on(SOCKET_RECONNECT_SUCCESS, () => {
+      console.log("Reconnected!");
+    });
+
+    matchSocket.io.on(SOCKET_RECONNECT_FAILED, () => {
       console.log("Oops, something went wrong! Please try again later.");
     });
   };
 
+  findMatch = (
+    complexities: string[],
+    categories: string[],
+    languages: string[],
+    timeout: number
+  ) => {
+    this.openConnection();
+    matchSocket.emit(MATCH_REQUEST, {
+      user: this.user,
+      complexities: complexities,
+      categories: categories,
+      languages: languages,
+      timeout: timeout,
+    });
+  };
+
   acceptMatch = () => {
-    this.socket.emit(MATCH_ACCEPTED, this.matchId);
+    matchSocket.emit(MATCH_ACCEPTED, this.matchId);
   };
 
   declineMatch = () => {
-    this.socket.emit(MATCH_DECLINED, this.matchId);
+    matchSocket.emit(MATCH_DECLINED, this.matchId);
   };
 
   stopMatch = () => {
     this.closeConnection();
   };
-
-  closeConnection = () => {
-    this.socket.removeAllListeners();
-    this.socket.disconnect();
-  };
 }

frontend/src/pages/Home/index.tsx

@@ -29,14 +29,20 @@ import { User } from "../../types/types";
 import { MatchHandler } from "../../handlers/matchHandler";
 
 const Home: React.FC = () => {
-  const user = useOutletContext<User>();
   const [complexities, setComplexities] = useState<string[]>([]);
   const [categories, setCategories] = useState<string[]>([]);
   const [languages, setLanguages] = useState<string[]>([]);
   const [timeout, setTimeout] = useState<number>(30);
 
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  const user = useOutletContext<User>();
+  const matchHandler = new MatchHandler({
+    id: user.id,
+    username: user.username,
+    profile: user.profilePictureUrl,
+  });
+
   useEffect(() => {
     getQuestionCategories(dispatch);
   }, []);
@@ -265,19 +271,14 @@ const Home: React.FC = () => {
           //   categories.length == 0 ||
           //   languages.length == 0
           // }
-          onClick={() => {
-            const matchHandler = new MatchHandler();
-            matchHandler.findMatch(
-              user,
-              complexities,
-              categories,
-              languages,
-              timeout
-            );
-          }}
+          onClick={() =>
+            matchHandler.findMatch(complexities, categories, languages, timeout)
+          }
         >
           Find my match!
         </Button>
+        <Button onClick={() => matchHandler.acceptMatch()}>Accept</Button>
+        <Button onClick={() => matchHandler.declineMatch()}>Decline</Button>
       </Card>
     </AppMargin>
   );

frontend/src/utils/constants.ts

@@ -86,12 +86,14 @@ export const COLLABORATIVE_EDITOR_PATH = "/collaborative_editor.png";
 // Socket Events
 export const SOCKET_DISCONNECT = "disconnect";
 export const SOCKET_CLIENT_DISCONNECT = "io client disconnect";
+export const SOCKET_RECONNECT_SUCCESS = "reconnect";
 export const SOCKET_RECONNECT_FAILED = "reconnect_failed";
 
 // Match Events
 export const MATCH_REQUEST = "match_request";
 export const MATCH_TIMEOUT = "match_timeout";
 export const MATCH_FOUND = "match_found";
+export const MATCH_IN_PROGRESS = "match_in_progress";
 export const MATCH_RECEIVED = "match_received";
 export const MATCH_ACCEPTED = "match_accepted";
 export const MATCH_DECLINED = "match_declined";

frontend/src/utils/matchSocket.ts

@@ -0,0 +1,7 @@
+import { io } from "socket.io-client";
+
+const MATCH_SOCKET_URL = "http://localhost:3002";
+
+export const matchSocket = io(MATCH_SOCKET_URL, {
+  reconnectionAttempts: 3,
+});