Flutter Reactive Programming (Stream) with Signal R

Flutter Reactive Programming (Stream) with Signal R

我尝试在 flutter 中实现一个聊天系统,后端在 asp.net 核心中,并通过 SignalR 实时连接。

目标是当我打开聊天室时,之前发送的所有消息都加载到聊天室中,为此,我在后端调用了一个名为 "Connect" 的方法。一旦 "Hub" 被点击,它就会调用我的前端方法并发回消息列表,这个流程是正确的并且可以工作但是当我想在 flutter 中显示消息时遇到了问题,这就是我的方法尝试在 StreamBuilder 的帮助下完成它:

class GrpMessage extends StatefulWidget {
final GrpMessages group;
final HubConnection connection;

GrpMessage({Key key, @required this.group, @required this.connection})
  : super(key: key);

 @override
_GrpMessageState createState() => _GrpMessageState();
}

class _GrpMessageState extends State<GrpMessage> {
 List<Messages> listMessages = new List();
 final webSocketStream = BehaviorSubject<List<Messages>>();

@override
void initState() {
super.initState();
connect();  
}


 @override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(title: Center(child: Text(widget.group.name))),
  body: testSocket()
);}

connect() async {
await widget.connection
    .invoke("Connect", args: <Object>[widget.group.idEvent]);
widget.connection.on("ReceiveGroupMsg", grpReceived);
}

grpReceived(List<Object> parameters) {
List<dynamic> msg = parameters[0];
for (dynamic msg in msg) {
  listMessages.add(Messages.fromJson(msg));
}
webSocketStream.sink.add(listMessages);
}

Widget testSocket() {
return StreamBuilder<List<Messages>>(
    stream: webSocketStream.stream,
    initialData: listMessages,
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              MessagesList(messages: snapshot.data),
            ]);
      } else if (snapshot.hasError) {
        return Center(child: Text("No messages to display"));
      }
      return Center(
          child: CircularProgressIndicator(
              backgroundColor: Theme.of(context).primaryColor));
    });
   }

MessagesList 是另一个小部件,它呈现得很好,但代码不相关,所以我不会 post 它 :) 我觉得我在流中遗漏了一些东西,我希望当我在流中添加 listMessages 时,流会显示消息但它不会(即使 listMessages 正确填充了后面的数据-结束).

我是 Flutter 的新手,这肯定是我的错误,如果有人能指出我做错了什么,那将非常有帮助!

提前致谢,

里奥

所以我找到了答案...我用于 Signal R 的库提到当我从服务器调用方法时必须等待,我必须删除等待然后它工作正常。感谢 Saed 的帮助!