From 7604bb9e947c7aedde218ae77e357f9307f540c8 Mon Sep 17 00:00:00 2001 From: ShadowCat567 Date: Sun, 21 Apr 2024 01:54:33 -0400 Subject: [PATCH 1/4] set up user id with sockets --- back-end/Server.js | 11 +++++++++++ front-end/src/LoginForm.js | 3 +++ front-end/src/RegistrationForm.js | 4 ++++ front-end/src/sockets/ReactSocket.js | 2 +- 4 files changed, 19 insertions(+), 1 deletion(-) diff --git a/back-end/Server.js b/back-end/Server.js index 235670d..d900578 100644 --- a/back-end/Server.js +++ b/back-end/Server.js @@ -5,6 +5,8 @@ connectDB(); const {createServer} = require('http') const { Server } = require('socket.io'); +const { socket } = require("../front-end/src/sockets/ReactSocket"); +const { error } = require("console"); const httpServer = createServer(); const io = new Server(httpServer, {cors: { origin: ['http://localhost:3000'], @@ -18,6 +20,15 @@ io.on('connection_error', (err) => { console.log(err); }); +io.use((socket, next) => { + const sockUsername = socket.handshake.auth.username; + if(!sockUsername) { + return next(new Error("Invalid Username")); + } + socket.username = username; + next(); +}) + io.on('connection', (socket) => { console.log(`a user has connected, user id = ${socket.id}`); diff --git a/front-end/src/LoginForm.js b/front-end/src/LoginForm.js index 0299dd5..2732165 100644 --- a/front-end/src/LoginForm.js +++ b/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,8 @@ function LoginForm() { if (response.ok) { console.log('Login successful:', data); + socket.auth = username; //sets the username in the socket to the username of the user + socket.connect(); //connects the socket to use later localStorage.setItem('token', data.token); // Save the token to localStorage navigate('/matches'); // Navigate to the 'matches' route on successful login } else { diff --git a/front-end/src/RegistrationForm.js b/front-end/src/RegistrationForm.js index 3a5d706..57b8e55 100644 --- a/front-end/src/RegistrationForm.js +++ b/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,9 @@ function RegistrationForm() { // If the server responds with a non-OK HTTP status, display the error message setErrorMessage(data.message || 'Failed to sign up.'); } else { + //Set up sockets with new username on successful registration + socket.auth = username; + socket.connect(); // On successful registration, navigate to the survey page console.log('Registration successful:', data); navigate('/survey'); diff --git a/front-end/src/sockets/ReactSocket.js b/front-end/src/sockets/ReactSocket.js index 0ff0683..df2b5d1 100644 --- a/front-end/src/sockets/ReactSocket.js +++ b/front-end/src/sockets/ReactSocket.js @@ -1,3 +1,3 @@ import { io } from 'socket.io-client' -export const socket = io('http://localhost:3002') \ No newline at end of file +export const socket = io('http://localhost:3002', {autoConnect:false}); \ No newline at end of file From e53c6e42c5ba28ed9019dbcaaba712c0288bc96d Mon Sep 17 00:00:00 2001 From: ShadowCat567 Date: Sun, 21 Apr 2024 12:49:02 -0400 Subject: [PATCH 2/4] Sockets able to be associated with a username --- back-end/App.js | 2 +- back-end/Server.js | 15 +++++---------- front-end/src/ChatPage.js | 2 +- front-end/src/LoginForm.js | 2 -- front-end/src/RegistrationForm.js | 3 --- front-end/src/sockets/ReactSocket.js | 2 +- 6 files changed, 8 insertions(+), 18 deletions(-) diff --git a/back-end/App.js b/back-end/App.js index 95ea023..ea55667 100644 --- a/back-end/App.js +++ b/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() diff --git a/back-end/Server.js b/back-end/Server.js index d900578..582da95 100644 --- a/back-end/Server.js +++ b/back-end/Server.js @@ -5,7 +5,6 @@ connectDB(); const {createServer} = require('http') const { Server } = require('socket.io'); -const { socket } = require("../front-end/src/sockets/ReactSocket"); const { error } = require("console"); const httpServer = createServer(); const io = new Server(httpServer, {cors: { @@ -20,15 +19,6 @@ io.on('connection_error', (err) => { console.log(err); }); -io.use((socket, next) => { - const sockUsername = socket.handshake.auth.username; - if(!sockUsername) { - return next(new Error("Invalid Username")); - } - socket.username = username; - next(); -}) - io.on('connection', (socket) => { console.log(`a user has connected, user id = ${socket.id}`); @@ -37,6 +27,11 @@ io.on('connection', (socket) => { io.emit('chat_message', msg); }); + socket.on('set_username', (user) => { + socket.username = user; + console.log(`Socket user: ${socket.username}`); + }) + socket.on('disconnect', () => { console.log("a user has disconnected"); }); diff --git a/front-end/src/ChatPage.js b/front-end/src/ChatPage.js index 4c7662a..1e4ad87 100644 --- a/front-end/src/ChatPage.js +++ b/front-end/src/ChatPage.js @@ -35,7 +35,6 @@ function ChatPage() { }, []); useEffect(() => { - getUser(); console.log("Fetching chat history...") @@ -83,6 +82,7 @@ function ChatPage() { }); // Fetching logic setUser(response.data); + socket.emit('set_username', response.data); } catch (error) { console.error('Error fetching user:', error); } diff --git a/front-end/src/LoginForm.js b/front-end/src/LoginForm.js index 2732165..4b8c2e3 100644 --- a/front-end/src/LoginForm.js +++ b/front-end/src/LoginForm.js @@ -28,8 +28,6 @@ function LoginForm() { if (response.ok) { console.log('Login successful:', data); - socket.auth = username; //sets the username in the socket to the username of the user - socket.connect(); //connects the socket to use later localStorage.setItem('token', data.token); // Save the token to localStorage navigate('/matches'); // Navigate to the 'matches' route on successful login } else { diff --git a/front-end/src/RegistrationForm.js b/front-end/src/RegistrationForm.js index 57b8e55..d87a05c 100644 --- a/front-end/src/RegistrationForm.js +++ b/front-end/src/RegistrationForm.js @@ -36,9 +36,6 @@ function RegistrationForm() { // If the server responds with a non-OK HTTP status, display the error message setErrorMessage(data.message || 'Failed to sign up.'); } else { - //Set up sockets with new username on successful registration - socket.auth = username; - socket.connect(); // On successful registration, navigate to the survey page console.log('Registration successful:', data); navigate('/survey'); diff --git a/front-end/src/sockets/ReactSocket.js b/front-end/src/sockets/ReactSocket.js index df2b5d1..0df967a 100644 --- a/front-end/src/sockets/ReactSocket.js +++ b/front-end/src/sockets/ReactSocket.js @@ -1,3 +1,3 @@ import { io } from 'socket.io-client' -export const socket = io('http://localhost:3002', {autoConnect:false}); \ No newline at end of file +export const socket = io('http://localhost:3002'); \ No newline at end of file From 1633529531f1f47a9755dc7c8431d0947f14909f Mon Sep 17 00:00:00 2001 From: ShadowCat567 Date: Tue, 23 Apr 2024 12:38:20 -0400 Subject: [PATCH 3/4] Username added to socket --- back-end/Server.js | 18 +++++++++++++----- front-end/src/ChatPage.js | 1 - front-end/src/LoginForm.js | 5 +++++ front-end/src/Profile.js | 2 ++ front-end/src/RegistrationForm.js | 4 ++++ front-end/src/sockets/ReactSocket.js | 2 +- 6 files changed, 25 insertions(+), 7 deletions(-) diff --git a/back-end/Server.js b/back-end/Server.js index 582da95..fa903c0 100644 --- a/back-end/Server.js +++ b/back-end/Server.js @@ -19,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"); + } + console.log(`Socket username: ${sockUsername}`); + socket.username = sockUsername; +}); + io.on('connection', (socket) => { console.log(`a user has connected, user id = ${socket.id}`); @@ -27,14 +36,13 @@ io.on('connection', (socket) => { io.emit('chat_message', msg); }); - socket.on('set_username', (user) => { - socket.username = user; - console.log(`Socket user: ${socket.username}`); - }) - socket.on('disconnect', () => { console.log("a user has disconnected"); }); + + socket.off('disconnect', () => { + console.log("socket is off"); + }); }); httpServer.listen(3002, () => { diff --git a/front-end/src/ChatPage.js b/front-end/src/ChatPage.js index 1e4ad87..14da41f 100644 --- a/front-end/src/ChatPage.js +++ b/front-end/src/ChatPage.js @@ -82,7 +82,6 @@ function ChatPage() { }); // Fetching logic setUser(response.data); - socket.emit('set_username', response.data); } catch (error) { console.error('Error fetching user:', error); } diff --git a/front-end/src/LoginForm.js b/front-end/src/LoginForm.js index 4b8c2e3..1d731be 100644 --- a/front-end/src/LoginForm.js +++ b/front-end/src/LoginForm.js @@ -28,6 +28,11 @@ function LoginForm() { if (response.ok) { console.log('Login successful:', data); + + //connect the chat socket and register its username + socket.auth.username = username; + socket.connect(); + localStorage.setItem('token', data.token); // Save the token to localStorage navigate('/matches'); // Navigate to the 'matches' route on successful login } else { diff --git a/front-end/src/Profile.js b/front-end/src/Profile.js index ce9a4ab..cc9c8d6 100644 --- a/front-end/src/Profile.js +++ b/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 }); }; diff --git a/front-end/src/RegistrationForm.js b/front-end/src/RegistrationForm.js index d87a05c..44a25d3 100644 --- a/front-end/src/RegistrationForm.js +++ b/front-end/src/RegistrationForm.js @@ -36,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'); diff --git a/front-end/src/sockets/ReactSocket.js b/front-end/src/sockets/ReactSocket.js index 0df967a..f51df66 100644 --- a/front-end/src/sockets/ReactSocket.js +++ b/front-end/src/sockets/ReactSocket.js @@ -1,3 +1,3 @@ import { io } from 'socket.io-client' -export const socket = io('http://localhost:3002'); \ No newline at end of file +export const socket = io('http://localhost:3002', {autoConnect: false}); \ No newline at end of file From e8f3acd73e6db2c4ffda7f50a147d6c54944496e Mon Sep 17 00:00:00 2001 From: ShadowCat567 Date: Tue, 23 Apr 2024 19:03:13 -0400 Subject: [PATCH 4/4] D:/Git/chatpage is in accessible --- back-end/Server.js | 2 +- front-end/src/App.js | 2 +- front-end/src/LoginForm.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/back-end/Server.js b/back-end/Server.js index fa903c0..5b3e871 100644 --- a/back-end/Server.js +++ b/back-end/Server.js @@ -24,8 +24,8 @@ io.use((socket) => { if(!sockUsername) { console.log("No username received"); } - console.log(`Socket username: ${sockUsername}`); socket.username = sockUsername; + console.log(`Socket username: ${socket.username}`); }); io.on('connection', (socket) => { diff --git a/front-end/src/App.js b/front-end/src/App.js index 0aa13e1..8a8ae8a 100644 --- a/front-end/src/App.js +++ b/front-end/src/App.js @@ -21,7 +21,7 @@ function App() { } /> } /> - } /> + } /> } /> } /> } /> diff --git a/front-end/src/LoginForm.js b/front-end/src/LoginForm.js index 1d731be..5d0560c 100644 --- a/front-end/src/LoginForm.js +++ b/front-end/src/LoginForm.js @@ -30,7 +30,7 @@ function LoginForm() { console.log('Login successful:', data); //connect the chat socket and register its username - socket.auth.username = username; + socket.auth = { username }; socket.connect(); localStorage.setItem('token', data.token); // Save the token to localStorage