简体繁体 English

如何在用户之间同步数据 ReactJS

[英]How to sync data between users ReactJS

原文 2021-12-07 04:17:24 0 1 javascript/ reactjs

I want to know if there is a way to have data be linked between different users.我想知道是否有办法在不同用户之间链接数据。 In my case I'm building a gift wish list and each item has a buy button attached to it.就我而言，我正在建立一个礼物愿望清单，每个物品都附有一个购买按钮。 if the buy button is clicked and someone buys the item then the item no longer needs to be displayed.如果单击购买按钮并且有人购买了该项目，则不再需要显示该项目。 but i have no idea how sync that data between users.但我不知道如何在用户之间同步这些数据。 I tried using sqlite but I wasn't able to find a way to store the data that is returned from db.each since its asynchronous.我尝试使用 sqlite 但我无法找到一种方法来存储从db.each返回的数据，因为它是异步的。 I also thought of JSON but there didn't seem to be a good way to write to an external JSON file.我也想到了 JSON 但似乎没有写入外部 JSON 文件的好方法。 I know that I can't be the only one with this issue but I don't really know what to search in order to find the answers I'm looking for.我知道我不能成为唯一遇到此问题的人，但我真的不知道要搜索什么才能找到我正在寻找的答案。

TIA TIA

1 个解决方案

Three approaches I would suggest.我建议的三种方法。 (The problem isn't really tied to ReactJS) （问题与 ReactJS 无关）

1. Reactive Approach 1. 反应式方法

Let the buy button buy and update the record accordingly in the backend denoting that it is sold.让购买按钮购买并在后端相应地更新记录，表示它已售出。
Any succeeding requests for that backend will result in an error.对该后端的任何后续请求都将导致错误。
Up to you how you will do the UX, but usually a pop up saying the item is now sold out is enough.你将如何做 UX 取决于你，但通常会弹出一个说该项目现已售罄的消息就足够了。 (This is when you can remove the said item from the view.) （此时您可以从视图中删除所述项目。）
This is far the easiest to implement in my opinion.在我看来，这是最容易实现的。
This is a classic solution to a race problem.这是种族问题的经典解决方案。

2. Real Time Approach 2.实时方法

there are many solutions you can use to do this.您可以使用许多解决方案来执行此操作。 I won't deep dive on what solutions you can use.我不会深入探讨您可以使用哪些解决方案。 But basically, you need to find a way to have an open connection between your data source and frontend enabling real time subscription (like Facebook notifications or messaging)但基本上，您需要找到一种方法在数据源和前端之间建立开放连接，从而实现实时订阅（如 Facebook 通知或消息传递）
One solution is to use sockets as one of the comment dictates.一种解决方案是使用 sockets 作为评论指示之一。 Basically, when a request to the backend was made, there should be an event that would trigger a push to all subscribed frontends that this item was bought.基本上，当向后端发出请求时，应该有一个事件会触发向所有订阅的前端推送该项目已购买的事件。 (You can then do the necessary frontend UX after receiving such event.) （然后您可以在收到此类事件后执行必要的前端 UX。）
You will still need to do the reactive solution just in case.以防万一，您仍然需要执行响应式解决方案。
This is hard to implement since your number one problem is to support scale and possibly an event driven architecture.这很难实现，因为您的第一个问题是支持规模和可能的事件驱动架构。

3. Near Real Time Approach 3. 近实时方法

Not really elegant, but you can just poll for changes in the backend in the background and when something was updated you can do the necessary UX.不是很优雅，但你可以在后台轮询后端的变化，当有东西更新时，你可以做必要的用户体验。
Still need to do the reactive solution.仍然需要做反应式解决方案。
Be careful though on the interval though, it might mimic a DDoS attack but nothing a cache can't solve if it's just pure GET requests.不过要小心，虽然它可能会模仿 DDoS 攻击，但如果它只是纯粹的 GET 请求，缓存无法解决任何问题。