TIC TAC TOE Game Server

Objective: Build a game server to better understand backend development and REST APIs

Client-Server Architecture

The basic architecture of this project entails a server that communicates with multiple clients and saves the game state of each room in a database. For simplicity sake and to focus mainly on the backend development, the multiplayer game will be Tic Tac Toe with only 2 players per room. I will be using a json file as the database, but eventually might explore using other infrastructure such as SQL. I am building an express server with Node.js and express-ws.

The main endpoints of the server are:

GET: /game (Serve game page.)

GET: /start (Find an open session. If none are open, start a new session. Send back session ID.)

GET: /sessionStatus (Sends back true or false if room is full and the game is ready to be played.)

GET: /clients (Gets all the active clients using webhook connections.)

WEBSOCKET: /:sessionID (Establish webhook connection for client. Sends current game state with with all moves as soon as new message from client is received)

The schema of the database is as follows:

{
  "sessionId": {
    "players": int,
    "data": array of strings
  }
}

Example data:

{
  "HPYXEL": {
    "players": 2,
    "data": ["X","O","X","X"]
  },
  "IZIEHK": {
    "players": 1,
    "data": []
  }
}

The work flow is as follows (* denotes optional features time permitting):

  1. Users arrive at home page.
    • Can read game instructions.
    • Can view how many players are online
    • Press “Find Game” to begin.
    • Press “Host Game”/ “Join by ID” to begin.*
  2. When “Find Game” is pressed, client sends GET “/start” request and receives session ID. Players are assigned to a random open room.
  3. Client sends WEBSOCKET: “/:sessionID ‘request and connection is established.
  4. Client sends GET “/sessionStatus” request to determine if room is full.
  5. When room is full, game begins. Database gets updated as users play and send new plays via webhook.
  6. Game ends and players are taken to the Home page.
  7. Users have the option to play again with the same opponent*

Potential features in the frontend:

  • Users can name themselves
  • Have a chat room.

One technical feature I need more research on is how to detect when a webhook connection becomes disconnected/interupted and how to stop the game.

I currently have the game logic, database, and “/start”, “/game” endpoints written. However, I am still navigating the webhook endpoint and reading everything I can do with express-ws. Once I feel confident in the backend, I will stylize the frontend and design the interface.

Excited to keep working on this!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s