Merge pull request #25 from oslabs-beta/Lauren

rejoining bug fix

Author: jujupro

app/src/components/left/RoomsContainer.tsx

@@ -56,7 +56,6 @@ import {
   DeleteContextPayload,
   addComponentToContext
 } from '../../../src/redux/reducers/slice/contextReducer';
-import Canvas from '../components/main/Canvas';
 
 // // for websockets
 // // Part  - join room and room code functionality
@@ -126,7 +125,8 @@ const RoomsContainer = () => {
       });
 
       socket.on('child data from server', (childData: object) => {
-        console.log('child data received by users', childData);
+        console.log(`child data received by socket ${socket.id}`, childData);
+        console.log(socket);
         store.dispatch(addChild(childData));
       });
 

app/src/components/main/Canvas.tsx

@@ -231,7 +231,9 @@ function Canvas(props: {}): JSX.Element {
             contextParam: contextParam
           });
 
-          console.log('emit addChildAction event is triggered in canvas');
+          console.log(
+            `emit addChildAction event is triggered in canvas from ${socket.id}`
+          );
         }
       } else if (item.newInstance && item.instanceType === 'Component') {
         let hasDiffParent = false;

app/src/helperFunctions/socket.ts

@@ -4,12 +4,14 @@ import config from '../../../config';
 let socket = null;
 
 export const initializeSocket = () => {
-  if (socket) socket.connect();
-  if (!socket) {
-    socket = io(config.API_BASE_URL, { transports: ['websocket'] });
-    console.log('A user connected');
-    console.log('socket:', socket);
-  }
+  socket = io(config.API_BASE_URL, {
+    transports: ['websocket'],
+    // will force new socket connection if re-joining to prevent double emits
+    forceNew: true
+  });
+  console.log('A user connected');
+  console.log('socket:', socket);
+  // }
 };
 
 // export socket to ensure a single socket instance across the entire app

server/server.ts

@@ -182,6 +182,7 @@ io.on('connection', (client) => {
     if (roomCode) {
       //server send the data to everyone in the room
       client.to(roomCode).emit('child data from server', childData);
+      console.log(`client id: ${client.id} sending from server ${childData}`);
     }
   });