颤振web套接字，事件之间的异步方法

Question

我有一个websocket，服务器可以在几个时间内发送许多事件(消息)。对于每个事件，我必须调用一个异步函数，在显示第二个事件之前说出句子(flutter- ts)。正确的做法是什么?使用数组流?使用列表。建筑商吗?

我需要在Flutter中准确地复制这篇文章(在angular/rxjs中):

聊天angular websocket，顺序显示元素

谢谢你的帮助!

添加了一些代码以便更好地理解:

...
socket.on('messageToClient', (data) {
print("socket $data");
MessageModel message = MessageModel.fromJson(data);
setState(() {
_messages.add(message);
});
});
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: _messages.length,
itemBuilder: (BuildContext context, int indexMessage) {
print("index");
// Seems it's not waiting here
return FutureBuilder(
future: _speak(_messages[indexMessage].message),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return CircularProgressIndicator();
default:
if (snapshot.hasError)
return Text('Error: ${snapshot.error}');
else {
return TextMessage(
message: _messages[indexMessage].message,
author: _messages[indexMessage].author,
hint: _messages[indexMessage].hint,
options: _messages[indexMessage].options,
giveVoice:
_messages[indexMessage].giveVoice,
);
}
}
});
}),
...

Answer 1

你到底是什么意思

对于每个事件，我必须调用一个async函数_它在显示第二个事件之前说出句子

如果你的意思是显示的"句子";使用Flutter，你可以试试:

理想情况下，您将能够listen到websocket。这样做会给你一个Stream(我认为)。然后在Flutter中使用StreamBuilder小部件来更新来自websocket的每个事件的UI。可以在StreamBuilder中创建一个ListView.builder。

Answer 2

最后，我是这样做的:

BehaviorSubject<MessageModel> _streamMessage =
new BehaviorSubject<MessageModel>();
// then on my socket event
socket.on('messageToClient', (data) {
MessageModel message = MessageModel.fromJson(data);
_streamMessage.sink.add(message);
});
// and then on the setState
@override
void initState() {
super.initState();
_init();
_streamMessage.asyncMap((event) async {
await _speak(event.message);
setState(() {
_messages.add(event);
});
}).toList();
}

// and finally the widget
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: _messages.length,
itemBuilder: (BuildContext context, int indexMessage) {
return TextMessage(
message: _messages[indexMessage].message,
author: _messages[indexMessage].author,
hint: _messages[indexMessage].hint,
options: _messages[indexMessage].options,
giveVoice: _messages[indexMessage].giveVoice,
);
}),

接受建议