Vite Multiplay Snake Game

This is a multiplay version of famous Snake Game to demonstrate how to utilize websockets for full duplex communication.

It consists of a backend server and a frontend application.

Backend server was implemented using ExpressJs to serve the compiled frontend app as static content. And the WebSocket Server starts listening to the same port to respond socket messages.

Frontend application is built with Vite + Vue 3 + Bootstrap. Client is automatically connected to the server using standart WebSocket API the on initial request, then awaiting user to enter his name and joing the channel.

Requirements

You need to install the Node.js and npm package manager first.

Recommended IDE: VSCode + Volar

Installation

1. Clone the repository.

   git clone https://github.com/webceyhan/multiplay-snake-game.git

2. Get inside the cloned project folder.

   cd multiplay-snake-game

3. Install NPM packages.

   npm install

Usage

You can use following commands to do various task with the project.

npm start               # run application
npm run dev             # start watching backend & frontend concurrently
npm run dev:backend     # start nodemon to watch backend app
npm run dev:frontend    # start vite to watch frontend app
npm run build           # build for production
npm run preview         # preview built app

Take a look at the other scripts in package.json

Development

You have to run both backend server and frontend development server concurrently to be able to develop application properly.

npm run dev

Building

Build the frontend application for production.

npm run build

To preview, you still have to run the backend server which will serve the app and provide socket connectivity in order to make it work properly.

npm run preview

Deployment (Render)

Project is linked to Render for deployment.

It will automatically deploy the project to Render on every push.

References

• Node.js
• Vite
• Vue.js
• Bootstrap
• Express
• WebSocket (WS)