PEER-232: Add working WS impl

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

backend/matching/src/workers/matcher.ts

@@ -72,16 +72,9 @@ async function processMatch(
       // Notify both sockets
       const { ...matchItems } = getMatchItems({ userId1: requestorUserId, userId2: matchedUserId });
 
-      const sendMatchLogic = (socketPort: string) => {
-        sendNotif([socketPort], MATCHING_EVENT.SUCCESS, matchItems);
-        sendNotif([socketPort], MATCHING_EVENT.DISCONNECT);
-      };
-
-      // TODO: If client disconnected, stop sending to requestor
-      sendMatchLogic(matchedSocketPort);
-      setTimeout(() => {
-        sendMatchLogic(requestorSocketPort);
-      }, 1000);
+      sendNotif([matchedSocketPort, requestorSocketPort], MATCHING_EVENT.SUCCESS, matchItems);
+      sendNotif([matchedSocketPort, requestorSocketPort], MATCHING_EVENT.DISCONNECT);
+
       await logQueueStatus(logger, redisClient, `Queue Status After Matching: <PLACEHOLDER>`);
       return true;
     }

backend/matching/src/ws/handlers.ts

@@ -5,7 +5,7 @@ import { logger } from '@/lib/utils';
 import { queueingService } from '@/services';
 import type { IRedisClient, IRequestMatchEvent } from '@/types';
 
-import { MATCHING_EVENT,WS_EVENT } from './events';
+import { MATCHING_EVENT, WS_EVENT } from './events';
 
 type ISocketIOServer<T> = Server<DefaultEventsMap, DefaultEventsMap, DefaultEventsMap, T>;
 type ISocketIOSocket<T> = Socket<DefaultEventsMap, DefaultEventsMap, DefaultEventsMap, T>;
@@ -56,31 +56,37 @@ export const queueEventHandler =
       (!payload.topic && !payload.difficulty) ||
       (payload.topic && !Array.isArray(payload.topic))
     ) {
-      socket.emit(MATCHING_EVENT.ERROR, `Payload for ${WS_EVENT.START_QUEUING} is invalid.`);
+      const message = `Payload for ${WS_EVENT.START_QUEUING} is invalid.`;
+      logger.warn(message);
+      socket.emit(MATCHING_EVENT.ERROR, message);
       return;
     }
 
     // 3. Start Queuing
-    if (!redisClient || !redisClient.isOpen || !redisClient.isReady) {
-      try {
+    try {
+      if (!redisClient || !redisClient.isOpen || !redisClient.isReady) {
         redisClient = await client.connect();
-        const { userId, difficulty, topic } = payload;
-        const timestamp = `${Date.now()}`;
-        await queueingService(redisClient, {
-          userId,
-          difficulty,
-          topic,
-          socketPort: roomId,
-          timestamp,
-        });
-      } catch (error) {
-        const { name, message, stack, cause } = error as Error;
-        logger.error({ name, message, stack, cause }, `An error occurred connecting to the client`);
-        socket.emit(MATCHING_EVENT.ERROR, 'Error connecting to client');
-        return;
       }
-    }
 
-    socket.emit(MATCHING_EVENT.QUEUED);
-    logQueueStatus(logger, redisClient, `Queue Status Before Matching: <PLACEHOLDER>`);
+      const { userId, difficulty, topic } = payload;
+      const timestamp = `${Date.now()}`;
+      await queueingService(redisClient, {
+        userId,
+        difficulty,
+        topic,
+        socketPort: roomId,
+        timestamp,
+      });
+      socket.emit(MATCHING_EVENT.QUEUED);
+      await logQueueStatus(
+        logger,
+        redisClient,
+        `[ws::queueEventHandler] Queue Status Before Matching: <PLACEHOLDER>`
+      );
+    } catch (error) {
+      const { name, message, stack, cause } = error as Error;
+      logger.error({ name, message, stack, cause }, `An error occurred.`);
+      socket.emit(MATCHING_EVENT.ERROR, 'Error connecting to client');
+      return;
+    }
   };

frontend/src/lib/ws/events.ts

@@ -0,0 +1,19 @@
+export const WS_EVENT = {
+  CONNECT: 'connect',
+  MESSAGE: 'message',
+  JOIN_ROOM: 'joinRoom',
+  CANCEL_ROOM: 'cancelRoom',
+  LEAVE_ROOM: 'leave',
+  START_QUEUING: 'startQueuing',
+  DISCONNECT: 'disconnect',
+} as const;
+
+export const MATCHING_EVENT = {
+  ERROR: 'ERROR', // When match encounters error
+  QUEUED: 'QUEUED', // When match joins pool
+  MATCHING: 'MATCHING', // When matching in progress
+  PENDING: 'PENDING', // When waiting for match
+  SUCCESS: 'SUCCESS', // When match successful
+  FAILED: 'FAILED', // When match failed
+  DISCONNECT: 'DISCONNECT', // To disconnect all sockets in room
+} as const;

frontend/src/routes/match/logic.ts

@@ -7,6 +7,7 @@ import { z } from 'zod';
 
 import { requestMatch } from '@/services/match-service';
 import { fetchTopics } from '@/services/question-service';
+import { getUserId } from '@/services/user-service';
 
 export interface MatchFormData {
   selectedTopics: string[];
@@ -32,10 +33,14 @@ const formSchema = z.object({
   difficulty: z.string().min(1, 'Difficulty cannot be empty'),
 });
 
-type IRequestMatchFormSchema = z.infer<typeof formSchema>;
+export type IRequestMatchFormSchema = z.infer<typeof formSchema>;
 
 export const useRequestMatchForm = () => {
+  // TODO: Set on RouteGuard is-authed request and then query Context API
+  const userId = getUserId() as string;
+
   const [socketPort, setSocketPort] = useState('');
+
   const form = useForm<IRequestMatchFormSchema>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -45,10 +50,11 @@ export const useRequestMatchForm = () => {
     mode: 'onSubmit',
   });
   const { selectedTopics: topic, difficulty } = form.watch();
+
   const { mutate, error, isPending, isSuccess } = useMutation({
     mutationKey: ['requestMatch', topic, difficulty],
-    mutationFn: (data: IRequestMatchFormSchema) => {
-      return requestMatch(data);
+    mutationFn: () => {
+      return requestMatch({ userId });
     },
     onSuccess(data, _variables, _context) {
       if (data && data.socketPort) {
@@ -60,8 +66,8 @@ export const useRequestMatchForm = () => {
     },
   });
 
-  const onSubmit = (data: IRequestMatchFormSchema) => {
-    mutate(data);
+  const onSubmit = (_data: IRequestMatchFormSchema) => {
+    mutate();
   };
 
   return {

frontend/src/routes/match/match-form.tsx

@@ -20,6 +20,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
+import { MatchRequestStoreProvider } from '@/stores/match-request-store';
 
 import { useRequestMatchForm } from './logic';
 import { WaitingRoomModal } from './waiting-room';
@@ -125,7 +126,9 @@ export const MatchForm = ({ topics }: MatchFormProps) => {
           </FormProvider>
         </CardContent>
       </Card>
-      <WaitingRoomModal {...{ socketPort, isModalOpen, setIsModalOpen }} />
+      <MatchRequestStoreProvider value={{ form }}>
+        <WaitingRoomModal {...{ socketPort, isModalOpen, setIsModalOpen, form }} />
+      </MatchRequestStoreProvider>
     </div>
   );
 };

frontend/src/routes/match/waiting-room/constants.tsx

@@ -1,35 +1,24 @@
 import { CircleCheckBig, CircleX, LoaderCircle } from 'lucide-react';
 
-export const SOCKET_EVENTS = {
-  CONNECT: 'connect',
-  MESSAGE: 'message',
-  JOIN_ROOM: 'joinRoom',
-  MATCHING: 'MATCHING',
-  PENDING: 'PENDING',
-  SUCCESS: 'SUCCESS',
-  FAILED: 'FAILED',
-};
-
-export const FAILED_STATUS = {
-  header: 'No match found',
-  icon: <CircleX color='red' />,
-  description: 'Match failed.',
-};
-
-export const WAITING_STATUS = {
-  header: 'Waiting for a Partner...',
-  icon: <LoaderCircle className='animate-spin' />,
-  description: 'Connecting...',
-};
-
-export const CANCELLING_STATUS = {
-  header: 'Cancelling Match....',
-  icon: <LoaderCircle className='animate-spin' />,
-  description: 'Loading...',
-};
-
-export const SUCCESS_STATUS = {
-  header: 'Found a Match!',
-  icon: <CircleCheckBig color='green' />,
-  description: 'Match Details:',
+export const UI_STATUS = {
+  FAILED_STATUS: {
+    header: 'No match found',
+    icon: <CircleX color='red' />,
+    description: 'Match failed.',
+  },
+  WAITING_STATUS: {
+    header: 'Waiting for a Partner...',
+    icon: <LoaderCircle className='animate-spin' />,
+    description: 'Connecting...',
+  },
+  CANCELLING_STATUS: {
+    header: 'Cancelling Match....',
+    icon: <LoaderCircle className='animate-spin' />,
+    description: 'Loading...',
+  },
+  SUCCESS_STATUS: {
+    header: 'Found a Match!',
+    icon: <CircleCheckBig color='green' />,
+    description: 'Match Details:',
+  },
 };

frontend/src/routes/match/waiting-room/main.tsx

@@ -1,5 +1,5 @@
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { Dispatch, FC, SetStateAction } from 'react';
+import type { Dispatch, FC, SetStateAction } from 'react';
 
 import {
   Dialog,