Add Collab space routing

Author: yuxuanleong

Backend/CollabService/app.js

@@ -0,0 +1,16 @@
+const express = require('express');
+const http = require('http');
+const { setupWebSocket } = require('./websocket/collabSocket');
+
+const app = express();
+const server = http.createServer(app);
+
+// Set up WebSocket server and attach to HTTP server
+setupWebSocket(server);
+
+// Basic route to test the server
+app.get('/', (req, res) => {
+    res.send('CollabService is running');
+});
+
+module.exports = { app, server };

Backend/CollabService/index.js

@@ -0,0 +1,6 @@
+const app = require('./app')
+
+// Change the port number to listen to a different port but remember to change the port number in frontend too!
+app.listen(3004, () => {
+    console.log("Collab Servicce is Running")
+})

Backend/CollabService/utils/roomManager.js

@@ -0,0 +1,15 @@
+const rooms = {};  // { roomId: [sockets] }
+
+function manageRoom(ws, roomId) {
+    if (!rooms[roomId]) {
+        rooms[roomId] = [];
+    }
+
+    // Add the user to the room
+    rooms[roomId].push(ws);
+    ws.roomId = roomId;
+
+    console.log(`User joined room ${roomId}`);
+}
+
+module.exports = { manageRoom };

Backend/CollabService/websocket/collabSocket.js

@@ -0,0 +1,39 @@
+const WebSocket = require('ws');
+const { manageRoom } = require('../utils/roomManager');
+
+function setupWebSocket(server) {
+    const wss = new WebSocket.Server({ server });
+
+    wss.on('connection', (ws) => {
+        console.log('User connected to the collaboration space');
+
+        ws.on('message', (message) => {
+            const data = JSON.parse(message);
+
+            switch (data.type) {
+                case 'joinRoom':
+                    manageRoom(ws, data.roomId);
+                    break;
+                case 'codeUpdate':
+                    broadcastToRoom(data.roomId, data.code);
+                    break;
+                default:
+                    console.error('Unknown message type');
+            }
+        });
+
+        ws.on('close', () => {
+            console.log('User disconnected from collaboration space');
+        });
+    });
+
+    function broadcastToRoom(roomId, code) {
+        wss.clients.forEach((client) => {
+            if (client.readyState === WebSocket.OPEN && client.roomId === roomId) {
+                client.send(JSON.stringify({ type: 'codeUpdate', code }));
+            }
+        });
+    }
+}
+
+module.exports = { setupWebSocket };

Backend/MatchingService/package-lock.json

@@ -4,6 +4,7 @@
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",
+    "uuid": "^10.0.0",
     "ws": "^8.18.0"
   },
   "scripts": {

Backend/MatchingService/package.json

@@ -2,6 +2,7 @@ const amqp = require('amqplib');
 const { queueNames } = require('./setup.js');
 // const { matchUsers } = require('../services/matchingService.js');
 const { notifyUsers } = require('../websocket/websocket');
+const { v4: uuidv4 } = require('uuid');
 
 // TODO: Subscribe and acknowledge messages with user info when timeout/user matched
 
@@ -31,9 +32,14 @@ function matchUsers(channel, msg, userId, language, difficulty) {
     if (waitingUsers[criteriaKey].length >= 2) {
         const matchedUsers = waitingUsers[criteriaKey].splice(0, 2); // Match the first two users
         console.log(`Matched users: ${matchedUsers.map(user => user.userId)}`);
+        
+        // Create a unique collaboration room ID
+        const roomId = uuidv4();
 
         // Notify users of the match
-        notifyUsers(matchedUsers.map(user => user.userId), 'Match found!', 'match');
+        notifyUsers(matchedUsers.map(user => user.userId), 'Match found!', 'match', {
+                collaborationUrl: `/collaboration/${roomId}`
+            });
 
         // Acknowledge the messages for both matched users
         matchedUsers.forEach(({ msg, channel }) => {

Backend/MatchingService/rabbitmq/subscriber.js

@@ -22,7 +22,7 @@ wss.on('connection', (ws) => {
                 console.log('Message published to RabbitMQ');
 
                 // Notify the user that their message has been processed successfully
-                ws.send(JSON.stringify({ status: 'su9ccess', message: 'Match request sent!' }));
+                ws.send(JSON.stringify({ status: 'success', message: 'Match request sent!' }));
             } else if (action === 'cancel') {
                 await publishCancelRequest({ userId });
                 console.log('Cancel request published to RabbitMQ');
@@ -50,8 +50,9 @@ wss.on('connection', (ws) => {
  * @param {string|array} userId - User ID or an array of user IDs to notify.
  * @param {string} message - The message to send.
  * @param {string} type - The type of message (e.g., 'match' or 'rejection').
+ * @param {object} [data] - Additional data (e.g., collaboration URL).
  */
-function notifyUsers(userId, message, type) {
+function notifyUsers(userId, message, type, data = {}) {
     console.log(`Notifying user(s): ${userId}, Message: ${message}, Type: ${type}`);
 
     const userIds = Array.isArray(userId) ? userId : [userId]; // Convert to array if single user
@@ -60,12 +61,14 @@ function notifyUsers(userId, message, type) {
         if (client.readyState === WebSocket.OPEN && userIds.includes(client.userId)) {
             console.log(`Notifying client: ${client.userId}`);
             client.send(JSON.stringify({
-                userId: client.userId, 
+                userId: client.userId,
                 message,
-                type
+                type,
+                ...data  // Include additional data such as collaboration URL
             }));
         }
     });
 }
 
+
 module.exports = { notifyUsers };

Backend/MatchingService/websocket/websocket.js

@@ -4,6 +4,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import Home from './components/Home';
 import Login from './components/auth/Login';
 import SignUp from './components/auth/SignUp';
+import CollaborationSpace from './components/collab/CollaborationSpace';
 import EditProfile from "./components/user/EditProfile";
 import ProtectedRoute from './components/routes/ProtectedRoute';
 
@@ -26,6 +27,9 @@ function App() {
 
           {/* Edit Profile page route */}
           <Route path='/profile/:id' element={<ProtectedRoute><EditProfile /></ProtectedRoute>} />
+
+          {/* Collaboration page route */}
+          <Route path="/collaboration/:roomId" element={<ProtectedRoute><CollaborationSpace /></ProtectedRoute>} />
         </Routes>
       </BrowserRouter>
     </div>

Frontend/src/App.js

@@ -8,8 +8,10 @@ import Matching from "./matching/Matching";
 import SuccessfulMatch from "./matching/SuccessfulMatch";
 import UnsuccessfulMatch from "./matching/UnsuccessfulMatch";
 import CriteriaDisplay from './matching/CriteriaDisplay';
+import { useNavigate } from 'react-router-dom';
 const { getUserFromToken } = require('./user/userAvatarBox');
 
+
 function Sidebar() {
     const [ws, setWs] = useState(null);
     const [difficulty, setDifficulty] = useState('');
@@ -26,6 +28,8 @@ function Sidebar() {
     const handleCloseSuccessfulMatch = () => setShowSuccessfulMatch(false);
     const handleCloseUnsuccessfulMatch = () => setShowUnsuccessfulMatch(false);
 
+    const navigate = useNavigate();
+
     useEffect(() => {
         const fetchUser = async () => {
             const user = await getUserFromToken();
@@ -41,13 +45,16 @@ function Sidebar() {
         const websocket = new WebSocket('ws://localhost:8080');
 
         websocket.onmessage = (event) => {
-            const { message, type } = JSON.parse(event.data);
-            console.log(`Notification from server: ${message}`);
+            const data = JSON.parse(event.data);
+            console.log(`Notification from server: ${data.message}`);
 
-            if (type === 'match') {
+            if (data.type === 'match' && data.collaborationUrl) {
                 setShowMatching(false);
                 setShowSuccessfulMatch(true);
-            } else if (type === 'rejection') {
+                setTimeout(() => {
+                   navigate(data.collaborationUrl);  // Programmatically navigate to collaboration space
+                }, 3000); 
+            } else if (data.type === 'rejection') {
                 setShowMatching(false);
                 setShowUnsuccessfulMatch(true);
             }