我试图创建一个flutter聊天应用程序,但我面临着一些麻烦。我希望我的聊天应用程序的行为类似于Facebook Messenger或Instagram聊天。我注意到,在这些应用程序中,当我打开一个对话时,聊天不加载,他们已经在那里了。在我的应用中当我使用streams套接字连接来发出响应,然后将其添加为列表,并在每次用户打开会话时显示在列表视图中,使屏幕加载并显示消息,我在现代聊天应用中看不到这种行为。我应该做些什么才能有同样的行为。
我不认为我能够同时加载本地数据和从流加载数据,当我试图添加本地数据流时,它从来没有显示,但当我发出它与套接字它显示
@override
void didChangeDependencies() {
getDatawhenPageFirstLoad = Provider.of<Conversation>(context, listen: false)
.getConversationIfexist(widget.userid);
mapKey = Provider.of<Conversation>(context, listen: false)
.findInLocalMap(widget.userid);
// TODO: implement didChangeDependencies
super.didChangeDependencies();
}
StreamBuilder(
stream: Provider.of<Conversation>(context, listen: false)
.streamController
.stream,
builder: (BuildContext context, AsyncSnapshot<List<ChatModel>> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting &&
snapshot.data != null) {
return Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.7,
child: Center(
child: LoadingAnimationWidget.staggeredDotsWave(
color: Colors.blue, size: 20),
),
);
} else {
if (snapshot.error != null) {
return Text(snapshot.error.toString());
} else {
return ListView.builder(
reverse: true,
itemCount:
snapshot.data!.length ,
itemBuilder: (context, index) {
var getData = mapKey == 0
? snapshot.data![index]
: chatrommsfromMap[mapKey]!.chats[index];
return singelMessage(
isMine: getData.is_mine,
messageText:getData.message_text
);
});
}
}
},
);
我的套接字连接
Future<void> getConversationIfexist(int user_id) async {
var jwt = await storage.read(key: "token");
var userid = await storage.read(key: "id");
List<ChatModel> _chats = [];
final IO.Socket socket = IO.io(
'http://192.168.0.5:8080/chatRomms',
// 'http://172.20.10.5:8080/chatRomms',
IO.OptionBuilder()
.setTransports(['websocket'])
.setExtraHeaders({"token": jwt})
.disableAutoConnect()
.setQuery({"token": jwt})
.setAuth({"token": jwt})
.build());
socket.connect();
print(user_id);
socket.emit("findUserConversationById", user_id);
socket.on(
"result",
(data) => {
print(data["conversation"]['messages']),
if (data != null)
{
for (var ii in data["conversation"]['messages'])
{
_chats.add(ChatModel(
id: ii['id'],
message_text: ii['message_text'],
is_seen: ii['is_seen'],
user_id: ii['user_id'],
conversation_id: ii['conversation_id'],
updatedAt: ii['updatedAt'],
is_mine: data['user']["id"] == int.parse(userid!)
? true
: false))
}
streamController.sink.add(_chats),
notifyListeners(),
},
});
2条答案
按热度按时间h5qlskok1#
您需要了解,不仅一个人管理这些应用程序,而且这些应用程序使用本机IOS和Android开发工具包,这意味着比Flutter更快,性能更好。
此外,我可能是错的,但除了我之前的声明,那些聊天页面你在Facebook等,他们实际上加载,但加载过程太快,你看不到它。你可以在你的Flutter应用程序中看到这一点。
例如,如果你通过Flutter应用程序在旧手机上加载一些东西,它需要时间,而在更快的手机(比如iPhone 13)上几乎是即时的。
此外,flutter在单个线程(主线程)上运行所有功能,这意味着所有内容都是按顺序执行的。
你可以在Youtube上搜索无聊的扑展,以更好地了解…
huus2vyu2#
您应该将旧消息保存在本地,并在打开应用程序时加载它。同时,在启动应用程序时,尝试同步您现有的本地消息与更新的新消息。