以下问题:

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


使用Google / FB / ..登录
React / Redux获取用户的点击次数+前10个点击次数的点击次数
您会看到一个带有名称的高分表,然后点击排名前10位的计数
您会看到您的答题器得分,并且每次点击都会增加它
现在具有挑战性的部分:
我想在每次点击时更新数据库(将点击保存到数据库中的用户)
动态更新高分


因此,如果另一个用户点击了10次,则应该更新其高分



我有一个小图表可以更好地形象化(注意,它的底部有一个第二个选项卡,用于描述我要使用的堆栈)javascript - 如何在每次通过前端单击鼠标时更新数据库,而又不发送太多请求?-LMLPHP

我的想法

我认为我必须弄清楚一些事情,以便不不断更新数据库。因为如果我每次点击都更新它,就会看到2个问题:


一堆不好的请求,对吗?
如果我单击得太快,它不会被识别对吗?


我想知道的是,我认为我在几个月前创建了类似的东西,但进行了简化,以测试来自Google的firebase。我将每次点击都保存到了Firebase。我还有一个使用on.("value")或类似名称的监听器,每次有新的“点击”出现时,它都会创建一个动作。

即使我单击得非常快,这也能很好地工作。这怎么可能? Firebase如何做到这一点?

我想使用的技术堆栈


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


现在,我想知道我计划中的方法是否可以使用,或者甚至可以在这种堆栈中使用。我在Google上找不到任何可以帮助我解决此类问题的信息。那么,如何更新数据库以反映我在应用程序中看到的数据,而不是每次点击都不会创建api调用?

最佳答案

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

另一个解决方案是限制您的REST api调用以更新数据库。缺点是应用程序中的其他用户看不到其他所有用户的实时价值。但是由于您节流,它只会稍微落后一点。

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

07-28 07:34