Learn the basics to make a Real Time web application with React and the Web-socket API. We will bootstrap a small Client-Server app.
This project is in 2 parts. Part 1 explains the goal and setup the front-end app. Part 2 explains how to setup the server and use Zustand as a state management tool.
- React - We'll be using the latest React version (16.13.1) as our web UI library.
- NextJS - a modern solution to build React web applications.
- Zustand - as a small yet efficient state management library. It will make it simple for us to subscribe to both state change and WebSocket (WS) events.
- Socket.io - as our WS implementation for the server and client.
- Yarn Berry (yarn version 2)
We will do simple tic-tac-toe game:
The server will provide the game state and an AI that you can play against.
WebSocket is an event based protocol, we will send event back and forth between our client and server. So let's start define the rules and events for our game:
1/ The user can request to play a new game. This will emit a "new-game" event. The server will create a new game and return its state with the event "state".
2/ The user can emit "play" event with the box id as payload (0 to 8). The server will check if the play is valid and update the game by emitting an event "state".
3/ After the player plays a valid move, the server will play for the Bot and emit an event "state".
4/ After each moves, the server checks if the current player won. If the winner information will be stored in the game state. If the game ends (player wins, loses or ties) the server will emit a "state" event.
6/ The player can start a new game at any moment by requesting a new game (emit "new-game")
At any time you can see the full code in this GitHub repository.
First we will start with the project structure. Then start with some front-end.
In Part 2 we will create our server and finally connect them together.
Step 1: Create a new Project
Let's start by creating a new project with git and yarn 2:
$ mkdir tic-tac-toe && cd $_ $ git init $ yarn set version berry $ yarn init $ git add . && git commit -m "initial commit"
These commands will:
- create a new project directory and cd into it
- initialize the a new git repository
- set install yarn berry locally in to the project
- generate a package.json file
- add and commit the changes
By default zero install should be configured (check the
.gitignore file). If you wish, you can change this behavior before committing.
If you already have yarn berry installed globally, you don't have to install it locally and you could use
yarn create next-app instead of most of the previous commands.
Step 2: Create the Front End
We will use NextJS for that. The motivation is because NextJS has become a popular Framework for React Apps which includes a lot of features and optimizations out of the box. One feature that will be useful for us in this project is the ability to extend the Next's server. We will leverage this feature to create our Web Socket server so we don't have to setup our own server.
Let's start with installing the dependencies. We can follow NextJS's doc to follow the latest instructions:
$ yarn add next react react-dom
If Yarn Berry is not globally installed then
yarn create next-app will use Yarn 1.x and You'll need to set it up and reinstall the dependencies.
The documentation then asks us to add the following scripts in
Now let's create our first page.
First, NextJS will search for a folder called
pages and load each files as different pages. NextJS will search for the folder in the root directory or the
src directory. I prefer having the source in the
src directory, so I'll create the folder like this:
$ mkdir -p src/pages $ ls -R .: package.json README.md src yarn.lock ./src: pages ./src/pages:
Then Finally, we can create our first index page:
I'm using Typescript for this repository so I'm creating a
.tsx file instead of a
If we run
yarn dev now, we will get the following error:
ready - started server on http://localhost:3000 It looks like you're trying to use TypeScript but do not have the required package(s) installed. Please install typescript, @types/react, and @types/node by running: yarn add --dev typescript @types/react @types/node If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).
NextJS will notice that you're trying to use Typescript but we haven't installed the dependencies yet. Just add them as asked:
yarn add --dev typescript @types/react @types/node
Now we can run
yarn dev again and navigate to localhost:3000/ :
$ yarn dev ready - started server on http://localhost:3000 We detected TypeScript in your project and created a tsconfig.json file for you. event - compiled successfully event - build page: /next/dist/pages/_error wait - compiling... event - compiled successfully
Our NextJS app should now be working fine!
If your IDE start throwing "module not found" errors, you might need to do some special configuration for it to work with Yarn Plug&Play system. The easiest way is to follow Yarn's documentation
For example :
yarn dlx @yarnpkg/pnpify --sdk vscode
Now let's work a bit on the UI:
That's it for the UI part ! If we run the app again, we should be able to see a tic tac toe game and see the actions logged in the console.
Next we will create the server and connect them both using WebSockets and Zustand as a state manager.