refactor sockets to be launched with namespace by components

This commit is contained in:
Sorrel Bri 2020-01-27 22:40:03 -08:00 committed by sorrelbri
parent 6f8b68a354
commit 16468fb907
8 changed files with 54 additions and 36 deletions

View file

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

View file

@ -1,25 +1,26 @@
import socketIOClient from 'socket.io-client'; import socketIOClient from 'socket.io-client';
import config from './config'; import config from './config';
const launch = (nsp, dispatch) => {
const launch = (socket, dispatch) => { const socket = socketIOClient(`${config.socketAddress}/${nsp}`);
socket.on('connected', () => { socket.on('connected', () => {
dispatch({type:'SOCKET', message:'CONNECTED', body:{}}); dispatch({ type:'SOCKET', message:'CONNECTED', body:{nsp: socket.nsp} });
}); });
socket.on('connect_error', err => { 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 => { 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) => { 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) => { socket.on('new_user', (data) => {
console.log(data) console.log('new_user received')
dispatch({ type: 'ROOM', message: 'NEW_USER', body: data })
}) })
return socket; return socket;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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