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 的帮助!
我尝试在 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 的帮助!