added fetching data with socketio

backend/controllers/serverController.js

@@ -1,23 +1,23 @@
-const session = require("express-session");
+const session = require('express-session');
-const CONNECTION_URI = require("../credentials.js");
+const CONNECTION_URI = require('../credentials.js');
-const MongoDBStore = require("connect-mongodb-session")(session);
+const MongoDBStore = require('connect-mongodb-session')(session);
 const store = new MongoDBStore({
     uri: CONNECTION_URI,
-  collection: "sessions",
+    collection: 'sessions',
 });
 const sessionMiddleware = session({
-  secret: "lalala",
-  resave: true,
-  saveUninitialized: false,
     store: store,
     credentials: true,
     cookie: {
         httpOnly: false,
         secure: false,
     },
+    secret: 'secret',
+    saveUninitialized: true,
+    resave: true,
+    maxAge: 20000,
 });
 
-const wrap = (expressMiddleware) => (socket, next) =>
+const wrap = expressMiddleware => (socket, next) => expressMiddleware(socket.request, {}, next);
-  expressMiddleware(socket.request, {}, next);
 
 module.exports = { sessionMiddleware, wrap };

backend/handlers/playerHandler.js

@@ -53,7 +53,7 @@ module.exports = (io, socket) => {
             ready: false,
             color: colors[room.players.length],
         });
-        const updatedRoom = { players: room.players };
+        let updatedRoom = { players: room.players };
         // Checking if the room is full
         if (room.players.length === 4) {
             // Changes the properties of the room to the state to start the game

backend/handlers/roomHandler.js

@@ -0,0 +1,35 @@
+const RoomModel = require('../schemas/room');
+
+module.exports = (io, socket) => {
+    const req = socket.request;
+    const getData = () => {
+        RoomModel.findOne({ _id: req.session.roomId }, function (err, room) {
+            if (!room) return err;
+            if (room.nextMoveTime <= Date.now()) {
+                changeCurrentMovingPlayer();
+            } else {
+                io.to(req.session.roomId).emit('room:data', JSON.stringify(room));
+            }
+        });
+    };
+
+    socket.on('room:data', getData);
+
+    function changeCurrentMovingPlayer() {
+        RoomModel.findOne({ _id: req.session.roomId }, function (err, room) {
+            if (!room) return err;
+            const index = room.players.findIndex(player => player.nowMoving === true);
+            const roomSize = room.players.length;
+            room.players[index].nowMoving = false;
+            if (index + 1 === roomSize) {
+                room.players[0].nowMoving = true;
+            } else {
+                room.players[index + 1].nowMoving = true;
+            }
+            room.nextMoveTime = Date.now() + 15000;
+            RoomModel.findOneAndUpdate({ _id: req.session.roomId }, room, function (err, updatedRoom) {
+                io.to(req.session.roomId).emit('room:data', JSON.stringify(updatedRoom));
+            });
+        });
+    }
+};

backend/routes/room.js

@@ -1,47 +0,0 @@
-const express = require("express");
-const router = express.Router();
-const RoomModel = require("../schemas/room");
-
-
-//get room values
-router.get("/", function (req, res) {
-    RoomModel.findOne(
-        { _id: req.session.roomId }, //find room by id
-        function (err, docs) {
-            if (err) {
-                console.log(err);
-            } else {
-                if (docs) {
-                    if (docs.nextMoveTime <= Date.now()) {
-                        RoomModel.findOne({ _id: req.session.roomId }, function (err, doc) {
-                            if (err) {
-                                res.status(500).send(err);
-                            } else {
-                                const index = doc.players.findIndex(player => player.nowMoving === true);
-                                const roomSize = doc.players.length;
-                                doc.players[index].nowMoving = false;
-                                if (index + 1 === roomSize) {
-                                    doc.players[0].nowMoving = true;
-                                } else {
-                                    doc.players[index + 1].nowMoving = true;
-                                }
-                                doc.nextMoveTime = Date.now() + 15000;
-                                RoomModel.findOneAndUpdate({ _id: req.session.roomId }, doc, function (err, docs) {
-                                    if (err) {
-                                        res.status(500).send(err);
-                                    } else {
-                                        res.send(docs);
-                                    }
-                                });
-                            }
-                        });
-                    } else {
-                        res.send(docs);
-                    }
-                }
-            }
-        }
-    );
-});
-
-module.exports = router;

backend/server.js

@@ -3,6 +3,7 @@ const cors = require('cors');
 const cookieParser = require('cookie-parser');
 const { sessionMiddleware, wrap } = require('./controllers/serverController');
 const registerPlayerHandlers = require('./handlers/playerHandler');
+const registerRoomHandlers = require('./handlers/roomHandler');
 const PORT = 8080;
 const mongoose = require('mongoose');
 const CONNECTION_URI = require('./credentials.js');
@@ -73,20 +74,19 @@ io.use(wrap(sessionMiddleware));
 
 io.on('connection', socket => {
     registerPlayerHandlers(io, socket);
+    registerRoomHandlers(io, socket);
     if (socket.request.session.roomId) {
         socket.join(socket.request.session.roomId);
-        socket.emit('player:data', JSON.stringify(session));
+        socket.emit('player:data', JSON.stringify(socket.request.session));
         io.to(socket.request.session.roomId).emit('player joined');
     }
 });
 
 //ROUTES CONFIG
-const roomRoutes = require('./routes/room');
 const playerRoutes = require('./routes/player');
 const gameRoutes = require('./routes/game');
 
 app.use('/player', playerRoutes);
-app.use('/room', roomRoutes);
 app.use('/game', gameRoutes);
 
 if (process.env.NODE_ENV === 'production') {

src/components/Gameboard.jsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useContext, useCallback } from 'react';
-import { PlayerDataContext } from '../App'
+import { PlayerDataContext, SocketContext } from '../App';
 import axios from 'axios';
-import Map from './game-board-components/Map'
+import Map from './game-board-components/Map';
-import Dice from './game-board-components/Dice'
+import Dice from './game-board-components/Dice';
-import Navbar from './Navbar'
+import Navbar from './Navbar';
 
 const Gameboard = () => {
     // Context data
+    const socket = useContext(SocketContext);
     const context = useContext(PlayerDataContext);
     // Render data
     const [pawns, setPawns] = useState([]);
@@ -20,26 +21,29 @@ const Gameboard = () => {
     const checkWin = useCallback(() => {
         // Player wins when all pawns with same color are inside end base
         if (pawns.filter(pawn => pawn.color === 'red' && pawn.position === 73).length === 4) {
-            alert("Red Won")
+            alert('Red Won');
         } else if (pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 79).length === 4) {
-            alert("Blue Won")
+            alert('Blue Won');
         } else if (pawns.filter(pawn => pawn.color === 'green' && pawn.position === 85).length === 4) {
-            alert("Green Won")
+            alert('Green Won');
         } else if (pawns.filter(pawn => pawn.color === 'yellow' && pawn.position === 91).length === 4) {
-            alert("Yellow Won")
+            alert('Yellow Won');
         }
     }, [pawns]);
     // Fetching game data
     const fetchData = useCallback(() => {
-        axios.get('/room/',{
+        socket.emit('room:data');
-            withCredentials:true,
+    }, []);
-        }).then((response)=>{
+
+    useEffect(() => {
+        socket.on('room:data', data => {
+            data = JSON.parse(data);
             // Filling navbar with empty player nick container
-            while(response.data.players.length !== 4){
+            while (data.players.length !== 4) {
-                response.data.players.push({name: "...",});
+                data.players.push({ name: '...' });
-            };
+            }
             // Checks if client is currently moving player by session ID
-            const nowMovingPlayer = response.data.players.find(player => player.nowMoving === true);
+            const nowMovingPlayer = data.players.find(player => player.nowMoving === true);
             if (nowMovingPlayer) {
                 if (nowMovingPlayer._id === context.playerId) {
                     setNowMoving(true);
@@ -49,22 +53,19 @@ const Gameboard = () => {
                 }
             }
             checkWin();
-            setPlayers(response.data.players);
+            setPlayers(data.players);
-            setPawns(response.data.pawns);
+            setPawns(data.pawns);
-            setTime(response.data.nextMoveTime);
+            setTime(data.nextMoveTime);
-            setStarted(response.data.started);
+            setStarted(data.started);
-        })
+        });
-    },[checkWin, context.playerId]);
-    
-    useEffect(() => {    
         //sending ajax every 1 sec
         const interval = setInterval(fetchData, 1000);
         return () => clearInterval(interval);
     }, [fetchData]);
     // Callback to handle dice rolling between dice and map component
-    const rolledNumberCallback = (number) => {
+    const rolledNumberCallback = number => {
         setRolledNumber(number);
-    }
+    };
 
     return (
         <>
@@ -72,8 +73,7 @@ const Gameboard = () => {
             {nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback} /> : null}
             <Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
         </>
-    )
+    );
-
+};
-}
 
 export default Gameboard;