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 获取更改后的状态值，但必须重新启动应用程序才能在应用程序中反映新值。

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

Answer 1

您的 HTTP 请求只产生一个数据点，因此您可以使用FutureBuilder. 但是您想知道服务器上的某些内容何时发生变化。进行更改时，您的 HTTP 连接已完成，因此您不知道它已发生。

有几种方法，以探测服务器的变化，例如，投票，用户发起的刷新，网页套接字等出于演示的目的，而不是调用loadUser中initState你可以开始以1秒的周期定时器要做到这一点，这将更新流每一秒，你都应该看到变化。（不要忘记取消 中的计时器dispose。）

这在生产中不太可能可行，因此请探索 websockets 等以获取来自 Web 服务器的推送通知。还可以探索 Firebase Cloud Messaging 是否是向您的应用程序发送更改通知的更好方式。

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