Sockets know which username is associated with them and /chatpage is in accessible unless username is specified

back-end/App.js

@@ -215,7 +215,7 @@ app.post('/survey', (req, res) => {
 });
 
 app.get('/matches', async (req, res) => {
-  console.log('matches:', req.session.user)
+  //console.log('matches:', req.session.user)
   req.session.user = req.session.user || "randomname";
   try {
     User.find()

back-end/Server.js

@@ -5,6 +5,7 @@ connectDB();
 
 const {createServer} = require('http')
 const { Server } = require('socket.io');
+const { error } = require("console");
 const httpServer = createServer();
 const io = new Server(httpServer, {cors: {
     origin: ['http://localhost:3000'],
@@ -18,6 +19,15 @@ io.on('connection_error', (err) => {
     console.log(err);
 });
 
+io.use((socket) => {
+    const sockUsername = socket.handshake.auth.username;
+    if(!sockUsername) {
+        console.log("No username received");
+    }
+    socket.username = sockUsername;
+    console.log(`Socket username: ${socket.username}`);
+});
+
 io.on('connection', (socket) => {
     console.log(`a user has connected, user id = ${socket.id}`);
 
@@ -29,6 +39,10 @@ io.on('connection', (socket) => {
     socket.on('disconnect', () => {
       console.log("a user has disconnected");
     });
+
+    socket.off('disconnect', () => {
+        console.log("socket is off");
+    });
 });
 
 httpServer.listen(3002, () => {

front-end/src/App.js

@@ -21,7 +21,7 @@ function App() {
       <Routes>
         <Route path="/login" element={<LoginForm />} />
         <Route path="/register" element={<RegistrationForm />} />
-        <Route path="/chatpage" element={<ProtectedRoute><ChatPage /></ProtectedRoute>} />
+        <Route path="/chatpage/:username" element={<ProtectedRoute><ChatPage /></ProtectedRoute>} />
         <Route path="/chatlist" element={<ProtectedRoute><ChatList /></ProtectedRoute>} />
         <Route path="/matches" element={<ProtectedRoute><Matches /></ProtectedRoute>} />
         <Route path="/survey" element={<ProtectedRoute><Survey /></ProtectedRoute>} />

front-end/src/ChatPage.js

@@ -35,7 +35,6 @@ function ChatPage() {
   }, []);
 
   useEffect(() => {
-
     getUser();
 
     console.log("Fetching chat history...")

front-end/src/LoginForm.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
+import { socket } from './sockets/ReactSocket';
 import './landingPages.css';
 
 
@@ -27,6 +28,11 @@ function LoginForm() {
 
             if (response.ok) {
                 console.log('Login successful:', data);
+
+                //connect the chat socket and register its username
+                socket.auth = { username };
+                socket.connect();
+
                 localStorage.setItem('token', data.token);  // Save the token to localStorage
                 navigate('/matches');  // Navigate to the 'matches' route on successful login
             } else {

front-end/src/Profile.js

@@ -5,6 +5,7 @@ import Header from './Header';
 import Button from './Button';
 import profilePicture from './ProfilePic.png';
 import "./Profile.css";
+import { socket } from './sockets/ReactSocket';
 
 function Profile() {
     const [profileData, setProfileData] = useState({});
@@ -39,6 +40,7 @@ function Profile() {
     const handleLogout = () => {
         console.log("Logging out...");
         localStorage.removeItem('token');
+        socket.disconnect(); //disconnect the socket that was in use
         navigate('/login', { replace: true });
     };
 

front-end/src/RegistrationForm.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { socket } from './sockets/ReactSocket';
 import './landingPages.css';
 
 function RegistrationForm() {
@@ -35,6 +36,10 @@ function RegistrationForm() {
         // If the server responds with a non-OK HTTP status, display the error message
         setErrorMessage(data.message || 'Failed to sign up.');
       } else {
+        //connect chat socket and register username
+        socket.auth.username = username;
+        socket.connect();
+
         // On successful registration, navigate to the survey page
         console.log('Registration successful:', data);
         navigate('/survey');

front-end/src/sockets/ReactSocket.js

@@ -1,3 +1,3 @@
 import { io } from 'socket.io-client'
 
-export const socket = io('http://localhost:3002')
+export const socket = io('http://localhost:3002', {autoConnect: false});