Merge pull request #45 from CS3219-AY2324S1/matching-service

Matching service

Author: charltonator

backend/package-lock.json

@@ -14,7 +14,10 @@
     "dotenv": "^16.3.1",
     "express": "~4.16.1",
     "firebase": "^10.4.0",
-    "http-errors": "~1.6.3"
+    "firebase-admin": "^11.11.0",
+    "http": "^0.0.1-security",
+    "http-errors": "~1.6.3",
+    "socket.io": "^4.7.2"
   },
   "devDependencies": {
     "@types/express": "^4.17.18",

backend/package.json

@@ -5,17 +5,34 @@ import {
   handleLogout,
   handleSignUp,
 } from "./auth/auth.controller";
+import { handleCreateUser, handleGetUser } from "./user/user.controller";
+import { initializeApp } from 'firebase/app';
+import { getFirestore } from 'firebase/firestore';
+import { firebaseConfig } from "./firebase/firebase.config";
+import { initializeMatchingService } from './matching/matching.service'; // Import the matching service function
+import { Socket, Server } from 'socket.io';
+import { Server as ServerHttp } from 'http';
 import { handleCreateUser, handleGetUser, handleUpdateUser } from "./user/user.controller";
 const app = express();
 const port = 3001;
-
 app.use(cors());
 app.use(express.json());
 
+const httpServer = new ServerHttp(app);
+const io = new Server(httpServer, {
+  cors: {
+    origin: '*',
+  },
+}); 
+
 app.get("/", (req, res) => {
   res.send("Hello World!");
 });
 
+// Initialize Firebase Firestore and other configurations here
+initializeApp(firebaseConfig);
+const db = getFirestore();
+
 app.post("/signup", handleSignUp);
 app.post("/login", handleLogin);
 app.delete("/logout", handleLogout);
@@ -24,6 +41,17 @@ app.post("/user", handleCreateUser);
 app.get("/user", handleGetUser);
 app.put("/user", handleUpdateUser);
 
-app.listen(port, () => {
+//Socket logic
+// Maintain an array to store active users seeking a match
+const activeUsers: { socket: Socket; preferences: any }[] = [];
+
+// Initialize the matching service by passing the io object
+initializeMatchingService(io);
+
+// httpServer.listen(socketPort, () => {
+//   console.log(`socket listening on port ${socketPort}`);
+// });
+
+httpServer.listen(port, () => {
   console.log(`Peerprep listening on port ${port}`);
 });

backend/src/index.ts

@@ -0,0 +1,62 @@
+import { Server, Socket } from 'socket.io';
+
+// Your existing matching service logic
+export function initializeMatchingService(io: Server) {
+  // Maintain an array to store active users seeking a match
+  const activeUsers: { socket: Socket; preferences: any }[] = [];
+
+  io.on('connection', (socket: Socket) => {
+    console.log('A user connected');
+
+    socket.on('startMatching', (preferences: any) => {
+      // Add the user to the list of active users with their preferences
+      activeUsers.push({ socket, preferences });
+
+      // Attempt to find a match for the user
+      tryMatchForUser(socket, preferences);
+    });
+
+    socket.on('disconnect', () => {
+      console.log('A user disconnected');
+
+      // Remove the user from the list of active users when they disconnect
+      removeUserFromActiveList(socket);
+    });
+
+    // Other event handlers as needed
+  });
+
+  function tryMatchForUser(socket: Socket, preferences: any) {
+    const { difficulty, category } = preferences;
+
+    // Iterate through active users to find a match
+    const matchedUser = activeUsers.find((user) => {
+      return (
+        user.socket !== socket && // Exclude the current user from matching with themselves
+        user.preferences.difficulty === difficulty &&
+        user.preferences.category === category
+      );
+    });
+
+    if (matchedUser) {
+      // Remove both users from the active list
+      removeUserFromActiveList(socket);
+      removeUserFromActiveList(matchedUser.socket);
+
+      // Emit "matchFound" to both users
+      socket.emit('matchFound', matchedUser.preferences);
+      matchedUser.socket.emit('matchFound', preferences);
+    } else {
+      // Handle the case when no match is found for the user
+      // You can emit a "noMatchFound" event or handle it differently
+    }
+  }
+
+  function removeUserFromActiveList(socket: Socket) {
+    // Remove the user from the list of active users by socket ID
+    const index = activeUsers.findIndex((user) => user.socket === socket);
+    if (index !== -1) {
+      activeUsers.splice(index, 1);
+    }
+  }
+}

backend/src/matching/matching.service.ts

@@ -10,4 +10,4 @@
   },
   "include": ["./**/*.ts"],
   "exclue": ["node_modules"]
-}
+}

backend/tsconfig.json

@@ -23,6 +23,7 @@
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "react-simple-code-editor": "^0.13.1",
+    "socket.io-client": "^4.7.2",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

frontend/package-lock.json

@@ -5,7 +5,8 @@ import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
-
+import { useNavigate } from 'react-router-dom'; // Import useNavigate for redirection
+import socket from './socket';
 
 const style = {
     position: 'absolute' as 'absolute',
@@ -27,15 +28,46 @@ const style = {
 const MatchingForm = React.forwardRef(function MatchingForm() {
     const [difficulty, setDifficulty] = React.useState('');
     const [category, setCategory] = React.useState('');
+    const [isMatching, setIsMatching] = React.useState(false); // Track matching state
+    const navigate = useNavigate(); // Get navigate for redirection
+
     const handleDiffChange = (event: SelectChangeEvent) => {
         setDifficulty(event.target.value);
     };
+
     const handleCatChange = (event: SelectChangeEvent) => {
         setCategory(event.target.value);
     };
+
     const handleConnect = () => {
-        console.log('connecting...')
-    }
+        const preferences = {
+            difficulty,
+            category,
+        };
+
+        // Emit the startMatching event to the server with user preferences
+        socket.emit('startMatching', preferences);
+
+        // Set matching state to true when attempting to match
+        setIsMatching(true);
+    };
+
+    // Handle the "matchFound" event from the server
+    React.useEffect(() => {
+        socket.on('matchFound', (matchedUserPreferences) => {
+            // Handle the matched user's preferences here
+            console.log('Match Found:', matchedUserPreferences);
+            setIsMatching(false); // Set matching state to false
+            // Redirect to the question page with the code editor
+            navigate('/question'); // Update the route as needed
+        });
+
+        // Clean up the event listener when the component unmounts
+        return () => {
+            socket.off('matchFound');
+        };
+    }, [navigate]);
+
     return (
         <Box sx={style}>
             <h2><center>Please select a difficulty and question category.</center></h2>
@@ -56,7 +88,6 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
                     <MenuItem value={'Medium'}>Medium</MenuItem>
                     <MenuItem value={'Hard'}>Hard</MenuItem>
                 </Select>
-                {/* <FormHelperText>Difficulty of Question</FormHelperText> */}
             </FormControl>
             <FormControl sx={{ mt: 1, mb: 1, width: '100%' }}>
                 <InputLabel id="demo-simple-select-helper-label">Category</InputLabel>
@@ -73,13 +104,16 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
                     <MenuItem value={'Algo'}>Algo</MenuItem>
                     <MenuItem value={'ML'}>ML</MenuItem>
                 </Select>
-                {/* <FormHelperText>Difficulty of Question</FormHelperText> */}
             </FormControl>
-            <Button sx={{ mt: '5%' }} variant="contained" onClick={handleConnect}>
-                Connect
-            </Button>
+            {isMatching ? (
+                <div>Loading...</div> // Show loading spinner
+            ) : (
+                <Button sx={{ mt: '5%' }} variant="contained" onClick={handleConnect}>
+                    Connect
+                </Button>
+            )}
         </Box>
     );
 });
 
-export default MatchingForm
+export default MatchingForm;

frontend/package.json

@@ -0,0 +1,13 @@
+import { io, Socket } from 'socket.io-client';
+
+// Create a socket instance
+const baseUrl = process.env.REACT_APP_BASE_URL;
+const socket: Socket = baseUrl ? io(baseUrl) : io("http://localhost:3001"); // Replace with your server URL if defined, otherwise use default URL
+
+// Event listener for when a match is found
+socket.on('matchFound', (user) => {
+  // Handle the matched user data here, e.g., update state or trigger an action
+  console.log('Match found!', user);
+});
+
+export default socket;