Setup Socket.io

client/package.json

@@ -8,7 +8,8 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "socket.io-client": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

@@ -1,23 +1,34 @@
-import React from "react";
+import React, { useReducer } from "react";
 import { MuiThemeProvider } from "@material-ui/core";
 import { BrowserRouter, Route } from "react-router-dom";
 
 import { theme } from "./themes/theme";
 import LandingPage from "./pages/Landing";
 import CreateGame from "./pages/create_game/CreateGame";
+import GameIO from "./socket_io/GameIO";
 import GameLobby from "./pages/game_lobby/GameLobby";
 
 import "./App.css";
 
+export const AppContext = React.createContext({});
+
 function App() {
+  const [gameIOState, gameIODispatch] = useReducer(
+    GameIO.reducer,
+    GameIO.initialState
+  );
+  const value = { gameIO: { state: gameIOState, dispatch: gameIODispatch } };
+
   return (
-    <MuiThemeProvider theme={theme}>
-      <BrowserRouter>
-        <Route exact path="/" component={LandingPage} />
-        <Route path="/create_game" component={CreateGame} />
-        <Route path="/game_lobby" component={GameLobby} />
-      </BrowserRouter>
-    </MuiThemeProvider>
+    <AppContext.Provider value={value}>
+      <MuiThemeProvider theme={theme}>
+        <BrowserRouter>
+          <Route exact path="/" component={LandingPage} />
+          <Route path="/create_game" component={CreateGame} />
+          <Route path="/game_lobby" component={GameLobby} />
+        </BrowserRouter>
+      </MuiThemeProvider>
+    </AppContext.Provider>
   );
 }
 

client/src/pages/create_game/CreateGame.js

@@ -1,14 +1,35 @@
-import React from "react";
+import React, { useState, useContext } from "react";
 import Button from "@material-ui/core/Button";
 import Container from "@material-ui/core/Container";
 import Grid from "@material-ui/core/Grid";
 import Input from "@material-ui/core/Input";
 import Typography from "@material-ui/core/Typography";
 
+import { AppContext } from "../../App";
+import GameIO from "../../socket_io/GameIO";
 import Header from "../common/Header";
 import "./CreateGame.css";
 
 function CreateGame() {
+  const [matchID, setMatchID] = useState("");
+  const { gameIO } = useContext(AppContext);
+
+  const onChange = (event) => {
+    const currentInput = event.target.value;
+    setMatchID(currentInput);
+  };
+
+  const joinGame = () => {
+    const action = {
+      type: GameIO.ACTION_TYPE.START,
+    };
+    if (matchID.length > 0) {
+      // check if matchID is valid
+      gameIO.dispatch(action); // then turn on socket for the game
+      // transition to Game Lobby with a session ID from opened socket
+    }
+  };
+
   return (
     <Container>
       <Grid container direction="column" justify="center" alignItems="center">
@@ -29,10 +50,23 @@ function CreateGame() {
                     <Grid item>
                       <Grid container alignItems="center">
                         <Grid item className="grid-input">
-                          <Input placeholder="Enter Match ID" />
+                          <Input
+                            onChange={(event) => {
+                              onChange(event);
+                            }}
+                            value={matchID}
+                            placeholder="Enter Match ID"
+                          />
                         </Grid>
                         <Grid item>
-                          <Button variant="contained" color="primary">
+                          <Button
+                            onClick={() => {
+                              joinGame();
+                            }}
+                            disabled={matchID.length <= 0}
+                            variant="contained"
+                            color="primary"
+                          >
                             Join
                           </Button>
                         </Grid>

client/src/socket_io/GameIO.js

@@ -0,0 +1,32 @@
+import socketIO from "socket.io-client";
+
+const NAMESPACE = "/game";
+
+const ACTION_TYPE = {
+  START: "START",
+  SHUTDOWN: "SHUTDOWN",
+};
+
+const initialState = {
+  io: null,
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case ACTION_TYPE.START:
+      if (!state.io) {
+        state.io = socketIO(NAMESPACE);
+      }
+      return state;
+    case ACTION_TYPE.SHUTDOWN:
+      if (state.io) {
+        state.io.disconnect();
+        state.io = null;
+      }
+      return state;
+    default:
+      return state;
+  }
+};
+
+export default { ACTION_TYPE, initialState, reducer };

server/bin/www

@@ -9,6 +9,7 @@ require("dotenv").config();
 
 var app = require("../app");
 var http = require("http");
+const socketIo = require("socket.io");
 
 /**
  * Get port from environment and store in Express.
@@ -23,6 +24,12 @@ app.set("port", port);
 
 var server = http.createServer(app);
 
+/**
+ * Create Socket.io instance.
+ */
+
+const io = socketIo(server);
+
 /**
  * Listen on provided port, on all network interfaces.
  */
@@ -87,3 +94,17 @@ function onListening() {
 
   console.log("Listening on " + bind);
 }
+
+/**
+ * Socket.io setup
+ */
+
+const gameIO = io.of("/game"); // socket for handling game actions
+const chatIO = io.of("/chat"); // socket for chat
+
+gameIO.on("connection", (socket) => {
+  console.log(`New client connected: ${socket.id}`);
+  socket.on("disconnect", () => {
+    console.log(`A client disconnected: ${socket.id}`);
+  });
+});