【问题标题】:Flutter Server Side Events, reactive UIFlutter 服务器端事件,反应式 UI
【发布时间】:2020-04-23 23:03:32
【问题描述】:

我正在尝试让我的应用程序响应 SSE 服务器发送事件流。流中出现了多种类型的事件,如果我收到的事件的 type 与该 UI 元素相关联,则应用程序的某些部分将更新

示例 json 流响应(例如这里,如果我收到心跳,我不想更改 UI):

event:heartbeat
data:{"type":"heartbeat"}

event:gwy
data:{"a":532289,"lastUpdatedDateInMilliseconds":1587490669503,"t":1587490669503,"g":12479,"api":0,"cellSignalStrength":15}

event:gwy
data:{"a":532289,"lastUpdatedDateInMilliseconds":1587490694685,"t":1587490694685,"g":12479,"api":0,"cellSignalStrength":15}

此数据的格式是全局数据变量的子集(事件应替换全局变量的那部分)。

非常感谢任何指针或资源。

【问题讨论】:

  • 你打算如何检查是否有新数据?sockets或http请求每个时间段?
  • 感谢您的垂询。我有一个我调用一次的 HTTP GET 请求,它返回一个数据流(json 事件,类型为:heartbeat、gwy 等)。
  • 有多少页面依赖于这个流?你能提供更多细节吗
  • 1 页取决于流。该事件会将 UI 组件的状态更改为 1 种状态或其他状态 - 本质上是“开启”或“关闭”。流可能会影响多个 UI 组件,但一次只能影响一个 - 1 个事件对应于 1 个 UI 元素。因此 JSON 将随流而来,它可能会更新 UI 组件,也可能不会更新,具体取决于该 UI 组件是否属于 json 有效负载
  • 好的,所以你应该使用一个流构建器,你指定一个流,监听它,并相应地构建和更新你的 UI,请参阅 flutter.dev 中的文档以查看有关它的示例

标签: flutter dart stream server-sent-events


【解决方案1】:

我知道你已经得到了答案,但如果想要解析流式值,这是我使用的代码,它提取事件和实际数据

import "package:http/http.dart";

http.Client client = http.Client();

http.Request request = http.Request("GET", Uri.parse('your url'));
request.headers["Accept"] = "text/event-stream";
request.headers["Cache-Control"] = "no-cache";

Future<http.StreamedResponse> response = client.send(request);
print("Subscribed!");
response.then((streamedResponse) => streamedResponse.stream.listen((value) {
  final parsedData = utf8.decode(value);
  print(parsedData);

  //event:heartbeat
  //data:{"type":"heartbeat"}
        
  final eventType = parsedData.split("\n")[0].split(":")[1];
  print(eventType);
  //heartbeat
  final realParsedData = json.decode(parsedData.split("data:")[1]) as Map<String, dynamic>;
  if (realParsedData != null) {
  // do something
  }
}, onDone: () => print("The streamresponse is ended"),),);

【讨论】:

  • 如果你想取消订阅(由.listen创建)怎么办?
  • @Monta "listen" 函数返回一个 "StreamSubscription" 对象,您可以在该对象上调用 "cancel" 取消订阅。更具体地说,此代码:“streamedResponse.stream.listen()”。对于上面的代码,你需要做一些自定义,如果你愿意,请联系我更新代码。
  • 感谢您的更新。我在网上搜索一下就知道了
猜你喜欢
  • 1970-01-01
  • 2017-01-07
  • 1970-01-01
  • 2017-01-14
  • 2020-04-08
  • 1970-01-01
  • 2016-04-15
  • 1970-01-01
  • 2017-09-13
相关资源
最近更新 更多