当数据添加到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屋！