added socketio connection

.env.development

@@ -1 +0,0 @@
-HOST=smaga-wiktor-ludo.herokuapp.com

backend/package.json

@@ -7,6 +7,7 @@
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "express-session": "^1.17.1",
-    "mongoose": "^5.12.0"
+    "mongoose": "^5.12.0",
+    "socket.io": "^4.5.1"
   }
 }

backend/server.js

@@ -1,59 +1,68 @@
 const express = require("express");
-const cors = require('cors');
+const cors = require("cors");
-const cookieParser = require('cookie-parser')
+const cookieParser = require("cookie-parser");
-const session = require('express-session')
+const session = require("express-session");
 
 const app = express();
 app.use(cookieParser());
-app.use(express.urlencoded({
+app.use(
-  extended: true
+  express.urlencoded({
-}));
+    extended: true,
+  })
+);
 app.use(express.json());
-app.set('trust proxy', 1)
+app.set("trust proxy", 1);
-app.use(cors({
+app.use(
-  origin: [
+  cors({
-    'http://localhost:5000',
+    origin: [
-    'https://localhost:5000',
+      "http://localhost:5000",
-    'http://localhost:3001',
+      "https://localhost:5000",
-  ],
+      "http://localhost:3001",
-  credentials: true,
+      "http://localhost:3000",
-}))
+    ],
-const PORT = process.env.PORT;
+    credentials: true,
+  })
+);
+const PORT = 5000;
 
 //DATABASE CONFIG
 const mongoose = require("mongoose");
-mongoose.set('useFindAndModify', false);
+mongoose.set("useFindAndModify", false);
-//const CONNECTION_URI = require("./credentials.js").MONGODB_URL;
+const CONNECTION_URI = require("./credentials.js");
 
-mongoose.connect(process.env.MONGODB_URL, {
+mongoose
+  .connect(CONNECTION_URI, {
     useNewUrlParser: true,
-    useUnifiedTopology: true
+    useUnifiedTopology: true,
   })
   .then(() => {
-    console.log('MongoDB Connected…');
+    console.log("MongoDB Connected…");
   })
-.catch(err => console.error(err));
+  .catch((err) => console.error(err));
 
 //SESSION CONFIG]
-var MongoDBStore = require('connect-mongodb-session')(session);
+var MongoDBStore = require("connect-mongodb-session")(session);
 var store = new MongoDBStore({
-  uri: process.env.MONGODB_URL,
+  uri: CONNECTION_URI,
-  collection: 'sessions'
+  collection: "sessions",
 });
-app.use(session({
+app.use(
-  secret: 'lalala',
+  session({
-  resave: true,
+    secret: "lalala",
-  saveUninitialized: false,
+    resave: true,
-  store: store,
+    saveUninitialized: false,
-  cookie: { 
+    store: store,
-    httpOnly: false,
+    cookie: {
-    secure: false,},
+      httpOnly: false,
-}));
+      secure: false,
+    },
+  })
+);
 
-if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === "production") {
-  app.use(express.static('/app/build'))
+  app.use(express.static("/app/build"));
-  app.get('/', (req, res) => {
+  app.get("/", (req, res) => {
-    res.sendFile('/app/build/index.html')
+    res.sendFile("/app/build/index.html");
   });
 }
 
@@ -62,10 +71,19 @@ const roomRoutes = require("./routes/room");
 const playerRoutes = require("./routes/player");
 const gameRoutes = require("./routes/game");
 
-app.use('/player', playerRoutes);
+app.use("/player", playerRoutes);
-app.use('/room', roomRoutes);
+app.use("/room", roomRoutes);
-app.use('/game', gameRoutes)
+app.use("/game", gameRoutes);
 
-app.listen(PORT, ()=>{
+const server = app.listen(PORT, () => {
-    console.log("Server runs on port "+PORT);
+  console.log("Server runs on port " + PORT);
+});
+const socket = require("socket.io");
+const io = socket(server, {
+  cors: {
+    origin: "http://localhost:3000",
+  },
+});
+io.on("connection", () => {
+  console.log("a user connected");
 });

package.json

@@ -13,10 +13,12 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "socket.io": "^4.5.1",
+    "socket.io-client": "^4.5.1",
     "web-vitals": "^1.1.0"
   },
   "scripts": {
-    "start": "node backend/server.js",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "heroku-postbuild": "cd backend && npm install && cd .. && npm install && npm run build",
     "test": "react-scripts test",
@@ -30,7 +32,7 @@
   },
   "engines": {
     "node": "10.16.0"
-},
+  },
   "browserslist": {
     "production": [
       ">0.2%",

procfile

@@ -1 +0,0 @@
-worker: node backend/server.js

src/App.js

@@ -1,11 +1,16 @@
-import React, { useEffect, useState, createContext } from 'react';
+import React, { useEffect, useState, createContext } from "react";
-import axios from 'axios';
+import axios from "axios";
+import { io } from "socket.io-client";
+import { Beforeunload } from "react-beforeunload";
+import {
+  BrowserRouter as Router,
+  Route,
+  Redirect,
+  Switch,
+} from "react-router-dom";
 
-import { Beforeunload } from 'react-beforeunload';
+import Gameboard from "./components/Gameboard";
-import { BrowserRouter as Router , Route , Redirect, Switch } from 'react-router-dom';
+import NameInput from "./components/NameInput";
-
-import Gameboard  from './components/Gameboard'
-import NameInput from './components/NameInput';
 
 export const PlayerDataContext = createContext();
 
@@ -14,52 +19,57 @@ function App() {
   const [redirect, setRedirect] = useState();
 
   useEffect(() => {
-    axios.get('/player', {
+    const socket = io("http://localhost:5000");
-      withCredentials:true,
+    socket.on("connect", () => console.log(socket.id));
-    })
+    axios
-    .then(response => {
+      .get("/player", {
-      setPlayerData(response.data)
+        withCredentials: true,
-      response.data.roomId!=null ? setRedirect(true) : setRedirect(false);
+      })
-    });
+      .then((response) => {
-  },[]);
+        setPlayerData(response.data);
+        response.data.roomId != null ? setRedirect(true) : setRedirect(false);
+      });
+  }, []);
 
-  const handleExit = e => {
+  const handleExit = (e) => {
     e.preventDefault();
-    window.addEventListener('unload', () => {
+    window.addEventListener("unload", () => {
-      axios.post('/player/exit', {withCredentials:true, })
+      axios.post("/player/exit", { withCredentials: true });
     });
-    } 
+  };
 
   const idCallback = () => {
-    axios.get('/player/', {
+    axios
-      withCredentials:true,
+      .get("/player/", {
-    })
+        withCredentials: true,
-    .then(response => {
+      })
-      setPlayerData(response.data);
+      .then((response) => {
-      console.log(response.data);
+        setPlayerData(response.data);
-      setRedirect(true);
+        console.log(response.data);
-    })
+        setRedirect(true);
-  }
+      });
+  };
 
   return (
     <Router>
-      {redirect ?  <Redirect to="/game"/> : <Redirect to="/login"/>}
+      {redirect ? <Redirect to="/game" /> : <Redirect to="/login" />}
       <Switch>
-        <Route exact path = "/">
+        <Route exact path="/">
           LOADING...
         </Route>
-          <Route path="/login">
+        <Route path="/login">
-            <NameInput idCallback = {idCallback}/>
+          <NameInput idCallback={idCallback} />
-          </Route>
+        </Route>
-          <Route path="/game">
+        <Route path="/game">
-            {playerData ? 
+          {playerData ? (
             <Beforeunload onBeforeunload={handleExit}>
               <PlayerDataContext.Provider value={playerData}>
-                <Gameboard/>
+                <Gameboard />
               </PlayerDataContext.Provider>
-            </Beforeunload> : null}
+            </Beforeunload>
-          </Route>
+          ) : null}
-        </Switch>
+        </Route>
+      </Switch>
     </Router>
   );
 }