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 './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>
);

View file

@ -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;

View file

@ -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>

View file

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

View file

@ -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;

View file

@ -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:

View file

@ -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);

View file

@ -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 = {