Skip to content

A multi-player PacMan game, built with React, TypeScript, and Socket.io

Notifications You must be signed in to change notification settings

EdwardLeeMacau/Pet-Man

 
 

Repository files navigation

PET-Man.io

Implementation

  • WebSocket

Requirements

  • Node.js
  • Yarn
  • Nginx
  • SSL credentials (Nice to have, otherwise you need to use unsecured HTTP and WebSocket)
  • A domain name (Nice to have)

How to Run?

Frontend (rootdir/)

Modify URI to the WebSocket server

const socket = io('wss://<YOUR DOMAIN NAME>');      // src/pages/RoomPage/Room.tsx, L95

Compile TypeScript to JavaScript

yarn                                                # Install dependencies
yarn build

Backend (rootdir/server)

cd server/
npm install                                         # Install dependencies
node index.js &                                     # Run WebSocket server in localhost:3001 by default

Deployment

Use Nginx as example.

cp -r public/* /var/www/html                        # Let Nginx can load the files
sudo vim /etc/nginx/sites-available/pet-man         # See below for reference proxy configuration
sudo ln -s /etc/nginx/sites-available/pet-man \     # Link to enable PET-Man.io
    /etc/nginx/sites-enabled/pet-man

Reverse proxy configuration

location / {
    try_files $uri /$uri /index.html;
}

location /socket {
    proxy_pass http://localhost:3001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

Create SSL Credentials

sudo certbot --nginx -d <YOUR DOMAIN NAME>

About

A multi-player PacMan game, built with React, TypeScript, and Socket.io

Resources

Stars

Watchers

Forks

Languages

  • TypeScript 83.4%
  • CSS 13.1%
  • JavaScript 2.6%
  • HTML 0.9%