Product is understandable for people who play this game, so here a recommended item list that you can fill in into the search bar to add items, here some examples that you can search for:
- 3rd age bow
- Abyssal whip
- Abyssal dagger
- Adamant dager
Here a list of all items if needed https://everythingrs.com/tools/osrs/itemlist/1
The assignment is to build a real-time application, where an open connection between the client and the server is needed, and make it so that the client and server can communicate both ways in real time at the same time
- About the project
- Activity Diagram
- Getting started
- Packages/dependecies
- License
- Contributers and their role
My project is about a game I play, the game is called Old school runescape a MMORPG where you can play with friends and grind for better gameplay. In this game you can also fight bosses with friends, for that purpose I built a live loot splitter, where everyone can fill in the loot that they gathered so it can be evenly split between the teammates that were fighting with you.
The project is built with Socket.io, Javascript, Pug and SCSS
- Filling in your username, the username is not connected to your account because such an API is non-existent.
- Search for an item that you have redeemed in the boss fight, with the data from my own API the: OSRS-LLS-API.
- Filling in the items that you have redeemed in the boss fight.
- Removing an item if you fill in a wrong item.
- See live price data from the OSRS real-time prices API.
- See the gold split that is based on the players connected and the items filled in.
In the application I used 2 API's, one I created myself and one that was already existing.
This API is created by myself, I found a JSON that was pretty recently updated with all the items that are currently in the game. When trying to work with that JSON file I realised it was to slow to work with. I then came to the idea to upload all the data into MongoDB, I then built an API around that with Express.
I'm using this API to retrieve a single item when an user is searching for that item, it is also possible to pull a thousand items at the time but i'm not using that feature at the moment because i did not have a good purpose for it.
More detailed information is available at the OSRS LLS API github page.
I'm using the OSRS Real-time Prices for retrieving the current live price from in game. This data is real time so that makes for a up to date application. The api retrieves a low and a high price for that moment, i'm using the average of that.
This is the real time price API from OSRS, the data is updated constantly because the price of item fluctuates.
Checklist for showing what is done and what still can be done.
- Setting an username
- Connecting to other users
- Retrieving an item while searching for it
- Retrieving live price data of an item while searching it
- Viewing all items that are filled in currently by users
- Seeing the live gold split that is based on users and item prices
- Connecting to private rooms
- Creating a private room for you and your friends
- Using it on mobile
- Using it on desktop
- Forgiving when searching for items
- Removing items from the current list.
- Feedback when something went wrong.
- Loading states
Here a detailed description of the real time events that are being used on the site.
The connection event is called when a new user connects to the server, every other event that is being used is nested in the connection event. When connecting the nickname is set from the page before, the user is connected after they've filled in the form in the page before, before that the user is not connected to the socket server.
When a user has just connected the NameGenerated event is emitted, I'm using this event to set the name filled in to the client, so i can use that for showing if the person itself is connected, the style is different for every user connected in the connected user list.
The UpdatePeers event is also called when a user had just connected, UpdatePeers shows a list of every user connected on the client side, every time a user connects or disconnects the UpdatePeers event is called, so on 'connection' and on 'disconnect', this keeps a real time list of all connected users shown on the client.
The Users event is also called on connection this event emits the count of users connected, same as the UpdatePeers event this event is also called on the 'connection' and 'disconnect' event. On the client side is it used to simply show a real time counter of all the connected users.
The UpdateItems event is also called on connection but only when there have already been some items filled in, this to show just connecting users what items have already been added. This event is also called when the AddItem event calls, it is mainly used there because when a user fills in an item the item list needs to be send to the other clients to show the real time items that are added.
PriceChange is also being called on connection, this because the price split is based on the number of users connected. The event is also called when adding an item to the live list and when a user disconnects.
AddItem is called when a user fills in an item on the client side, it get's emitted from the client to the server, the client fetches the item data and sends it to the server, the server then fetches the price data that is related to that item, the price data and a formatted Object with only necessary data is then send back to all other clients including the senders client where it get's added to the list
The error event is only emitting from the server, this is being used to send the client feedback that for example a fetch went wrong, this only get's send to the client that triend to fetch an item.
The disconnect event is self explanatory this event get's called when a client disconnects from the server, this happens for example when a user closes their browser.
I stared working on data management this week as this was part of the assignment, I used an array stored on the server, my plan is to write the data to a file and retrieve it from there. My plan is to use file system from Node: https://nodejs.org/api/fs.html only because of time shortage I didn't implement this, because of did I tried my best to describe it:
So this is how I would tackle this. First I will try to check if a the file is already existing != then i will create the file. After that the next step is the same in both situations, I would write parse the Array with JSON.Stringify and then store it in the file.
When I want to retrieve the data i try to read the file when the file is not existing I would display an error message to the client and user. If I can retrieve data i would try to retrieve that data and otherwise catch it, when i retrieved the data i would JSON.parse it back to the format that i need to use, an Array of items that are currently filled in.
Before you can start you need to follow the installation
-
Open the terminal, or use the terminal in your IDE
-
Clone the repository
git clone https://github.com/KoenHaagsma/Food-Finder-PWA.git
- Go to the cloned repository
cd Food-Finder-PWA
- Install all packages
npm install || npm i
- Start the application for development
npm run dev
- Open de server and go to the browser: Localhost:4242. If this doesn't work change your port to another portbottom: 'Go live'
