refactor sockets to be launched with namespace by components
This commit is contained in:
parent
6f8b68a354
commit
16468fb907
8 changed files with 54 additions and 36 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -11,6 +11,7 @@ export const initState = (): state => {
|
||||||
messages: {},
|
messages: {},
|
||||||
games: {},
|
games: {},
|
||||||
joinGame: {},
|
joinGame: {},
|
||||||
socket: {}
|
socket: {},
|
||||||
|
connect: {}
|
||||||
};
|
};
|
||||||
}
|
}
|
|
@ -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;
|
||||||
|
|
|
@ -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:
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
Loading…
Reference in a new issue