Flutter Reactive Programming (Stream) with Signal R

Question

I try to implement a chat system in flutter with a back-end in asp.net core and a connection in real-time via SignalR.

The goal is when I open a chat room, all messages previously sended are loaded in the chat room, for this purpose, I call a method in the back-end called "Connect". Once the "Hub" is hit, it calls my front-end method and send back a list of messages, this flow is correct and working but I encountered a problem when I want to display the messages in flutter, here is how I tried to do it with the help of 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 is another widget, it renders fine but the code is not relevant so I won't post it :) I feel like I'm missing something with the stream stuff, I would expect when I add the listMessages in the stream that the stream would then display the messages but it does not (even tho the listMessages is correctly populated with the data from the back-end).

I'm new to Flutter to It's surely a mistake from me, If someone could point me what I'm doing wrong, it'd be very helpful !

Thanks in advance,

Lio

Solution

So I found the answer... The library that I use for Signal R mention that I have to await when I call a method from the server, I had to remove the await and then it worked fine. Thanks to Saed for his help !

Comments

[Saed Nabil]

when you run your app ,what is the state of your UI ? is it circular progress indicator or error or just empty

[lioleveau]

Just empty, it seems like the stream is actually empty but the listMessages is not

[Saed Nabil]

what snapshot.data contains ? did you try to print it out to see what kind of data it has?

[lioleveau]

It has a List of messages but it is empty and it does not update

[Saed Nabil]

are you sure that you receive json array in parameters[0] and it is not empty ?

[lioleveau]

Yes for that I'm sure, when I debug the app listMessage contains all the messages from the server, but it seems that when I do this line : webSocketStream.sink.add(listMessages); The stream does not receive the data or does not display it

[lioleveau]

Let us continue this discussion in chat.

[Saed Nabil]

My Pleasure .!!

[Farid]

What library were you using?

[lioleveau]

pub.dev/packages/signalr_client this one, but I switch to another one to also have web support.

[Boris]

What library did you switch to?