Building a Dead-Simple Multiplayer Tic-Tac-Toe Game using Angular, Nodejs and socket.io Rooms: Part 1

TL;DR

Implementing Multiplayer Tic-Tac-Toe Game using Angular, Nodejs and socket can be complex and time-consuming, But it doesn’t have to be.In this article, we will implement the Multiplayer Tic-Tac-Toe Game using Angular and Nodejs as the Page title suggests. Basically, we will write the client side of the Game in Angular and server side will be in Nodejs. Out of the box here we will learn how to use rooms in socket.io and how to consume it in the Angular application. Note that, The winner of the game will be calculated on the server only.




 

     Download

     Video Demo

 

1. Why Multiplayer Tic-Tac-Toe Game using Angular, Nodejs

A few months ago when I published private chat application in angular, I received a lot of suggestions to use socket.io rooms and namespace feature within that application. So I decided to write this article, In this article, we will be using socket.io’s Rooms feature which is very easy to use. I have divided this application into two parts. Each part of this article covers unique part in building the Multiplayer Tic-Tac-Toe Game.

Part 1 =>We will create a Nodejs server for the Game.

Part 2 => Here we will implement the Actual Game using Angular.

So without further ado, Let’s get to the work.

2. Creating a new Nodejs project

1. Let’s start off by creating a new Nodejs project by using ng init command.This command will create a new package.json file.

2. As you can see in below package.json file we have installed Redis as a dependency module, So I think you have already know that we will be using Redis database. Here the role of Redis Database is just to store and fetch the data from database nothing more than that. Below is my package.json file for this application.

package.json:

3. Creating a NodeJs Server

1. Before writing our Nodejs Server let’s take look at our project directory structure shown below.

2. Let’s start from the top, The first folder is /node_modules and after that, there is /utils folder, where all the magic will happen. Basically, in utils folder, we have three files as you can see in below image.

db.js => In this file we will write a code to connect Redis database.

routes.js => This file will hold the code for HTTP routes hence the name routes.js.

socket.js => Here we will write the socket events for the multiplayer game.

server.js => In this file we will write a code to start a Nodejs server and we will initiate the socket events and routes of the application.

 

Multiplayer Tic-Tac-Toe Game using Angular, Nodejs Drirectory structure3. Create a server.js in the root of the project, which will be our entry point for the project.Here we will define our route and we will start the server.

=> The appConfig() method will set the application configuration.

=> In includeRoutes() method we will execute the application route.

=> The appExecute() method will call the appConfig() as well as appExecute() and it will run the nodejs server.

server.js:

4. Connecting Redis database with the application

1. Here I assume you have installed the Redis on your working machine and you are ready with your Redis server to connect with this application.

2. Create a db.js file inside the /utils folder and write down the below code.In the below code, we are connecting the Redis database by using the redis module which is available on NPM.

3. The first reason for using Redis is we would require soocket.io room’s data in different stages of the application and second It’s very fast when it comes to storing and retrieving the data from the database.

db.js:

5. Creating a Socket Events

1. Now that we have connected our application to Redis Database let’s use it in action.

2. Create socket.js inside the /utils folder and write down the below code. In Thick words, the code will receive the socket event from the client and emit the events from the server.

Explanation:

=> The first method is constructor which expects two parameters. First is socket object and the second parameter is object of Redis database connection. Then we have Tic-Tac-Toe game’s win combination in the form of an array which we will use down the road.

=> Then just below to that line we are storing the initial room count and the empty rooms and full rooms inside the Redis database.

=> The socketEvent() method puts the life into this file, this method does all the work. In this method, we will listen and emit the socket event. So let’s start from the top to bottom.

  • create-room : This event will be called when a user will click on the create new room button. Here we will fetch the data from Redis and after creating a new room, we update the data into Redis and socket will emit an updated data.
  • join-room : In this event, a player can join an Existing Room, so we do the same operation as above.
  • send-move : This event decides which player is a winner by comparing the array sent from the client with win combination array that we have already defined inside the constructor method.
  • disconnecting : In this event, we will remove the user from a socket room and we will notify the opponent.

=> As I said above the send-move will decide the winner of the Game, once the winner is determined then we will send the winner’s message we will restart the Game. This will be handled on the client side, which means we will do this in Angular.

socket.js:

6. Last but not the least A HTTP Call

When user will open the home page of the application we will show the available rooms to play and the total number of Rooms created on the server. So for that, we will call HTTP request which will fetch the records from Redis Data and throw the response from the server to the client.

=> Create routes.js file inside the /utils folder, and write down the below code.

=> In the below code we have /getRoomStats GET request which will send the available rooms and total rooms by fetching the records from the Redis database.

routes.js:

Well, till now you have completed the first of the Multiplayer Tic-Tac-Toe Game using Angular, Nodejs, and socket and now your Game server ready to rock n roll. Now the only thing left is to create Game in Angular, Which we will discuss and build together in the next part of this article.

Till now If you have any doubts or suggestions Please do let me know in below comment box, I will be happy to reply you. So, I will meet in the next part of this article.