From a0d721ab9a1ea2de10c9d4fd95c74d483ee21150 Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Mon, 27 Jan 2020 22:40:03 -0800 Subject: [PATCH] refactor sockets to be launched with namespace by components --- .../play-node-go/play-node-go/src/App.js | 9 +++---- .../play-node-go/play-node-go/src/io.js | 15 ++++++----- .../play-node-go/src/pages/Room/Room.js | 6 ++--- .../src/reducers/init/stateReducer.init.js | 3 ++- .../src/reducers/rooms/stateReducer.rooms.js | 5 ++++ .../reducers/socket/stateReducer.socket.js | 24 ++++++++++------- .../server/controllers/api/apiRoom.js | 2 +- .../packages/play-node-go/server/socket.js | 26 ++++++++++++------- 8 files changed, 54 insertions(+), 36 deletions(-) diff --git a/packages/server/packages/play-node-go/play-node-go/src/App.js b/packages/server/packages/play-node-go/play-node-go/src/App.js index 05cb505..b9da5a7 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/App.js +++ b/packages/server/packages/play-node-go/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() {

React Boilerplate

-

{state.connect ? '✓' : ' ⃠'}

+

{state.connect.type ? '✓' : ' ⃠'}

); diff --git a/packages/server/packages/play-node-go/play-node-go/src/io.js b/packages/server/packages/play-node-go/play-node-go/src/io.js index 4219a30..cdf0c7f 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/io.js +++ b/packages/server/packages/play-node-go/play-node-go/src/io.js @@ -1,25 +1,26 @@ 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}}); + dispatch({ type: 'ERR', message:'SOCKET_ERROR', body: { socketError: err }}); }); socket.on('error', err => { - dispatch({type: 'ERR', message:'SOCKET_ERROR', body: {socketError: err}}); + dispatch({ type: 'ERR', message:'SOCKET_ERROR', body: { socketError: err } }); }); socket.on('room_connected', (data) => { - dispatch({type: 'ROOM', message: 'CONNECT_ROOM', body: data}); + dispatch({ type: 'ROOM', message: 'CONNECT_ROOM', body: data }); }); socket.on('new_user', (data) => { - console.log(data) + console.log('new_user received') + dispatch({ type: 'ROOM', message: 'NEW_USER', body: data }) }) return socket; diff --git a/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js b/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js index fb9d938..d808365 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js +++ b/packages/server/packages/play-node-go/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) => {

{state.currentRoom ? state.currentRoom.name : 'Loading'}

- {socket ? '✓' : ' ⃠'} + {/* {socket ? '✓' : ' ⃠'} */} {state.errors.joinGame ? : <>}
diff --git a/packages/server/packages/play-node-go/play-node-go/src/reducers/init/stateReducer.init.js b/packages/server/packages/play-node-go/play-node-go/src/reducers/init/stateReducer.init.js index 10a1ecc..33e66f1 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/reducers/init/stateReducer.init.js +++ b/packages/server/packages/play-node-go/play-node-go/src/reducers/init/stateReducer.init.js @@ -11,6 +11,7 @@ export const initState = (): state => { messages: {}, games: {}, joinGame: {}, - socket: {} + socket: {}, + connect: {} }; } \ No newline at end of file diff --git a/packages/server/packages/play-node-go/play-node-go/src/reducers/rooms/stateReducer.rooms.js b/packages/server/packages/play-node-go/play-node-go/src/reducers/rooms/stateReducer.rooms.js index a706518..6b35b08 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/reducers/rooms/stateReducer.rooms.js +++ b/packages/server/packages/play-node-go/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; diff --git a/packages/server/packages/play-node-go/play-node-go/src/reducers/socket/stateReducer.socket.js b/packages/server/packages/play-node-go/play-node-go/src/reducers/socket/stateReducer.socket.js index f7c12d8..e1ef48a 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/reducers/socket/stateReducer.socket.js +++ b/packages/server/packages/play-node-go/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: diff --git a/packages/server/packages/play-node-go/server/controllers/api/apiRoom.js b/packages/server/packages/play-node-go/server/controllers/api/apiRoom.js index e319484..7208adf 100644 --- a/packages/server/packages/play-node-go/server/controllers/api/apiRoom.js +++ b/packages/server/packages/play-node-go/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); diff --git a/packages/server/packages/play-node-go/server/socket.js b/packages/server/packages/play-node-go/server/socket.js index 4df6a09..384358a 100644 --- a/packages/server/packages/play-node-go/server/socket.js +++ b/packages/server/packages/play-node-go/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 = {