当数据添加到websocket时,如何添加删除并在小部件中显示? [英] how to add remove and show in widget when data is added to websocket?
问题描述
我将 laravel_echo
和 flutter_pusher_client
软件包用于自定义Websocket。后端发送时,我可以实时成功获取数据。我的数据是号码和消息。我使用 sms_maintained
包将即将到来的号码数据作为消息发送到该号码。我的问题是如何显示后端发送时一直传来的历史数据(过去,现在,将来)。它可以随时随地。我应该使用 StreamBuilder
还是动画列表
??。很少有例子。这是websocket的部分代码:
i use laravel_echo
and flutter_pusher_client
packages for custom websocket. i can successfully fetch data in real time when backend sends. My data is number and message. and i send that coming number data as message to that number using sms_maintained
package. My problem is how to show alltime data(past,present,future) that is coming when backend sends. It can be in anytime. should i use StreamBuilder
or Animated list
??. and little example would be appreciated. Here is websocket part code:
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_pusher_client/flutter_pusher.dart';
import 'package:laravel_echo/laravel_echo.dart';
import 'package:pursat_otp/provider.dart';
import 'package:sms_maintained/sms.dart';
import 'model/data_model.dart';
import 'model/pusher_model.dart';
class PusherSide extends StatefulWidget {
@override
_PusherSideState createState() => _PusherSideState();
}
class _PusherSideState extends State<PusherSide> {
FlutterPusher pusherClient;
Echo echo;
dynamic channel;
Data data;
// fetch declarations
@override
void initState() {
fetchConf();
super.initState();
}
Future<void> fetchConf() async {
try {
var response = await Provider.dio.get('/conf/pusher');
Conf conf = Conf.fromJson(response.data['conf']);
debugPrint('${conf.pusherAppKey}');
//websocket part
FlutterPusher getPusherClient() {
PusherOptions options = PusherOptions(
host: conf.host,
port: conf.port,
cluster: conf.pusherAppCluster,
encrypted: conf.encrypted);
return FlutterPusher(conf.pusherAppKey, options, lazyConnect: false);
}
pusherClient = getPusherClient();
echo = new Echo({
'broadcaster': 'pusher',
'client': pusherClient,
});
channel = echo.channel(conf.channel);
channel.listen(conf.event, (e) {
setState(() {
data = Data.fromJson(e);
debugPrint('$e');
});
});
} on DioError catch (e) {
debugPrint('${e.message}');
}
}
@override
Widget build(BuildContext context) {
// how to show that e data here using StreamBuilder or AnimatedList or any Widget. e data comes as json at anytime during a day
}
}
推荐答案
无论如何,我使用 AnimatedList
小部件解决了上述问题。让我知道谁需要源代码。
anyway i solved above problem using AnimatedList
widget. Let me know if who needs source code.
这篇关于当数据添加到websocket时,如何添加删除并在小部件中显示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!