refactor sockets to be launched with namespace by components

play-node-go/src/App.js

@@ -7,9 +7,6 @@ import { initState } from './reducers/init/stateReducer.init';
 import indexServices from './services/api/indexServices';
 import './App.scss';
 
-import socketIOClient from 'socket.io-client';
-const socket = socketIOClient(config.socketAddress);
-
 
 function App() {
   const [ state, dispatch ] = useReducer(
@@ -35,8 +32,8 @@ function App() {
   }, [])
 
   const socketConnect = () => {
-    if (state.connect) return;
-    dispatch({type:'SOCKET', message: 'LAUNCH', body:{socket, dispatch}});
+    if (state.connect.type) return;
+    dispatch({type:'SOCKET', message: 'LAUNCH', body:{nsp:'', dispatch}});
   }
 
   useEffect(() => {
@@ -77,7 +74,7 @@ function App() {
 
         </Switch>
         <h1>React Boilerplate</h1>
-        <p>{state.connect ? '✓' : ' ⃠'}</p>
+        <p>{state.connect.type ? '✓' : ' ⃠'}</p>
       </div>
     </Router>
   );

play-node-go/src/io.js

@@ -1,11 +1,11 @@
 import socketIOClient from 'socket.io-client';
 import config from './config';
 
-
-const launch = (socket, dispatch) => {
+const launch = (nsp, dispatch) => {
+  const socket = socketIOClient(`${config.socketAddress}/${nsp}`);
 
   socket.on('connected', () => {
-    dispatch({type:'SOCKET', message:'CONNECTED', body:{}});
+    dispatch({ type:'SOCKET', message:'CONNECTED', body:{nsp: socket.nsp} });
   });
   socket.on('connect_error', err => {
     dispatch({ type: 'ERR', message:'SOCKET_ERROR', body: { socketError: err }});
@@ -19,7 +19,8 @@ const launch = (socket, dispatch) => {
   });
 
   socket.on('new_user', (data) => {
-    console.log(data)
+    console.log('new_user received')
+    dispatch({ type: 'ROOM', message: 'NEW_USER', body: data })
   })
 
   return socket;

play-node-go/src/pages/Room/Room.js

@@ -13,7 +13,7 @@ import Development from '../../components/Display/Development/Development';
 const Room = (props) => {
   const { state, dispatch} = props;
   const roomId = parseInt(useParams().id) || 0;
-  const socket = socketIOClient(`${config.socketAddress}/${roomId}`);
+  // const socket = socketIOClient(`${config.socketAddress}/${roomId}`);
 
   const fetchRoomAPI = async () => {
     const response = await roomsServices.getRoomService(roomId);
@@ -37,7 +37,7 @@ const Room = (props) => {
     const action = {
       type: 'SOCKET',
       message: 'CONNECT_ROOM',
-      body: {user: state.user, room: roomId, socket}
+      body: {user: state.user, room: roomId, dispatch}
     }
     dispatch(action)
   }
@@ -81,7 +81,7 @@ const Room = (props) => {
     <div className="Room" data-testid="Room">
       <div className="Room__heading">
         <h2>{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
-        <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span>
+        {/* <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span> */}
         {state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>}
       </div>
 

play-node-go/src/reducers/init/stateReducer.init.js

@@ -11,6 +11,7 @@ export const initState = (): state => {
     messages: {},
     games: {},
     joinGame: {},
-    socket: {}
+    socket: {},
+    connect: {}
   };
 }

play-node-go/src/reducers/rooms/stateReducer.rooms.js

@@ -24,6 +24,11 @@ export const roomsReducer = (state: state, action: action):state => {
       return stateWithGames;
     }
 
+    case 'NEW_USER': {
+      console.log('hey')
+      console.log(action.data)
+      return state;
+    }
       
     default:
       return state;

play-node-go/src/reducers/socket/stateReducer.socket.js

@@ -7,21 +7,27 @@ export const socketReducer = (state: state, action: action):state => {
   switch(action.message) {
 
     case 'CONNECTED':
-      return {...state, connect: 'home'}
+      console.log(action.body.nsp)
+      return {...state, connect: { type: 'home', location: action.body.nsp } }
 
     case 'LAUNCH': {
-      const {socket, dispatch} = action.body;
-      const launchedSocket = io.launch(socket, dispatch);
+      const {nsp, dispatch} = action.body;
+      const launchedSocket = io.launch(nsp, dispatch);
       return {...state, socket: launchedSocket};
     }
 
     case 'CONNECT_ROOM': {
-      const {socket, ...data} = action.body;
-      // if (Object.entries(state.socket)) {
-      //   state.socket.close();
-      // }
-      socket.emit('connect_room', data);
-      return {...state, socket, connect:''};
+      const {user, room, dispatch} = action.body;
+      let priorSocket = state.socket;
+      if (!priorSocket.nsp) {
+        priorSocket = io.launch('', dispatch)
+      }
+      if (priorSocket.nsp !== `/${room}`) {
+        priorSocket.emit('connect_room', {user, room});
+        priorSocket.close();
+      }
+      const socket = io.launch(room, dispatch);
+      return {...state, socket}
     }
     
     default:

server/controllers/api/apiRoom.js

@@ -21,7 +21,7 @@ const show = async (req, res, next) => {
     if (!roomId) throw('missing room parameter')
     
     // TODO eventually add check for user's private rooms
-    socket.roomSocket(roomId);
+    // socket.roomSocket(roomId);
 
     const currentRoom = await roomQueries.findRoomById(roomId);
     const messages = await messageQueries.findMessageByRoom(roomId);

server/socket.js

@@ -6,24 +6,32 @@ const gameQueries = require('./data/queries/game');
 
 io.on('connection', socket=> {
   socket.emit('connected', {message: 'socket connected'});
-
   socket.on('connect_room', data => {
-    const { user, room } = data;
-    const roomIo = io.of(room);
-    roomIo.emit('new_user', user)
-    // roomIo.on('connection', roomSocket => {
-    // })
-  });
+    console.log(data)
+    if (data.user && data.user.email) {
+      delete data.user.email;
+    }
+    const roomIo = io.of(data.room);
+    roomIo.on('connection', socket => {
+      socket.emit('connected')
+      socket.emit('new_user', data);
+    })
+  })
 })
 
 const roomSocket = (roomId) => {
+  
   const roomIo = io.of(roomId)
   roomIo.on('connection', socket => {
-    console.log('connected')
+    console.log('connected room')
     socket.on('connect_room', data => {
-      console.log(data)
+      if (data.user && data.user.email) {
+        delete data.user.email;
+      }
+      socket.emit('new_user', data);
     })
   })
+  return roomIo;
 }
 
 module.exports = {