dart - Flutter:检测 API 中的变化

Question

我目前有一个简单的 API，但如果不重新启动整个应用程序，我的 flutter 小部件无法检测到 API 中发生的更改。

API 是在 https://www.mockable.io/ 上作为测试 API 制作的.我设法使用 StreamBuilder 从这个 API 读取数据.每当我在 API 中更新它们的值时，它仍然不会更改小部件中的值。

默认 JSON

{
 "id": "123",
 "token": "1token",
 "status": "Valid"
}

值变化后

{
 "id": "123",
 "token": "1token",
 "status": "Not Valid"
}

我的 StreamBuilder 代码

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;

final String url = "http://demo2722084.mockable.io/user";

class StreamPage extends StatefulWidget {

  @override
  StreamPageState createState() {
    return new StreamPageState();
  }
}

class StreamPageState extends State<StreamPage> {

  StreamController _userController;

  Future fetchUser() async{
    final response = await http.get(url);

    if(response.statusCode == 200){
      return json.decode(response.body);
    }else{
      print("Exception caught: Failed to get data");
    }
  }

  loadUser() async{
    fetchUser().then((res) async{
      _userController.add(res);
      return res;
    });
  }

  @override
  void initState() {
    _userController = new StreamController();
    loadUser();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Stream"),
      ),
      body: new StreamBuilder(
        stream: _userController.stream,
        builder: (context, snapshot){

          if(snapshot.hasError){
            print("Exception: ${snapshot.error}");
          }

          if(snapshot.hasData){

            var user = snapshot.data;

            var id = user["id"] ?? "";
            var token = user["token"] ?? "";
            var status = user["status"] ?? "";

            return new Center(
              child: new ListTile(
                title: new Text("Token: $token"),
                subtitle: new Text("Status: $status"),
                leading: new Text(id),
              ),
            );
          }

          if(snapshot.connectionState != ConnectionState.waiting){
            return new Center(
              child: new CircularProgressIndicator(),
            );
          }

          if(!snapshot.hasData && snapshot.connectionState != ConnectionState.done){
            return new Center(
              child: new CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

我希望 StreamBuilder 获取更改后的 status 值，但必须重新启动应用才能使新值反射(reflect)在应用中。

是否有一个示例可以说明我如何正确地实现这一点，因为坦率地说，这是我第一次尝试 StreamBuilder。

Answer 1

您的 HTTP 请求只会产生一个数据点，因此您可以使用 FutureBuilder。但是您想知道服务器什么时候发生变化。进行更改时您的 HTTP 连接已完成，因此不知道它已经发生。

有几种方法可以检测服务器端的变化，例如，轮询、用户启动的刷新、websockets 等。出于演示目的，而不是在 initState loadUser 你可以启动一个 1 秒的周期性定时器来做到这一点，它会每秒更新一次流，你应该会看到变化。 (不要忘记在 dispose 中取消计时器。)

这在生产中不太可能可行，因此请探索 websockets 等，以获取来自网络服务器的推送通知。另请探索 Firebase 云消息传递是否是向您的应用程序发送更改通知的更好方式。

  @override
  void initState() {
    super.initState();
    _userController = StreamController();
    Timer.periodic(Duration(seconds: 1), (_) => loadUser());
  }