wynsto/leader-board-ranking

Real-time Game Player Leader Board

How to start

To start the development client/server, in the project directory, install the dependency by npm install then you can run npm run dev. This command will start web client and websocket server at the sametime. Open http://localhost:3000 to view it in the browser.

The web site will connnet to the websocket server automaticly. If website connects to the websockets server successfully an success message "WebSocket Connected" will be display. Otherwise an error message "WebSocket Disconnected" will be shown on the top. User can click "Connect" button to connect the websocket server manually.

The original players score are randomed generated by nodejs library. So each time, you restart the websocket server the list will be different because they are saved in memory only.

This app have two modes:

• game player mode: user can view real time player leading score ranking.
• admin mode: admin can use this mode modify the player's score, or add new play name/score to the list, but only top 10 player will be shown in the list.

User can use the "Admin Mode" button enter the admin mode, and then click "Exit Admin Mode" button go back to game players mode

Project Structure

This project has two main features:

1. Player Leader Board Rank
2. Websocket connection status and management

Websocket connection using react context integration. React Context was introduced as a way of managing the app state without passing down props through the parent-child trees. With the recent introduction of Hooks, using Context became trivial. WebSocketProvider.js provide websocket context to the root app. Since websocket context will be used inside the redux provider, it would have access to the Redux dispatch method

There's some cons of this implementation

1. The initiation of the websocket works as a part of the react cycle. You can provide a feedback to the user, when there's a socket failure. And this error handling can be handled centrally
2. For a given websocket message event, there will only be one event binding. So there's no repetitive binding by individual components.
3. All sockets actions are wrapped in functions allowing firm control over the structure of the payload and validations on the parameters
4. All socket connection related code is available centrally at one location.
5. Context-based integration is clean.

Directory and file description:

• public public source file
• src react components source code
  • app
    • store.js redux single store, all the redux slice will be added to this store
  • feature components divided by feature rank players score ranking components and redux slice files etc websocket * WebSocket.js websocket connection status and management components, * WebSOcketProvider.js websocket context provider, with this provider all the components can access websocket service by useContext and the * WebSocketProvider.js websocket redux slice App.js App React component index.js react app entry point

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The Backend WebSocket Server is running on on ws://localhost:3001

npm run server

Runs websocket server only

npm start

Runs client only

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

ref:

• Reactjs
• Redux
• Using WebSockets in Your React/Redux App
• Write your own WebSocket middleware for React/Redux in 4 Steps