Add join/leave notifications

Update frontend and backend to show notifications when users leave/join rooms

Author: qiaoen17

Backend/CollabService/utils/roomManager.js

@@ -4,6 +4,8 @@ const rooms = {};  // { roomId: [sockets] }
 function manageRoom(ws, roomId, userId, type) {
     console.log(`manageRoom function: ${type} ${userId}`)
 
+    ws.hasLeft = false;
+
     switch (type) {
         case "join":
 
@@ -47,10 +49,14 @@ function manageRoom(ws, roomId, userId, type) {
 
             // notify users of roomId of updated user list to display in frontend
             broadcastUserListUpdate(roomId);
+            // notify users of user joining the room 
+            broadcastUserJoin(roomId, userId);
             break;
 
         case "leave":
             // remove from room 
+
+            /*
             rooms[roomId].sockets = rooms[roomId].sockets.filter(socket => socket !== ws);
             rooms[roomId].userIds = rooms[roomId].userIds.filter(user => user !== userId);
 
@@ -63,6 +69,8 @@ function manageRoom(ws, roomId, userId, type) {
             } else {
                 broadcastUserListUpdate(roomId);
             }
+            */
+            handleUserLeave(ws, roomId, userId);
             break;
         default:
             console.error(`Unknown room management type: ${type}`);
@@ -72,6 +80,7 @@ function manageRoom(ws, roomId, userId, type) {
     // Remove user when they disconnect
     ws.on('close', () => {
 
+        /*
         if (rooms[roomId]) {
             rooms[roomId].sockets = rooms[roomId].sockets.filter(client => client !== ws);
             rooms[roomId].userIds = rooms[roomId].userIds.filter(user => user != userId);
@@ -82,14 +91,38 @@ function manageRoom(ws, roomId, userId, type) {
                 delete rooms[roomId];
                 console.log(`Room ${roomId} is empty and deleted`);
             } else {
-                // notify the remaining party about leave 
+                // notify users of roomId of updated user list to display in frontend
                 broadcastUserListUpdate(roomId);
+                // notify users of user leaving the room
+                broadcastUserLeaveFromSocketClose(roomId, userId);
             }
 
         }
+        */
+       handleUserLeave(ws, roomId, userId)
 
     });
 
+    function handleUserLeave(ws, roomId, userId, leaveType) {
+        if (ws.hasLeft) return;
+        ws.hasLeft = true;
+
+        if (rooms[roomId]) {
+            rooms[roomId].sockets = rooms[roomId].sockets.filter(client => client !== ws);
+            rooms[roomId].userIds = rooms[roomId].userIds.filter(user => user !== userId);
+
+            console.log(`User ${userId} left room ${roomId}`);
+
+            if (rooms[roomId].sockets.length === 0) {
+                delete rooms[roomId];
+                console.log(`Room ${roomId} is empty and deleted`);
+            } else {
+                broadcastUserListUpdate(roomId);
+                broadcastUserLeft(roomId, userId);
+            }
+        }
+    }
+
     function broadcastUserListUpdate(roomId) {
         const userList = rooms[roomId].userIds;
 
@@ -99,6 +132,24 @@ function manageRoom(ws, roomId, userId, type) {
             }
         })
     }
+
+    function broadcastUserLeft(roomId, userId) {
+
+        rooms[roomId].sockets.forEach((client) => {
+            if (client.readyState == WebSocket.OPEN) {
+                client.send(JSON.stringify({ type: 'userLeft', user: userId}));
+            }
+        })
+    }
+
+    function broadcastUserJoin(roomId, userId) {
+
+        rooms[roomId].sockets.forEach((client) => {
+            if (client.readyState == WebSocket.OPEN) {
+                client.send(JSON.stringify({ type: 'userJoin', user: userId}));
+            }
+        })
+    }
 }
 
 function getRoom(roomId) {

Frontend/src/components/collab/CollabNavigationBar.jsx

@@ -4,7 +4,7 @@ import { Button, Container, Navbar, Nav, Dropdown, DropdownToggle, DropdownMenu,
 const CollabNavigationBar = ({ handleExit, users, handleCodeRun, setLanguage, language }) => {
 
   return (
-     <Navbar className='bg-light' sticky='top'>
+     <Navbar className='bg-light' sticky='top' style={{ zIndex: 1040 }}>
         <Container className='d-flex justify-content-between'>
 
           {/* Language Dropdown on left */}

Frontend/src/components/collab/CollaborationSpace.jsx

@@ -33,6 +33,7 @@ const CollaborationSpace = () => {
         "c++": "10.2.0"
     };
 
+    {/* State management for access denied toast */}
     const [showAccessDeniedToast, setShowAccessDeniedToast] = useState(false);
     const [toastMessage, setToastMessage] = useState('');
     const [loading, setLoading] = useState(true);
@@ -42,6 +43,18 @@ const CollaborationSpace = () => {
         navigate("/home");
     };
 
+    {/* State management for user join/leave toast */}
+    const [notifs, setNotifs] = useState([]); 
+
+    const addNotif = (message) => {
+        const id = Date.now(); // unique id based on timestamp
+        setNotifs((prevNotifs) => [...prevNotifs, {id, message}]);
+
+        // Remove notif after 2 seconds
+        setTimeout(() => {
+            setNotifs((prevNotifs) => prevNotifs.filter((notif) => notif.id !== id))
+        }, 1500);
+    };
 
     {/* Set up websockets for room management on client side, and collaboration for Yjs */}
     useEffect(() => {
@@ -87,7 +100,7 @@ const CollaborationSpace = () => {
         // on getting a reply from server
         websocket.onmessage = (event) => {
             const data = JSON.parse(event.data);
-            console.log(`[FRONTEND] data message is ${JSON.stringify(data)}`);
+            // console.log(`[FRONTEND] data message is ${JSON.stringify(data)}`);
             switch (data.type) {
                 case 'usersListUpdate':
                     setUsers(data.users); // Update the user list
@@ -101,7 +114,12 @@ const CollaborationSpace = () => {
                     break;
                 case 'newMessage':
                     console.log("adding message", data.message)
-                    setMessages((prevMessages) => [...prevMessages, data.message]);
+                    break;
+                case 'userJoin':
+                    addNotif(`User ${data.user} has joined.`)
+                    break;
+                case 'userLeft':
+                    addNotif(`User ${data.user} has left`)
                     break;
                 default:
                     console.log("No messages received from room management server");
@@ -205,6 +223,18 @@ const CollaborationSpace = () => {
                 </ToastContainer>
             ) : (
                 <>
+                    {/* Toast Container for Join/Leave notifications */}
+                    <ToastContainer className='p-3' position='top-center' style={{ zIndex: 1050 }}>
+                        {notifs.map((notif) => (
+                            <Toast key={notif.id} className='mb-2' style={{ backgroundColor: 'rgba(255, 255, 255, 0.8)' }}>
+                                <Toast.Body>
+                                    <strong className='text-black'>{notif.message}</strong>
+                                </Toast.Body>
+                            </Toast>
+                        ))}
+                    </ToastContainer>
+
+                    {/* Main component content */}
                     <CollabNavigationBar handleExit={handleExit} handleCodeRun={handleCodeRun} users={users} setLanguage={setLanguage} language={language}/>
                     <Container fluid style={{ marginTop: '20px' }}>
                         <Row>