Simple React and Node.js WebSocket applications for showing top players.
React application is written in TypeScript and Node.js application is written in JavaScript.
Developed and tested under Node.js v12.16.1.
- Clone this repository to get started. Run the following commands to install dependencies on both frontend and backend applications.
$ cd backend && yarn && cd ../
$ cd frontend && yarn && cd ../- Please run the backend application first to kickstart the WebSocket service.
$ cd backend && yarn start- After started the backend application, you will see a
Server started.message. After that, you may start the frontend application.
$ cd frontend && yarn startConfigs are stored in backend/.env and frontend/.env. Normally no changes are required.
When you go to the frontend application, a WebSocket connection is created between client and server. To keep the implementation simple, players scores are only stored in memory.
Players data will be broadcasted to the client once the connection is created.
To update specific player's score, you may send the following data in string under WebSocket protocol to ws://localhost:3000.
{"type":"UPDATE_PLAYER","playerId":"ec82ae68-1335-4208-94ab-2792502135f2","name":"Mary","score":80}
No higher score checking is implemented on the backend side, meaning the existing player data will directly being replaced by the new one or added if the old one does not exist. playerId is the unique ID for identifying different players.
Tests are included in the frontend application (as we're focusing on frontend application). To run those, please use the following command:
$ cd frontend && yarn test- Andrew Mok, 2021
- Feel free to contact me via email.