我如何在每次通过前端的鼠标单击上更新我的数据库，而不发送太多请求？

Question

Following Problem:

I want to create a little app for learning purposes that should do following things:

• Sign in with Google / FB / ..
• React / Redux fetches users clicker count + clicker count of the top 10 clickers
• You see a highscore table with the name and click count of top 10
• You see your clicker score and on every click you increase it
• Now the challenging Part:
• I want to update the database on every click (save the click to the user in the db)
• Update the highscore dynamically
  • So if another user clicks for example 10 times it should update his highscore

I have a little chart to visualize this better (notice it has a 2nd tab on the bottom where I describe the stack I want to use)

My thoughts

I think I have to figure something out to not constantly update the database. Because if I update it on every click I see 2 problems:

• a TON of requests which is not good, right?
• if I click too fast it wouldn't be recognized right?

What I wonder is, I think I created something similiar but much more simplified a few months ago to test out firebase from google. I saved every click to firebase. I also had a listener with on.("value") or something like that, that created an action every time a new "click" comes in.

This worked perfectly, even when I clicked very fast. How is this possible? How is firebase doing this?

Tech Stack I want to use

• Node.js with Express for the Server
• MongoDB with Mongoose for Database (eventually mongodb cloud solution like mLab)
• React with Redux on the Frontend
• React Router
• Passport.js for Auth

Now I would like to know if my approach I have in plan is going to work or if this would even work with that kind of stack. I didn't find anything on google that could help me out with this kind of question(s). So how can I update the db to reflect the data I see in my app but not creating an api call per click?

Answer 1

I recommend you looking into using websockets . This will probably be what you're looking for to help you update the database close to real-time. But make sure that you're keeping track of the current user's click in the React/Redux state.

Another solution is to throttle your REST api calls to update the database. The downside of this is the other users in your application won't see the real-time value of every other users. But since you're throttling it'll only be slightly behind.

https://css-tricks.com/the-difference-between-throttling-and-debouncing/