refacor sockets on server and client to utilize dispatch for socket meessages

This commit is contained in:
Sorrel Bri 2020-01-25 16:50:18 -08:00 committed by sorrelbri
parent f6b6134d5b
commit 0b78c78a0a
9 changed files with 106 additions and 112 deletions

View file

@ -1,5 +1,4 @@
import React, {useState, useEffect, useReducer} from 'react'; import React, {useState, useEffect, useReducer} from 'react';
import socketIOClient from 'socket.io-client';
import config from './config'; import config from './config';
import { Switch, Route, BrowserRouter as Router, Redirect } from 'react-router-dom'; import { Switch, Route, BrowserRouter as Router, Redirect } from 'react-router-dom';
import MainWrapper from './pages/Layout/MainWrapper/MainWrapper'; import MainWrapper from './pages/Layout/MainWrapper/MainWrapper';
@ -8,14 +7,11 @@ 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';
export const socket = socketIOClient(config.socketAddress); import socketIOClient from 'socket.io-client';
const socket = socketIOClient(config.socketAddress);
function App() { function App() {
const [fetchData, setFetchData] = useState();
const [socketData, setSocketData] = useState();
const [error, setError] = useState([]);
const [ state, dispatch ] = useReducer( const [ state, dispatch ] = useReducer(
stateReducer, stateReducer,
{}, {},
@ -39,11 +35,8 @@ function App() {
}, []) }, [])
const socketConnect = () => { const socketConnect = () => {
socket.removeAllListeners(); if (state.connect) return;
socket.emit('connect'); dispatch({type:'SOCKET', message: 'LAUNCH', body:{socket, dispatch}});
socket.on('connected', data => setSocketData('socket connected'));
socket.on('connect_error', err => setError([...error, err]));
socket.on('error', err => setError([...error, err]))
} }
useEffect(() => { useEffect(() => {
@ -84,9 +77,7 @@ function App() {
</Switch> </Switch>
<h1>React Boilerplate</h1> <h1>React Boilerplate</h1>
{fetchData ? <p>{fetchData}</p> : <></>} <p>{state.connect ? '✓' : ' ⃠'}</p>
{socketData ? <p>{socketData}</p> : <></>}
{/* {error ? error.map(err => <p>{err}</p>): <></>} */}
</div> </div>
</Router> </Router>
); );

View file

@ -0,0 +1,30 @@
import socketIOClient from 'socket.io-client';
import config from './config';
const launch = (socket, dispatch) => {
socket.on('connected', () => {
dispatch({type:'SOCKET', message:'CONNECTED', body:{}});
});
socket.on('connect_error', err => {
dispatch({type: 'ERR', message:'SOCKET_ERROR', body: {socketError: err}});
});
socket.on('error', err => {
dispatch({type: 'ERR', message:'SOCKET_ERROR', body: {socketError: err}});
});
socket.on('room_connected', (data) => {
dispatch({type: 'ROOM', message: 'CONNECT_ROOM', body: data});
});
socket.on('new_user', (data) => {
console.log(data)
})
return socket;
}
export {
launch
}

View file

@ -11,10 +11,9 @@ import ActionError from '../../components/Error/ActionError/ActionError';
import Development from '../../components/Display/Development/Development'; import Development from '../../components/Display/Development/Development';
const Room = (props) => { const Room = (props) => {
const state = props.state; const { state, dispatch} = props;
const dispatch = props.dispatch;
const roomId = parseInt(useParams().id) || 0; const roomId = parseInt(useParams().id) || 0;
const [ socket, setSocket ] = useState(false); const socket = socketIOClient(`${config.socketAddress}/${roomId}`);
const fetchRoomAPI = async () => { const fetchRoomAPI = async () => {
const response = await roomsServices.getRoomService(roomId); const response = await roomsServices.getRoomService(roomId);
@ -33,44 +32,20 @@ const Room = (props) => {
}, []) }, [])
// ! [start] roomSocket // ! [start] roomSocket
const roomSocket = socketIOClient(`${config.socketAddress}/${roomId}`)
const roomSocketConnect = () => { const roomSocketConnect = () => {
roomSocket.emit('connect'); const action = {
// ! dispatch data type: 'SOCKET',
roomSocket.on('connect', socket => { message: 'CONNECT_ROOM',
setSocket(true) body: {user: state.user, room: roomId, socket}
}); }
roomSocket.on('join_game_request', data => { dispatch(action)
// !
console.log(data)
})
roomSocket.on('connect_error', err => {
setSocket(false)
// !
console.log(err);
});
roomSocket.on('error', err => {
setSocket(false)
// !
console.log(err);
});
} }
useEffect(() => { useEffect(() => {
roomSocketConnect(); roomSocketConnect();
}, []) }, [])
useEffect(() => {
const data = {
user: state.user,
game: state.joinGame
};
console.log('emitting request')
console.log(data)
roomSocket.emit('join_game_request', data)
}, [state.joinGame])
// ! [end] // ! [end]
const renderGames = () => { const renderGames = () => {

View file

@ -1,6 +1,7 @@
//@ flow //@ flow
import type { state } from '../stateReducer'; import type { state } from '../stateReducer';
const socket = require('../../io');
export const initState = (): state => { export const initState = (): state => {
return { return {
@ -9,6 +10,7 @@ export const initState = (): state => {
currentRoom: {}, currentRoom: {},
messages: {}, messages: {},
games: {}, games: {},
joinGame: {} joinGame: {},
socket: {}
}; };
} }

View file

@ -0,0 +1,30 @@
// @flow
import type { state, action } from '../stateReducer';
import { stateReducer } from '../stateReducer';
const io = require('../../io');
export const socketReducer = (state: state, action: action):state => {
switch(action.message) {
case 'CONNECTED':
return {...state, connect: 'home'}
case 'LAUNCH': {
const {socket, dispatch} = action.body;
const launchedSocket = io.launch(socket, 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:''};
}
default:
return state;
}
}

View file

@ -6,11 +6,13 @@ import { indexReducer } from './index/stateReducer.index';
import { roomsReducer } from './rooms/stateReducer.rooms'; import { roomsReducer } from './rooms/stateReducer.rooms';
import { messagesReducer } from './messages/stateReducer.messages'; import { messagesReducer } from './messages/stateReducer.messages';
import { gamesReducer } from './games/stateReducer.games'; import { gamesReducer } from './games/stateReducer.games';
import { socketReducer } from './socket/stateReducer.socket';
export type state = { export type state = {
user: {}, user: {},
errors: {}, errors: {},
messages: [] messages: [],
state: {}
} }
export type action = { export type action = {
@ -40,6 +42,9 @@ export const stateReducer = (state: state, action: action): state => {
case 'ROOMS': case 'ROOMS':
return roomsReducer(errorStrippedState, action); return roomsReducer(errorStrippedState, action);
case 'SOCKET':
return socketReducer(errorStrippedState, action);
case 'ERR': case 'ERR':
return errorReducer(errorStrippedState, action); return errorReducer(errorStrippedState, action);

View file

@ -2,15 +2,14 @@ const roomQueries = require('../../data/queries/room');
const messageQueries = require('../../data/queries/message'); const messageQueries = require('../../data/queries/message');
const gameQueries = require('../../data/queries/game'); const gameQueries = require('../../data/queries/game');
const moveQueries = require('../../data/queries/move'); const moveQueries = require('../../data/queries/move');
const { enableGameSocket } = require('../../socket');
const show = async (req, res, next) => { const show = async (req, res, next) => {
try { try {
const gameId = req.params.id; const gameId = req.params.id;
if (!gameId) throw('missing game parameter') if (!gameId) throw('missing game parameter')
const game = await gameQueries.findGameById(gameId);
enableGameSocket(game.room);
// TODO Promise.all()
const game = await gameQueries.findGameById(gameId);
const record = await moveQueries.findGameRecord(gameId); const record = await moveQueries.findGameRecord(gameId);
res.status(200).json({game, record}) res.status(200).json({game, record})
} }

View file

@ -1,7 +1,7 @@
const roomQueries = require('../../data/queries/room'); const roomQueries = require('../../data/queries/room');
const messageQueries = require('../../data/queries/message'); const messageQueries = require('../../data/queries/message');
const gameQueries = require('../../data/queries/game'); const gameQueries = require('../../data/queries/game');
const {enableRoomSocket} = require('../../socket'); const socket = require('../../socket');
const getAll = async (req, res, next) => { const getAll = async (req, res, next) => {
try { try {
@ -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
enableRoomSocket(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);
@ -30,6 +30,7 @@ const show = async (req, res, next) => {
res.status(200).json(body); res.status(200).json(body);
} }
catch (err) { catch (err) {
console.log(err)
res.status(500).json(err); res.status(500).json(err);
} }
} }

View file

@ -4,68 +4,29 @@ const io = socketIO({ cookie: false });
const gameQueries = require('./data/queries/game'); const gameQueries = require('./data/queries/game');
io.on('connection', ()=> { io.on('connection', socket=> {
io.emit('connected', {message: 'socket connected'}); 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 => {
// })
});
}) })
const enableRoomSocket = () => { const roomSocket = (roomId) => {
const roomSocket = io.of(roomId); const roomIo = io.of(roomId)
roomSocket.on('connection', (socket) => { roomIo.on('connection', socket => {
console.log('connected')
//! Join Game Request queries db for game, ensures unique player joining socket.on('connect_room', data => {
socket.on('join_game_request', async data => { console.log(data)
const gameRequest = await logJoinGameRequest(data);
if (gameRequest.err) {
roomSocket.emit('join_game_request_error', gameRequest.err);
}
roomSocket.emit('join_game_request', gameRequest);
});
});
return roomSocket;
}
const enableGameSocket = (roomId) => {
const gameSocket = io.of(roomId);
let game;
gameSocket.on('connection', (socket) => {
socket.on('joined game', (gameId) => {
game = `game-${gameId}`;
console.log(gameId)
socket.join(game);
// socket
// .to(game)
io.sockets.in(game).emit('success', game)
}) })
})
});
// console.log(game)
// gameSocket
// .to(game)
// .emit(`success`, game)
// socket.on('hey', () => console.log('hey'))
return gameSocket;
} }
module.exports = { module.exports = {
io, io,
enableRoomSocket, roomSocket
enableGameSocket
}
async function logJoinGameRequest (data) {
const {user, game} = data;
const requestedGame = await gameQueries.findGameById(game.id);
if (requestedGame.user_black === user.id) {
return { err: 'players must be unique' }
}
const requestingUser = {...user};
delete requestingUser.email;
return { requestingUser, requestedGame }
} }