在ListView中显示实时数据答案

【问题标题】：Display real-time data in ListView在ListView中显示实时数据
【发布时间】：2023-02-18 18:43:28
【问题描述】：

How to automatically update UI with the new tasks?

For example, while I'm on the tasks page, I load them once. In the meantime, let's say new task are created and stored from my web application to mysql db. I would still see only previously loaded tasks without any idea that the new record is created in the database.

I'm using ListView.builder to display the data, while calling the API on initState(). Also, it might be worth noting, I'm using Laravel with MySql for my backend.

What is the best way to update UI with new data whenever there is a new record in the mysql database?

标签： android laravel flutter

【解决方案1】：

i have one solution to get real time record/Tasks with out page refresh on UI.

steps
1)Add new column name (is_seen) on Task table default is 0.
2)when tasks list you will show on front end then add is_seen =1 for all that Tasks that you have to show on front end.
3)Run ajax call in interval in Task Tasks Ui page that run after some interval like 3 sec etc and get all unseen tasks (condition is is_seen=0) on Ui Tasks page.
4)when new task create on table that will have is_seen=0.ajax call get that task and show on Tasks list on front end 
5)then same time after rendering on new task on task list send ajax call to set is_seen=1 of that task.

I hope you understand this.

【讨论】：

【解决方案2】：

这可能需要一些更复杂的设置，因为您正在尝试构建一个实时排序的应用程序。

您可以探索 Polling -> 在 30 秒的间隔后调用 api 端点的位置

或者更好的是，您可以探索 websockets。

我认为 websockets 是更好的选择。

轮询不需要对后端进行任何更改，只需要某种计时器倒计时 -> 看看这个：https://api.flutter.dev/flutter/dart-async/Timer/Timer.periodic.html。

对于 websockets，Pusher 是低级 websocket 实现的抽象，在 Laravel 上很常见并且设置起来非常直接。您可以从这个封闭源选项 https://pusher.com 开始。它更容易，有很好的文档记录，并且维护得很好 Flutter 包。

在您的 flutter 应用程序中，我会建议使用更好的状态管理形式，如 Bloc 或 RiverPod 以及 Pusher flutter 包 (https://github.com/pusher/pusher-channels-flutter)，以订阅和收听频道和事件。状态管理位只是为了让您能够使用流并拥有更清晰和可维护的代码。

根据流的架构，您可能还需要探索 Streambuilder 小部件

【讨论】：