Close socket connection after a delay

Author: nicolelim02

backend/communication-service/src/handlers/userConnectionHandler.ts

@@ -0,0 +1,25 @@
+import { Socket } from "socket.io";
+import { UserConnection } from "../utils/types";
+
+const userConnections: Map<string, UserConnection> = new Map();
+
+const delay = 3000;
+
+export const disconnectUser = (socket: Socket) => {
+  const { username } = socket.data;
+  const userConnection = userConnections.get(username);
+  clearTimeout(userConnection?.timeout);
+  const timeout = setTimeout(() => {
+    console.log("DISCONNECTING: ", socket.data);
+    userConnections.delete(username);
+    socket.disconnect();
+  }, delay);
+  userConnections.set(username, { timeout });
+};
+
+export const connectUser = (username: string) => {
+  console.log("CONNECTING: ", username);
+  const userConnection = userConnections.get(username);
+  clearTimeout(userConnection?.timeout);
+  userConnections.set(username, {});
+};

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

@@ -2,15 +2,13 @@ import { Socket } from "socket.io";
 import { CommunicationEvents, MessageTypes } from "../utils/types";
 import { BOT_NAME } from "../utils/constants";
 import { io } from "../server";
+import { connectUser, disconnectUser } from "./userConnectionHandler";
 
 export const handleWebsocketCommunicationEvents = (socket: Socket) => {
   socket.on(
     CommunicationEvents.JOIN,
     async ({ roomId, username }: { roomId: string; username: string }) => {
-      if (!roomId) {
-        return;
-      }
-
+      connectUser(username);
       const room = io.sockets.adapter.rooms.get(roomId);
       if (room?.has(socket.id)) {
         socket.emit(CommunicationEvents.ALREADY_JOINED);
@@ -55,10 +53,13 @@ export const handleWebsocketCommunicationEvents = (socket: Socket) => {
     }
   );
 
+  socket.on(CommunicationEvents.USER_DISCONNECT, () => {
+    disconnectUser(socket);
+  });
+
   socket.on(CommunicationEvents.DISCONNECT, () => {
     const { roomId } = socket.data;
     if (roomId) {
-      console.log("disconnected", roomId, socket.data.username);
       const createdTime = Date.now();
       socket.to(roomId).emit(CommunicationEvents.DISCONNECTED, {
         from: BOT_NAME,

backend/communication-service/src/utils/types.ts

@@ -2,16 +2,22 @@ export enum CommunicationEvents {
   // receive
   JOIN = "join",
   SEND_TEXT_MESSAGE = "send_text_message",
+  USER_DISCONNECT = "user_disconnect",
   DISCONNECT = "disconnect",
 
   // send
   USER_JOINED = "user_joined",
   ALREADY_JOINED = "already_joined",
   TEXT_MESSAGE_RECEIVED = "text_message_received",
+  USER_DISCONNECTED = "user_disconnected",
   DISCONNECTED = "disconnected",
 }
 
 export enum MessageTypes {
   USER_GENERATED = "user_generated",
   BOT_GENERATED = "bot_generated",
 }
+
+export type UserConnection = {
+  timeout?: NodeJS.Timeout;
+};

frontend/src/components/Chat/index.tsx

@@ -51,16 +51,14 @@ const Chat: React.FC<ChatProps> = ({ isActive }) => {
   useEffect(() => {
     // join the room automatically when this loads
     communicationSocket.open();
-    // to make sure this does not run twice
     communicationSocket.emit(CommunicationEvents.JOIN, {
       roomId: getMatchId(),
       username: user?.username,
     });
 
     return () => {
-      console.log("closing socket...");
-      communicationSocket.close();
-      setMessages([]); // clear the earlier messages in dev mode
+      communicationSocket.emit(CommunicationEvents.USER_DISCONNECT);
+      // setMessages([]); // clear the earlier messages in dev mode
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

frontend/src/contexts/CollabContext.tsx

@@ -16,8 +16,11 @@ import { useReducer } from "react";
 import { updateQnHistoryById } from "../reducers/qnHistoryReducer";
 import qnHistoryReducer, { initialQHState } from "../reducers/qnHistoryReducer";
 import { CollabEvents, collabSocket, leave } from "../utils/collabSocket";
-import { communicationSocket } from "../utils/communicationSocket";
-import useAppNavigate from "../components/UseAppNavigate";
+import {
+  CommunicationEvents,
+  communicationSocket,
+} from "../utils/communicationSocket";
+import useAppNavigate from "../hooks/useAppNavigate";
 
 export type CompilerResult = {
   status: string;
@@ -162,7 +165,7 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     leave(partner?.id as string, getMatchId() as string, true);
 
     // Leave chat room
-    communicationSocket.disconnect();
+    communicationSocket.emit(CommunicationEvents.USER_DISCONNECT);
 
     // Delete match data
     stopMatch();

frontend/src/contexts/MatchContext.tsx

@@ -13,7 +13,7 @@ import {
 } from "../utils/constants";
 import { useAuth } from "./AuthContext";
 import { toast } from "react-toastify";
-import useAppNavigate from "../components/UseAppNavigate";
+import useAppNavigate from "../hooks/useAppNavigate";
 import { UNSAFE_NavigationContext } from "react-router-dom";
 import { Action, type History, type Transition } from "history";
 

frontend/src/components/UseAppNavigate/index.tsx renamed to frontend/src/hooks/useAppNavigate.tsx

@@ -3,7 +3,7 @@ import { Dispatch, SetStateAction, useEffect, useState } from "react";
 // Adapted from https://karthikraja555.medium.com/react-js-debouncing-or-delaying-value-change-using-custom-hook-1d5fb2e4fe79
 const useDebounce = <T extends string | string[]>(
   initialState: T,
-  delay: number,
+  delay: number
 ): [T, Dispatch<SetStateAction<T>>] => {
   const [actualValue, setActualValue] = useState<T>(initialState);
   const [debounceValue, setDebounceValue] = useState<T>(initialState);

frontend/src/utils/debounce.ts renamed to frontend/src/hooks/useDebounce.tsx

@@ -67,6 +67,7 @@ const CollabSandbox: React.FC = () => {
     checkPartnerStatus,
     isEndSessionModalOpen,
     resetCollab,
+    setCompilerResult,
   } = collab;
 
   const [state, dispatch] = useReducer(reducer, initialState);

frontend/src/pages/CollabSandbox/index.tsx

@@ -35,7 +35,7 @@ import {
   SUCCESS_QUESTION_DELETE,
   USE_AUTH_ERROR_MESSAGE,
 } from "../../utils/constants";
-import useDebounce from "../../utils/debounce";
+import useDebounce from "../../hooks/useDebounce";
 import { blue, grey } from "@mui/material/colors";
 import { Add, Delete, Edit, MoreVert, Search } from "@mui/icons-material";
 import ConfirmationDialog from "../../components/ConfirmationDialog";
@@ -121,7 +121,7 @@ const QuestionList: React.FC = () => {
     if (state.questionCount % rowsPerPage !== 1 || page === 0) {
       updateQuestionList();
     } else {
-      setPage(page => page - 1);
+      setPage((page) => page - 1);
     }
   };