As the world is locked down due to the COVID-19 Corona Virus, we are quarantined at home. We miss the company of our families and friends, so online games are the only option to play together. We are going to create an online multiplayer game that can be used for any tabletop gameplay.
The frontend is going to be JavaScript, Node.js, Phaser3, the backend is Express and Socket.IO.
The framework for this game came from the great tutorial at How to Build a Multiplayer Card Game with Phaser 3, Express, and Socket.IO
Install a web server for development
I have installed XAMPP from https://www.apachefriends.org/index.html
The home directory where the index.html should be is at C:\xampp\htdocs
Install Node.js
Install the latest version of Node.js from https://nodejs.org/en/download/
Install Phaser3
Install Phaser 3 based on http://phaser.io/download/stable as of writing with
npm install phaser@3.22.0
The getting started guide on Phaser 3 is at Getting Started with Phaser 3
A great game tutorial is at Making your first Phaser 3 game
The multiplayer online game development
Client
To test the client on your workstation, start the Node.js client from a terminal window to display the web page for the players.
cd client
npm install
npm start
The default browser opens with the http://localhost:8080/ address.
Server
To test the server on your workstation start the multiplayer server in another terminal window
cd into the root directory above the client. The next command will ask questions and create a new package.json file
cd server
npm init
Install Express, Socket.IO, and Nodemon
npm install --save express socket.io nodemon
Start the server
npm run start
or
node server.js
Build the application
Stop the client development server, otherwise you will get the error message
Error: EPERM: operation not permitted, lstat ‘…\client\dist\src\assets’
Build the client application
cd client
npm update
npm run build
Deploy the application on the workstation
Copy the assets into the dist directory
cd client
mkdir -p dist/src/assets
cp src/assets/* dist/src/assets
Copy the contents of the client\dist directory to the webserver
mkdir -p C:/xampp/htdocs/rummy
cp -r dist/* C:/xampp/htdocs/rummy
Start the Express server
To provide the Socket.IO functionality in the root of the game development directory execute
cd server
npm run start
Test the multiplayer application in the local network
Use your workstation as the test server and connect to it from another computer.
Set the Socket.IO server URL
To be able to connect to the same Express server from the workstation and from another computer on the same network change the Socket.IO URL in the client/src/scenes/game.js file.
this.socket = io('http://MY_COMPUTER_IP:3000');
Expose the Express server on your workstation to the local network
Open port 3000 in the Windows firewall.
Start the webserver
Open the XAMPP Control Panel and click the Apache Start button
Open the website
In a web browser navigate to http://MY_COMPUTER_IP/rummy/
Build the Docker image
Based on the great post at Dockerizing a Node.js web app
Create a Dockerfile in the server directory
FROM node:12
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# The wildcard will copy both the package.json AND package-lock.json files (npm@5+)
COPY package*.json ./
RUN npm install
# If you are building your code for production
# RUN npm ci --only=production
# Copy all files
COPY . .
# The server listens on port 3000 by default
EXPOSE 3000
CMD [ "node", "server.js" ]
Build the server Docker image
cd server
docker build -t robbers-rummy-server .
Create a Dockerfile in the client directory. We will use a two-stage build process to make the final image as lean as possible. We build the application in a Node.js container and run it in an Nginx container.
FROM node:12 as builder
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./
RUN npm install
# If you are building your code for production
# RUN npm ci --only=production
# Bundle app source
COPY . .
RUN npm update
RUN npm run build
# Create asset directory
RUN mkdir -p dist/src/assets
# Copy the images to the dist folder
COPY src/assets/* dist/src/assets/
FROM nginx:alpine as runner
WORKDIR /usr/share/nginx/html
COPY --from=builder usr/src/app/dist/* ./
# Copy the images from the source
RUN mkdir -p src/assets
COPY --from=builder /usr/src/app/src/assets/* src/assets/
EXPOSE 80
Build the client Docker image
cd client
docker build -t robbers-rummy .
Launch the Docker containers
Start the server container from any directory
docker run -p 3000:3000 -d robbers-rummy-server
Start the client website container from any directory
docker run -p 80:80 -d robbers-rummy
Stop the Docker conainers
Get the container IDs
docker ps
Stop and remove the containers using the container IDs
docker stop MY_CONTAINER_ID
docker rm MY_CONTAINER_ID
Use Docker Compose
To launch the server and the client website together we will create a docker-compose.yml file in the root of the application
version: '3'
services:
api:
image: robbers-rummy-server
build: .
networks:
- backend
ports:
- "3000:3000"
web-cli:
image: robbers-rummy
networks:
- backend
ports:
- "80:80"
networks:
backend:
driver: bridge
Start the containers with Docker Compose from the application root directory
docker-compose up -d
To stop the containers launched with Docker Compose from the application root directory
docker-compose down
Host the application in AWS
The application consists of two parts: a static website with the game Javascript files, and the Express server to run Socket.IO
We will host the static website in AWS S3, and the server Docker container in an AWS ECS Fargate cluster.
