Skip to content

Commit d9395b8

Browse files
r-mcgrathr-mcgrath
committed
navbar-roomscontainer websocket
1 parent 5304a04 commit d9395b8

File tree

3 files changed

+119
-88
lines changed

3 files changed

+119
-88
lines changed

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

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
1414
import { io } from 'socket.io-client';
1515
import store from '../../redux/store';
1616
import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
17-
17+
//pasted from navbarbuttons
18+
import debounce from '../../../../node_modules/lodash/debounce.js';
1819
// for websockets
1920
// Part - join room and room code functionality
2021
let socket;
@@ -80,6 +81,36 @@ const RoomsContainer = () => {
8081
function handleUserEnteredRoom(roomCode) {
8182
initSocketConnection(roomCode);
8283
}
84+
//line 83-113 was pasted in from NavBarButtons
85+
let previousState = store.getState();
86+
87+
// sending info to backend whenever the redux store changes
88+
const handleStoreChange = debounce(() => {
89+
const newState = store.getState();
90+
const roomCode = newState.roomCodeSlice.roomCode;
91+
92+
if (roomCode !== '') {
93+
// Emit the current room code
94+
socket.emit('room-code', roomCode);
95+
}
96+
97+
if (newState !== previousState) {
98+
// Send the current state to the server
99+
socket.emit(
100+
'custom-event',
101+
'sent from front-end',
102+
JSON.stringify(newState),
103+
roomCode
104+
);
105+
previousState = newState;
106+
}
107+
}, 100);
108+
109+
store.subscribe(() => {
110+
if (socket) {
111+
handleStoreChange();
112+
}
113+
});
83114

84115
function joinRoom() {
85116
dispatch(changeRoom(roomCode));

‎app/src/components/top/NavBarButtons.tsx

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -35,88 +35,88 @@ import withStyles from '@mui/styles/withStyles';
3535
const { API_BASE_URL } = config;
3636

3737
// Part - join room and room code functionality
38-
let socket;
39-
40-
function initSocketConnection(roomCode) {
41-
if (socket) {
42-
socket.disconnect();
43-
}
44-
45-
socket = io(API_BASE_URL, {
46-
transports: ['websocket']
47-
});
48-
49-
socket.on('connect', () => {
50-
console.log(`You connected with id: ${socket.id}`);
51-
socket.emit('join-room', roomCode); // Join the room when connected
52-
});
53-
54-
// Receiving the room state from the backend
55-
socket.on('room-state-update', (stateFromServer) => {
56-
const newState = JSON.parse(stateFromServer);
57-
// Dispatch actions to update your Redux store with the received state
58-
store.dispatch(allCooperativeState(newState.appState));
59-
store.dispatch(codePreviewCooperative(newState.codePreviewCooperative));
60-
store.dispatch(cooperativeStyle(newState.styleSlice));
61-
});
62-
63-
// receiving the message from the back end
64-
socket.on('receive message', (event) => {
65-
// console.log('message from server: ', event);
66-
let currentStore: any = JSON.stringify(store.getState());
67-
if (currentStore !== event) {
68-
currentStore = JSON.parse(currentStore);
69-
event = JSON.parse(event);
70-
if (currentStore.darkMode.isDarkMode !== event.darkMode.isDarkMode) {
71-
store.dispatch(toggleDarkMode());
72-
} else if (currentStore.appState !== event.appState) {
73-
store.dispatch(allCooperativeState(event.appState));
74-
} else if (
75-
currentStore.codePreviewSlice !== event.codePreviewCooperative
76-
) {
77-
store.dispatch(codePreviewCooperative(event.codePreviewCooperative));
78-
} else if (currentStore.styleSlice !== event.styleSlice) {
79-
store.dispatch(cooperativeStyle(event.styleSlice));
80-
}
81-
}
82-
console.log('updated user Store from another user: ', store.getState());
83-
});
84-
}
85-
86-
function handleUserEnteredRoom(roomCode) {
87-
initSocketConnection(roomCode);
88-
}
89-
90-
// console.log(store.getState());
91-
let previousState = store.getState();
92-
93-
// sending info to backend whenever the redux store changes
94-
const handleStoreChange = debounce(() => {
95-
const newState = store.getState();
96-
const roomCode = newState.roomCodeSlice.roomCode;
97-
98-
if (roomCode !== '') {
99-
// Emit the current room code
100-
socket.emit('room-code', roomCode);
101-
}
102-
103-
if (newState !== previousState) {
104-
// Send the current state to the server
105-
socket.emit(
106-
'custom-event',
107-
'sent from front-end',
108-
JSON.stringify(newState),
109-
roomCode
110-
);
111-
previousState = newState;
112-
}
113-
}, 100);
114-
115-
store.subscribe(() => {
116-
if (socket) {
117-
handleStoreChange();
118-
}
119-
});
38+
// let socket;
39+
40+
// function initSocketConnection(roomCode) {
41+
// if (socket) {
42+
// socket.disconnect();
43+
// }
44+
45+
// socket = io(API_BASE_URL, {
46+
// transports: ['websocket']
47+
// });
48+
49+
// socket.on('connect', () => {
50+
// console.log(`You connected with id: ${socket.id}`);
51+
// socket.emit('join-room', roomCode); // Join the room when connected
52+
// });
53+
54+
// // Receiving the room state from the backend
55+
// socket.on('room-state-update', (stateFromServer) => {
56+
// const newState = JSON.parse(stateFromServer);
57+
// // Dispatch actions to update your Redux store with the received state
58+
// store.dispatch(allCooperativeState(newState.appState));
59+
// store.dispatch(codePreviewCooperative(newState.codePreviewCooperative));
60+
// store.dispatch(cooperativeStyle(newState.styleSlice));
61+
// });
62+
63+
// // receiving the message from the back end
64+
// socket.on('receive message', (event) => {
65+
// // console.log('message from server: ', event);
66+
// let currentStore: any = JSON.stringify(store.getState());
67+
// if (currentStore !== event) {
68+
// currentStore = JSON.parse(currentStore);
69+
// event = JSON.parse(event);
70+
// if (currentStore.darkMode.isDarkMode !== event.darkMode.isDarkMode) {
71+
// store.dispatch(toggleDarkMode());
72+
// } else if (currentStore.appState !== event.appState) {
73+
// store.dispatch(allCooperativeState(event.appState));
74+
// } else if (
75+
// currentStore.codePreviewSlice !== event.codePreviewCooperative
76+
// ) {
77+
// store.dispatch(codePreviewCooperative(event.codePreviewCooperative));
78+
// } else if (currentStore.styleSlice !== event.styleSlice) {
79+
// store.dispatch(cooperativeStyle(event.styleSlice));
80+
// }
81+
// }
82+
// console.log('updated user Store from another user: ', store.getState());
83+
// });
84+
// }
85+
86+
// function handleUserEnteredRoom(roomCode) {
87+
// initSocketConnection(roomCode);
88+
// }
89+
90+
// // console.log(store.getState());
91+
// let previousState = store.getState();
92+
93+
// // sending info to backend whenever the redux store changes
94+
// const handleStoreChange = debounce(() => {
95+
// const newState = store.getState();
96+
// const roomCode = newState.roomCodeSlice.roomCode;
97+
98+
// if (roomCode !== '') {
99+
// // Emit the current room code
100+
// socket.emit('room-code', roomCode);
101+
// }
102+
103+
// if (newState !== previousState) {
104+
// // Send the current state to the server
105+
// socket.emit(
106+
// 'custom-event',
107+
// 'sent from front-end',
108+
// JSON.stringify(newState),
109+
// roomCode
110+
// );
111+
// previousState = newState;
112+
// }
113+
// }, 100);
114+
115+
// store.subscribe(() => {
116+
// if (socket) {
117+
// handleStoreChange();
118+
// }
119+
// });
120120

121121
const useStyles = makeStyles((theme) =>
122122
createStyles({
@@ -254,9 +254,9 @@ function navbarDropDown(props) {
254254
props.setDropMenu(false);
255255
};
256256

257-
React.useEffect(() => {
258-
console.log('joinedRoom: ', joinedRoom);
259-
}, [joinedRoom]);
257+
// React.useEffect(() => {
258+
// console.log('joinedRoom: ', joinedRoom);
259+
// }, [joinedRoom]);
260260

261261
function joinRoom() {
262262
dispatch(changeRoom(roomCode));

‎config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ const config = {
33
DEV_PORT: 5656,
44
API_BASE_URL: isProduction
55
? 'https://app.reactype.dev'
6-
: 'http://localhost:8080',
7-
// : 'http://localhost:5656',
6+
//: 'http://localhost:8080',
7+
:'http://localhost:5656',
88
API_BASE_URL2: isProduction
99
? 'https://app.reactype.dev'
1010
: 'http://localhost:8080',

0 commit comments

Comments
 (0)