0

I'm building a web app that uses a react like front-end library and communicates view websockets with a node back-end.

As part of the app, I'm trying to develop a mana bar like component. Clicking a button costs mana, and the mana refills over time. If there is not enough mana, the user cannot click the button.

My question is, how do I sync the mana bar with the back-end? I need the back-end to keep track of the users mana, so a user can't bypass the front-end and send a frame anyway, but I also don't want any lag that would be caused by the back-end sending the front-end "eligable to be clicked" signals

This leads me to believe that the best way to achieve this is for both the front-end and the back-end to keep track of mana separately, but I feel like slight differences over time could cause the two to be very out of sync with each other over time.

bcoop713
  • 1,063
  • 5
  • 13
  • 24
  • why does the backend need to know how much mana you have? – thedarklord47 Dec 15 '15 at 21:55
  • To prevent against fraudulent button presses. It needs to make sure that there is in fact enough mana. – bcoop713 Dec 15 '15 at 21:57
  • why not just regulate that on the client side? – thedarklord47 Dec 15 '15 at 21:58
  • take for instance a first person shooter. Imagine how slow it would be to check with the server every time the player pulls the trigger to make sure there is enough ammo. instead, the game (client) keeps track of ammo, and only updates the server with where the bullet went – thedarklord47 Dec 15 '15 at 22:00
  • What would stop someone from opening up a websocket client and sending in a bunch of requests then? – bcoop713 Dec 15 '15 at 22:04
  • well that would be someone hacking your game. that is a security question though. I can assure you, modern games do not check the server for your current mana – thedarklord47 Dec 15 '15 at 22:07
  • Yes...it is a security question. – bcoop713 Dec 15 '15 at 22:09
  • well rather than change your game logic at the expense of performance, I would look into methods of encoding json or ensuring an authentic client transmission – thedarklord47 Dec 15 '15 at 22:11

2 Answers2

1

Keep track of the player's mana on the backend. This is your system-of-record.

Also keep track of the player's mana on the frontend, including the regneration-over-time parameters. Whenever the client and server communicate, the server's response should include any updates to the game state, including mana. This should correct any drift that occurs over time in the regeneration algorithm.

This was answered fairly well on the gamedev stackexchange: https://gamedev.stackexchange.com/questions/84402/mmo-client-server-architecture-nosql

Community
  • 1
  • 1
nicknystrom
  • 749
  • 6
  • 15
  • that is prone to issues where the client executes a mana spending command just before a mana update, resulting in mana not appearing to drop. There would then be a large difference in mana between server and client until the next update. In the long run, the total mana would be correct, however it would provide a poor user experience. – thedarklord47 Dec 15 '15 at 22:22
0

I would suggest not contacting the server for this at all.

Keep track of mana on the client side, and only allow the user to click a button if there is enough mana. If this is some sort of game app, and other users need to be able to see how much mana you have, then simply send that up to the server every update.

For example:

Client                       Server

user clicks button
user has no mana   ------->  update server with mana=0
nothing happens

mana increases     ------->  update server with mana=20

user clicks button
mana is spent      ------->  update server with mana=5
perform button action ---->  update server action performed

nowhere did you have to wait for the server, yet it is still being updated with current information

As for security/game hacking concerns, you will need to look into methods of securing javascript games: Prevent Javascript games tweaking/hacking

Community
  • 1
  • 1
thedarklord47
  • 3,183
  • 3
  • 26
  • 55
  • How would I secure this, so a user can't send malicious requests through a websocket client at will? – bcoop713 Dec 15 '15 at 22:11
  • http://stackoverflow.com/questions/6320996/prevent-javascript-games-tweaking-hacking – thedarklord47 Dec 15 '15 at 22:13
  • someone in the second answer mentions possibly keeping track of score (or mana in your case) on the server. In your case it would be quit complicated though. And would be more of a method of checking for hackers after the fact, rather than preventing them in the first place. – thedarklord47 Dec 15 '15 at 22:20
  • I suggest you do all game validation/logic on the client side for performance reasons. Afterwards, just be sure to obfuscate your code/wrap it in a closure as is suggested in the other SO question I linked. There really just is no way to have a responsive and secure javascript game. Look at any javascript/flash game on the internet. The leaderboards are hacked. – thedarklord47 Dec 15 '15 at 22:27