The objective of this project was to learn how to use web sockets and how to create a multiplayer game. It was created using Next.js, React and Sockets.io. You can check it out for the English version. Feel free to modify as you wish.
If you want the logic of the game bingo, go to utils → bingo.js.
Install node.js 16 version v16.20.2 combatiable with our application npm 8.19.4 version First, run the development server:
Follow this sequence to test out app :
- cd bingo1
- npm install
- npm run dev
to run in background nohup npm run dev &
Explaination below:
cd bingo1: Change directory to "bingo1" to navigate into the project's root directory.
npm install: Install project dependencies using npm, ensuring required packages are downloaded and configured.
npm run dev: Run the development script, typically used to start a development server or execute other development-related tasks.
nohup npm run dev &: Run the "npm run dev" command in the background using nohup, allowing it to continue running even after the terminal is closed.
Docker Container application
docker build -t imagename rootdir
docker build -t bingo .
docker run -p 3000:3000 -d --name bingo your-image-name
docker run -p 3000:3000 -d --name bingoapp bingo
# Build and start the Docker container
docker-compose up -d
To stop the containers, you can use the following command:
# Stop the Docker containers
docker-compose down
# Restart the Docker after permissions Granted
sudo usermod -aG docker ubuntu
sudo usermod -aG jenkins $USER
sudo systemctl restart docker
docker-compose build
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
## Example
You can create a room where multiplayers can join to participate:
Changes will reflect on all participants' screens in the room:
## FlowChart
```mermaid
flowchart TB
home --> cond{select}
cond --> cr[create room]
cond --> jr[join room]
cr --> wp[wait players / start game]
jr --> ws[wait start game]
wp --> hd[host display]
ws --> pd[player display]
hd --> dw[display winner]
pd --> dw