javascript - 如何在不发送太多请求的情况下通过前端在每次鼠标单击时更新我的​​数据库？

Question

以下问题:

我想创建一个用于学习目的的小应用程序，它应该执行以下操作:

• 使用 Google/FB/.. 登录
• React/Redux 获取用户点击次数 + 前 10 名点击者的点击次数
• 您会看到一个高分表，其中包含前 10 名的名称和点击次数
• 您会看到您的答题器得分，并且每次点击都会增加它
• 现在是具有挑战性的部分:
• 我想在每次点击时更新数据库(将点击保存到数据库中的用户)
• 动态更新高分
  • 因此，如果另一个用户点击了 10 次，它应该更新他的最高分

我有一个小图表可以更好地形象化(注意它在底部有第二个选项卡，我在其中描述了我要使用的堆栈)

我的想法

我想我必须想办法避免不断更新数据库。因为如果我在每次点击时更新它，我会看到 2 个问题:

• 一大堆请求不是很好，对吧？
• 如果我点击得太快，它就不会被识别，对吗？

我想知道的是，我想我在几个月前创建了一些类似但更简化的东西来测试来自谷歌的 firebase。我将每次点击都保存到 firebase。我还有一个监听器，带有 on.("value") 或类似的东西，每次新的“点击”进来时都会创建一个 Action 。

这非常有效，即使我点击得非常快。这怎么可能？ Firebase 如何做到这一点？

我想使用的技术栈

• Node.js 和 Express 服务器
• MongoDB with Mongoose for Database(最终是像 mLab 这样的 mongodb 云解决方案)
• 在前端与 Redux react
• react 路由器
• 用于身份验证的 Passport.js

现在我想知道我计划中的方法是否有效，或者这是否适用于那种堆栈。我没有在谷歌上找到任何可以帮助我解决这类问题的东西。那么，我该如何更新数据库以反射(reflect)我在我的应用中看到的数据，而不是为每次点击创建一个 API 调用？

Answer 1

我建议您考虑使用 websockets。这可能是您正在寻找的帮助您接近实时更新数据库的东西。但是请确保您正在跟踪当前用户在 React/Redux 状态下的点击。

另一种解决方案是限制您的 REST API 调用以更新数据库。这样做的缺点是您应用程序中的其他用户不会看到其他所有用户的实时值。但由于你正在节流，它只会稍微落后一点。

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