Merge pull request #113 from ruiqi7/feature/collab-service

Add pop up on end session and fix end session bugs

Author: guanquann

backend/collab-service/src/handlers/websocketHandler.ts

@@ -13,28 +13,30 @@ enum CollabEvents {
   UPDATE_REQUEST = "update_request",
   UPDATE_CURSOR_REQUEST = "update_cursor_request",
   RECONNECT_REQUEST = "reconnect_request",
+  END_SESSION_REQUEST = "end_session_request",
 
   // Send
   ROOM_READY = "room_ready",
   DOCUMENT_READY = "document_ready",
+  DOCUMENT_NOT_FOUND = "document_not_found",
   UPDATE = "updateV2",
   UPDATE_CURSOR = "update_cursor",
-  PARTNER_LEFT = "partner_left",
+  END_SESSION = "end_session",
+  PARTNER_DISCONNECTED = "partner_disconnected",
 }
 
 const EXPIRY_TIME = 3600;
-const CONNECTION_DELAY = 3000; // time window to allow for page re-renders / refresh
+const CONNECTION_DELAY = 3000; // time window to allow for page re-renders
 
 const userConnections = new Map<string, NodeJS.Timeout | null>();
 const collabSessions = new Map<string, Doc>();
 const partnerReadiness = new Map<string, boolean>();
 
 export const handleWebsocketCollabEvents = (socket: Socket) => {
-  socket.on(CollabEvents.JOIN, async (uid: string, roomId: string) => {
+  socket.on(CollabEvents.JOIN, (uid: string, roomId: string) => {
     const connectionKey = `${uid}:${roomId}`;
     if (userConnections.has(connectionKey)) {
       clearTimeout(userConnections.get(connectionKey)!);
-      return;
     }
     userConnections.set(connectionKey, null);
 
@@ -47,11 +49,10 @@ export const handleWebsocketCollabEvents = (socket: Socket) => {
     socket.join(roomId);
     socket.data.roomId = roomId;
 
-    if (
-      io.sockets.adapter.rooms.get(roomId)?.size === 2 &&
-      !collabSessions.has(roomId)
-    ) {
-      createCollabSession(roomId);
+    if (io.sockets.adapter.rooms.get(roomId)?.size === 2) {
+      if (!collabSessions.has(roomId)) {
+        createCollabSession(roomId);
+      }
       io.to(roomId).emit(CollabEvents.ROOM_READY, true);
     }
   });
@@ -107,7 +108,8 @@ export const handleWebsocketCollabEvents = (socket: Socket) => {
       if (doc) {
         applyUpdateV2(doc, new Uint8Array(update));
       } else {
-        // TODO: error handling
+        io.to(roomId).emit(CollabEvents.DOCUMENT_NOT_FOUND);
+        io.sockets.adapter.rooms.delete(roomId);
       }
     }
   );
@@ -124,41 +126,45 @@ export const handleWebsocketCollabEvents = (socket: Socket) => {
 
   socket.on(
     CollabEvents.LEAVE,
-    (uid: string, roomId: string, isImmediate: boolean) => {
+    (uid: string, roomId: string, isPartnerNotified: boolean) => {
       const connectionKey = `${uid}:${roomId}`;
-      if (isImmediate || !userConnections.has(connectionKey)) {
+      if (userConnections.has(connectionKey)) {
+        clearTimeout(userConnections.get(connectionKey)!);
+      }
+
+      if (isPartnerNotified) {
         handleUserLeave(uid, roomId, socket);
         return;
       }
 
-      clearTimeout(userConnections.get(connectionKey)!);
-
       const connectionTimeout = setTimeout(() => {
         handleUserLeave(uid, roomId, socket);
+        io.to(roomId).emit(CollabEvents.PARTNER_DISCONNECTED);
       }, CONNECTION_DELAY);
 
       userConnections.set(connectionKey, connectionTimeout);
     }
   );
 
-  socket.on(CollabEvents.RECONNECT_REQUEST, async (roomId: string) => {
-    // TODO: Handle recconnection
-    socket.join(roomId);
-
-    const doc = getDocument(roomId);
-    const storeData = await redisClient.get(`collaboration:${roomId}`);
+  socket.on(
+    CollabEvents.END_SESSION_REQUEST,
+    (roomId: string, sessionDuration: number) => {
+      socket.to(roomId).emit(CollabEvents.END_SESSION, sessionDuration);
+    }
+  );
 
-    if (storeData) {
-      const tempDoc = new Doc();
-      const update = Buffer.from(storeData, "base64");
-      applyUpdateV2(tempDoc, new Uint8Array(update));
-      const tempText = tempDoc.getText().toString();
+  socket.on(CollabEvents.RECONNECT_REQUEST, (roomId: string) => {
+    const room = io.sockets.adapter.rooms.get(roomId);
+    if (!room || room.size < 2) {
+      socket.join(roomId);
+      socket.data.roomId = roomId;
+    }
 
-      const text = doc.getText();
-      doc.transact(() => {
-        text.delete(0, text.length);
-        text.insert(0, tempText);
-      });
+    if (
+      io.sockets.adapter.rooms.get(roomId)?.size === 2 &&
+      !collabSessions.has(roomId)
+    ) {
+      restoreDocument(roomId);
     }
   });
 };
@@ -172,6 +178,7 @@ const removeCollabSession = (roomId: string) => {
   collabSessions.get(roomId)?.destroy();
   collabSessions.delete(roomId);
   partnerReadiness.delete(roomId);
+  redisClient.del(roomId);
 };
 
 const getDocument = (roomId: string) => {
@@ -188,28 +195,38 @@ const getDocument = (roomId: string) => {
   return doc;
 };
 
-const saveDocument = async (roomId: string, doc: Doc) => {
+const saveDocument = (roomId: string, doc: Doc) => {
   const docState = encodeStateAsUpdateV2(doc);
   const docAsString = Buffer.from(docState).toString("base64");
-  await redisClient.set(`collaboration:${roomId}`, docAsString, {
+  redisClient.set(`collaboration:${roomId}`, docAsString, {
     EX: EXPIRY_TIME,
   });
 };
 
+const restoreDocument = async (roomId: string) => {
+  const doc = getDocument(roomId);
+  const storeData = await redisClient.get(`collaboration:${roomId}`);
+
+  if (storeData) {
+    const tempDoc = new Doc();
+    const update = Buffer.from(storeData, "base64");
+    applyUpdateV2(tempDoc, new Uint8Array(update));
+    const tempText = tempDoc.getText().toString();
+
+    const text = doc.getText();
+    doc.transact(() => {
+      text.delete(0, text.length);
+      text.insert(0, tempText);
+    });
+  }
+};
+
 const handleUserLeave = (uid: string, roomId: string, socket: Socket) => {
   const connectionKey = `${uid}:${roomId}`;
-  if (userConnections.has(connectionKey)) {
-    clearTimeout(userConnections.get(connectionKey)!);
-    userConnections.delete(connectionKey);
-  }
+  userConnections.delete(connectionKey);
 
   socket.leave(roomId);
   socket.disconnect();
 
-  const room = io.sockets.adapter.rooms.get(roomId);
-  if (!room || room.size === 0) {
-    removeCollabSession(roomId);
-  } else {
-    io.to(roomId).emit(CollabEvents.PARTNER_LEFT);
-  }
+  removeCollabSession(roomId);
 };

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

@@ -119,27 +119,24 @@ export const handleWebsocketMatchEvents = (socket: Socket) => {
     userConnections.delete(uid);
   });
 
-  socket.on(
-    MatchEvents.MATCH_ACCEPT_REQUEST,
-    (matchId: string, userId1: string, userId2: string) => {
-      const partnerAccepted = handleMatchAccept(matchId);
-      if (partnerAccepted) {
-        const match = getMatchById(matchId);
-        if (!match) {
-          return;
-        }
-
-        const { complexity, category } = match;
-        getRandomQuestion(complexity, category).then((res) => {
-          io.to(matchId).emit(
-            MatchEvents.MATCH_SUCCESSFUL,
-            res.data.question.id,
-            res.data.question.title
-          );
-        });
+  socket.on(MatchEvents.MATCH_ACCEPT_REQUEST, (matchId: string) => {
+    const partnerAccepted = handleMatchAccept(matchId);
+    if (partnerAccepted) {
+      const match = getMatchById(matchId);
+      if (!match) {
+        return;
       }
+
+      const { complexity, category } = match;
+      getRandomQuestion(complexity, category).then((res) => {
+        io.to(matchId).emit(
+          MatchEvents.MATCH_SUCCESSFUL,
+          res.data.question.id,
+          res.data.question.title
+        );
+      });
     }
-  );
+  });
 
   socket.on(
     MatchEvents.MATCH_DECLINE_REQUEST,

frontend/src/components/CodeEditor/index.tsx

@@ -8,14 +8,17 @@ import { useEffect, useState } from "react";
 import { initDocument } from "../../utils/collabSocket";
 import { cursorExtension } from "../../utils/collabCursor";
 import { yCollab } from "y-codemirror.next";
-import { Text } from "yjs";
+import { Doc, Text } from "yjs";
 import { Awareness } from "y-protocols/awareness";
 import { useCollab } from "../../contexts/CollabContext";
-import { USE_COLLAB_ERROR_MESSAGE, USE_MATCH_ERROR_MESSAGE } from "../../utils/constants";
+import {
+  USE_COLLAB_ERROR_MESSAGE,
+  USE_MATCH_ERROR_MESSAGE,
+} from "../../utils/constants";
 import { useMatch } from "../../contexts/MatchContext";
 
 interface CodeEditorProps {
-  editorState?: { text: Text; awareness: Awareness };
+  editorState?: { doc: Doc; text: Text; awareness: Awareness };
   uid?: string;
   username?: string;
   language: string;
@@ -46,14 +49,15 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     throw new Error(USE_MATCH_ERROR_MESSAGE);
   }
 
-  const { matchCriteria, matchUser, partner, questionId, questionTitle } = match;
+  const { matchCriteria, matchUser, partner, questionId, questionTitle } =
+    match;
 
   const collab = useCollab();
   if (!collab) {
     throw new Error(USE_COLLAB_ERROR_MESSAGE);
   }
 
-  const { setCode, checkDocReady } = collab;
+  const { checkDocReady } = collab;
 
   const [isEditorReady, setIsEditorReady] = useState<boolean>(false);
   const [isDocumentLoaded, setIsDocumentLoaded] = useState<boolean>(false);
@@ -64,25 +68,36 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     }
   };
 
-  const handleChange = (value: string) => {
-    setCode(value);
-  };
-
   useEffect(() => {
-    if (isReadOnly || !isEditorReady) {
+    if (isReadOnly || !isEditorReady || !editorState) {
       return;
     }
 
     const loadTemplate = async () => {
-      if (matchUser && partner && matchCriteria && questionId && questionTitle) {
-        checkDocReady();
-        await initDocument(uid, roomId, template, matchUser.id, partner.id, matchCriteria.language, questionId, questionTitle);
+      if (
+        matchUser &&
+        partner &&
+        matchCriteria &&
+        questionId &&
+        questionTitle
+      ) {
+        checkDocReady(roomId, editorState.doc, setIsDocumentLoaded);
+        await initDocument(
+          uid,
+          roomId,
+          template,
+          matchUser.id,
+          partner.id,
+          matchCriteria.language,
+          questionId,
+          questionTitle
+        );
         setIsDocumentLoaded(true);
       }
     };
     loadTemplate();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isReadOnly, isEditorReady]);
+  }, [isReadOnly, isEditorReady, editorState]);
 
   return (
     <CodeMirror
@@ -92,7 +107,6 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
       width="100%"
       basicSetup={false}
       id="codeEditor"
-      onChange={handleChange}
       extensions={[
         indentUnit.of("\t"),
         basicSetup(),
@@ -109,9 +123,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
       ]}
       value={isReadOnly ? template : undefined}
       placeholder={
-        !isReadOnly && !isDocumentLoaded
-          ? "Loading code template..."
-          : undefined
+        !isReadOnly && !isDocumentLoaded ? "Loading the code..." : undefined
       }
     />
   );