Skip to content

Commit adc5c5d

Browse files
sonyahu15namos2502HadriChanr-mcgrath
committed
host state working!
Co-authored-by: Nam <[email protected]> Co-authored-by: HadriChan <[email protected]> Co-authored-by: r-mcgrath <[email protected]>
1 parent 0de947e commit adc5c5d

File tree

4 files changed

+106
-117
lines changed

4 files changed

+106
-117
lines changed

‎app/src/components/left/RoomsContainer.tsx

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -35,59 +35,49 @@ const RoomsContainer = () => {
3535
roomCode: store.roomSlice.roomCode,
3636
userName: store.roomSlice.userName,
3737
userList: store.roomSlice.userList,
38-
//userIsHost: store.roomSlice.userIsHost,
3938
userJoined: store.roomSlice.userJoined
4039
})
4140
);
42-
// const [userIsHost, setUserIsHost] = useState(false);
4341

4442
React.useEffect(() => {
4543
console.log('You Joined Room---:', roomCode);
4644
}, [roomCode]);
4745

48-
// React.useEffect(() => {
49-
// console.log('userName :', userName);
50-
// if (userName === userList[0]) {
51-
// console.log('setting isHost to true');
52-
// setUserIsHost(true);
53-
// } else {
54-
// setUserIsHost(false);
55-
// }
56-
// console.log('User list updated:', userList);
57-
// console.log('userList[0]-------', userList[0]);
58-
// }, [userList]);
59-
6046
function initSocketConnection(roomCode: string) {
6147
if (socket) socket.disconnect(); //edge case check if socket connection existed
6248

6349
socket = io(API_BASE_URL, {
50+
//establishing client and server
6451
transports: ['websocket']
6552
});
6653

6754
socket.on('connect', () => {
68-
console.log(`You Connected With Id: ${socket.id}`);
69-
console.log(`Your Nickname Is: ${userName}`);
70-
//passing current client nickname and room code to server
55+
//connecting user to server
7156
socket.emit('joining', userName, roomCode);
72-
socket.on('back emitting state from host', (state) => {
73-
store.dispatch(allCooperativeState(state.appState));
74-
store.dispatch(codePreviewCooperative(state.codePreviewCooperative));
75-
store.dispatch(cooperativeStyle(state.styleSlice));
76-
});
57+
console.log(`${userName} Joined room ${roomCode}`);
58+
});
59+
60+
//send state from host to room when new user joins
61+
socket.on('requesting state from host', (callback) => {
62+
//getting state request from user from back end
63+
const newState = store.getState();
64+
callback(newState); //pull new state from host and send it to back end
65+
});
66+
67+
socket.on('back emitting state from host', (state, callback) => {
68+
//getting state from host once joined a room
69+
//dispatching new state to change user current state
70+
store.dispatch(allCooperativeState(state.appState));
71+
store.dispatch(codePreviewCooperative(state.codePreviewCooperative));
72+
store.dispatch(cooperativeStyle(state.styleSlice));
73+
callback({ status: 'confirmed' });
7774
});
7875

7976
//listening to back end for updating user list
8077
socket.on('updateUserList', (newUserList: object) => {
8178
dispatch(setUserList(Object.values(newUserList)));
8279
});
83-
//send state from host to room when new user joins
84-
socket.on('requesting state from host', () => {
85-
console.log('front received request for host state');
86-
console.log(`${userName} is host`);
87-
console.log('host is sending state');
88-
const newState = store.getState();
89-
socket.emit('state from host', JSON.stringify(newState));
90-
});
80+
9181
// receiving the message from the back end
9282
socket.on('new state from back', (event) => {
9383
let currentStore: any = JSON.stringify(store.getState());
@@ -120,6 +110,7 @@ const RoomsContainer = () => {
120110

121111
let previousState = store.getState();
122112
// sending info to backend whenever the redux store changes
113+
//handling state changes and send to server
123114
const handleStoreChange = debounce(() => {
124115
const newState = store.getState();
125116
const roomCode = newState.roomSlice.roomCode;
@@ -131,12 +122,14 @@ const RoomsContainer = () => {
131122
}
132123
}, 100);
133124

125+
//listening to changes from users in room, invoke handle store change
134126
store.subscribe(() => {
135127
if (socket) {
136128
handleStoreChange();
137129
}
138130
});
139131

132+
//joining room function
140133
function joinRoom() {
141134
if (userList.length !== 0) dispatch(setUserList([])); //edge case check if userList not empty.
142135
handleUserEnteredRoom(roomCode); // Call handleUserEnteredRoom when joining a room

‎app/src/redux/reducers/slice/roomSlice.ts

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ const initialState = {
55
roomCode: '',
66
userName: '',
77
userList: [],
8-
// userIsHost: false,
98
userJoined: false
109
};
1110

@@ -23,22 +22,14 @@ const roomSlice = createSlice({
2322
setUserList: (state, action) => {
2423
state.userList = action.payload;
2524
},
26-
// setUserIsHost: (state, action) => {
27-
// state.userIsHost = action.payload;
28-
// },
2925
setUserJoined: (state, action) => {
3026
state.userJoined = action.payload;
3127
}
3228
}
3329
});
3430

3531
// Exports the action creator function to be used with useDispatch
36-
export const {
37-
setRoomCode,
38-
setUserName,
39-
setUserList,
40-
// setUserIsHost,
41-
setUserJoined
42-
} = roomSlice.actions;
32+
export const { setRoomCode, setUserName, setUserList, setUserJoined } =
33+
roomSlice.actions;
4334
// Exports so we can combine in rootReducer
4435
export default roomSlice.reducer;

‎server/controllers/sessionController.ts

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,34 @@ const sessionController: SessionController = {
1111
// // Skip authentication checks in test environment
1212
// return next();
1313
// } else {
14-
try {
15-
let cookieId;
16-
if (req.cookies) {
17-
// if the request cookies exist then it assigns it to cookieId
18-
cookieId = req.cookies.ssid;
19-
} else {
20-
// else it creates a new cookieId for the user based on the userId
21-
cookieId = req.body.userId;
22-
}
14+
try {
15+
let cookieId;
16+
if (req.cookies) {
17+
// if the request cookies exist then it assigns it to cookieId
18+
cookieId = req.cookies.ssid;
19+
} else {
20+
// else it creates a new cookieId for the user based on the userId
21+
cookieId = req.body.userId;
22+
}
2323

24-
// find session from request session ID in mongodb
25-
const session = await Sessions.findOne({ cookieId });
26-
if (!session) {
27-
console.log('no session')
28-
res.locals.loggedIn = false;
29-
return next();
30-
// return res.redirect('/');
31-
}
32-
res.locals.loggedIn = true;
24+
// find session from request session ID in mongodb
25+
const session = await Sessions.findOne({ cookieId });
26+
if (!session) {
27+
res.locals.loggedIn = false;
3328
return next();
34-
} catch (err) {
35-
return next({
36-
log: `Error in sessionController.isLoggedIn: ${err}`,
37-
message: {
38-
err: 'Error in sessionController.isLoggedIn, check server logs for details'
39-
}
40-
});
29+
// return res.redirect('/');
4130
}
42-
43-
},
31+
res.locals.loggedIn = true;
32+
return next();
33+
} catch (err) {
34+
return next({
35+
log: `Error in sessionController.isLoggedIn: ${err}`,
36+
message: {
37+
err: 'Error in sessionController.isLoggedIn, check server logs for details'
38+
}
39+
});
40+
}
41+
},
4442
// startSession - create and save a new session into the database
4543
startSession: (req, res, next) => {
4644
// first check if user is logged in already
@@ -82,19 +80,23 @@ const sessionController: SessionController = {
8280

8381
endSession: (req, res, next) => {
8482
//finding then deleting the session
85-
Sessions.findOneAndDelete({ cookieId: req.cookies.ssid }, null, (err, deleted) => {
86-
if (err) {
87-
return next({
88-
log: `Error in sessionController.endSession: ${err}`,
89-
message: {
90-
err: 'Error in sessionController.endSession, check server logs for details'
91-
}
92-
});
83+
Sessions.findOneAndDelete(
84+
{ cookieId: req.cookies.ssid },
85+
null,
86+
(err, deleted) => {
87+
if (err) {
88+
return next({
89+
log: `Error in sessionController.endSession: ${err}`,
90+
message: {
91+
err: 'Error in sessionController.endSession, check server logs for details'
92+
}
93+
});
94+
}
95+
res.locals.deleted = deleted;
96+
return next();
9397
}
94-
res.locals.deleted = deleted;
95-
return next();
96-
});
97-
},
98+
);
99+
}
98100

99101
//don't think this code is used DW17
100102
// gitHubResponse: (req, res, next) => {

‎server/server.ts

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -97,58 +97,61 @@ const io = new Server(httpServer, {
9797

9898
const roomLists = {}; //key: roomCode, value: Obj{ socketid: username }
9999
io.on('connection', (client) => {
100-
client.on('new state from front', (redux_store, room) => {
101-
if (room) {
102-
//sending to sender client, only if they are in room
103-
client.to(room).emit('new state from back', redux_store);
100+
//when user Joined a room
101+
client.on('joining', async (userName: string, roomCode: string) => {
102+
//adding async
103+
try {
104+
//if no room exists, add room to list
105+
if (!roomLists[roomCode]) {
106+
roomLists[roomCode] = {};
107+
}
108+
roomLists[roomCode][client.id] = userName; // add user into the room with id: userName
109+
let userList = Object.keys(roomLists[roomCode]);
110+
let hostID = userList[0];
111+
let newClientID = userList[userList.length - 1];
112+
113+
//await request state to host
114+
let hostState = await io //once the request is sent back save to host state
115+
.timeout(5000)
116+
.to(hostID)
117+
.emitWithAck('requesting state from host'); //sending request
118+
119+
let newClientResponse = await io //send the requested host state to the new client
120+
.timeout(5000)
121+
.to(newClientID)
122+
.emitWithAck('back emitting state from host', hostState[0]); //sending state to the new client
123+
124+
if (newClientResponse[0].status === 'confirmed') {
125+
client.join(roomCode); //client joining a room
126+
io.to(roomCode).emit('updateUserList', roomLists[roomCode]); //send the message to all clients in room but the sender
127+
}
128+
} catch (error) {
129+
//if joining event is having an error
130+
console.log(
131+
'the client did not acknowledge the event in the given delay:',
132+
error
133+
);
104134
}
105135
});
106136

107-
//when user Joined a room
108-
client.on('joining', (userName: string, roomCode: string) => {
109-
//if room exists, get state from host
110-
if (roomLists[roomCode]) {
111-
let hostID = Object.keys(roomLists[roomCode])[0];
112-
console.log('back requesting state from host');
113-
console.log('host username:', roomLists[roomCode][hostID]);
114-
io.to(roomLists[roomCode][hostID]).emit('requesting state from host');
115-
client.on('state from host', (state) => {
116-
io.to(client.id).emit('back emitting state from host', state);
117-
});
118-
//if no room exist, create new room in server
119-
} else if (!roomLists[roomCode]) {
120-
roomLists[roomCode] = {};
137+
//updating state after joining
138+
client.on('new state from front', (redux_store, room: string) => {
139+
if (room) {
140+
//sending to sender client, only if they are in room
141+
client.to(room).emit('new state from back', redux_store);
121142
}
122-
roomLists[roomCode][client.id] = userName; // add user into the room with id: userName
123-
124-
client.join(roomCode); //client joining a room
125-
126-
console.log('back emitting new user list');
127-
io.to(roomCode).emit('updateUserList', roomLists[roomCode]); //send the message to all clients in room
128-
129-
//console.log for room status
130-
console.log('full room lists', roomLists);
131-
console.log(`${userName} joined room ${roomCode}`);
132-
console.log(
133-
`back sent User list of room ${roomCode}: `,
134-
roomLists[roomCode]
135-
);
136143
});
137144

145+
//disconnecting functionality
138146
client.on('disconnecting', () => {
139147
// the client.rooms Set contains at least the socket ID
140148
const roomCode = Array.from(client.rooms)[1]; //grabbing current room client was in when disconnecting
141149
delete roomLists[roomCode][client.id];
142-
console.log('back deleting user from list');
143150
//if room empty, delete room from room list
144151
if (!Object.keys(roomLists[roomCode]).length) {
145152
delete roomLists[roomCode];
146153
} else {
147154
//else emit updated user list
148-
console.log(
149-
'back emitting User list after User Left',
150-
roomLists[roomCode]
151-
);
152155
io.to(roomCode).emit('updateUserList', roomLists[roomCode]);
153156
}
154157
});

0 commit comments

Comments
 (0)