Firebase 如何将来自Flatter中两个Firestore集合的数据连接起来?
我在Flatter中使用Firestore有一个聊天应用程序,我有两个主要收藏:Firebase 如何将来自Flatter中两个Firestore集合的数据连接起来?,firebase,flutter,google-cloud-firestore,Firebase,Flutter,Google Cloud Firestore,我在Flatter中使用Firestore有一个聊天应用程序,我有两个主要收藏: 聊天记录,可键入自动ID,并具有消息、时间戳和uid字段 用户,输入uid,并有一个名称字段 在我的应用程序中,我使用以下小部件显示一个消息列表(来自消息集合): class ChatList extends StatelessWidget { @override Widget build(BuildContext context) { var messagesSnapshot = Firest
,可键入自动ID,并具有聊天记录
、消息
和时间戳
字段uid
,输入用户
,并有一个uid
字段名称
消息集合):
class ChatList extends StatelessWidget {
@override
Widget build(BuildContext context) {
var messagesSnapshot = Firestore.instance.collection("chat").orderBy("timestamp", descending: true).snapshots();
var streamBuilder = StreamBuilder<QuerySnapshot>(
stream: messagesSnapshot,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> querySnapshot) {
if (querySnapshot.hasError)
return new Text('Error: ${querySnapshot.error}');
switch (querySnapshot.connectionState) {
case ConnectionState.waiting: return new Text("Loading...");
default:
return new ListView(
children: querySnapshot.data.documents.map((DocumentSnapshot doc) {
return new ListTile(
title: new Text(doc['message']),
subtitle: new Text(DateTime.fromMillisecondsSinceEpoch(doc['timestamp']).toString()),
);
}).toList()
);
}
}
);
return streamBuilder;
}
}
类聊天列表扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
var messagesSnapshot=Firestore.instance.collection(“chat”).orderBy(“timestamp”,降序:true).snapshots();
var streamBuilder=streamBuilder(
流:messagesSnapshot,
生成器:(BuildContext上下文,AsyncSnapshot querySnapshot){
if(querySnapshot.hasError)
返回新文本('Error:${querySnapshot.Error}');
开关(querySnapshot.connectionState){
case ConnectionState.waiting:返回新文本(“加载…”);
违约:
返回新的ListView(
子项:querySnapshot.data.documents.map((DocumentSnapshot文档){
返回新的ListTile(
标题:新文本(doc['message']),
字幕:新文本(DateTime.FromMillisSecondsSinceEpoch(doc['timestamp']).toString()),
);
})托利斯先生()
);
}
}
);
返回streamBuilder;
}
}
但是现在我想显示每条消息的用户名(来自users
集合)
我通常称之为客户端连接,尽管我不确定flifter是否有特定的名称
我找到了一种方法(我在下面发布了),但不知道是否有另一种/更好/更惯用的方法在颤振中执行这种操作
那么:在flatter中,查找上述结构中每条消息的用户名的惯用方法是什么呢?我得到的第一个解决方案是嵌套两个StreamBuilder
实例,每个集合/查询一个
class ChatList extends StatelessWidget {
@override
Widget build(BuildContext context) {
var messagesSnapshot = Firestore.instance.collection("chat").orderBy("timestamp", descending: true).snapshots();
var usersSnapshot = Firestore.instance.collection("users").snapshots();
var streamBuilder = StreamBuilder<QuerySnapshot>(
stream: messagesSnapshot,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> messagesSnapshot) {
return StreamBuilder(
stream: usersSnapshot,
builder: (context, usersSnapshot) {
if (messagesSnapshot.hasError || usersSnapshot.hasError || !usersSnapshot.hasData)
return new Text('Error: ${messagesSnapshot.error}, ${usersSnapshot.error}');
switch (messagesSnapshot.connectionState) {
case ConnectionState.waiting: return new Text("Loading...");
default:
return new ListView(
children: messagesSnapshot.data.documents.map((DocumentSnapshot doc) {
var user = "";
if (doc['uid'] != null && usersSnapshot.data != null) {
user = doc['uid'];
print('Looking for user $user');
user = usersSnapshot.data.documents.firstWhere((userDoc) => userDoc.documentID == user).data["name"];
}
return new ListTile(
title: new Text(doc['message']),
subtitle: new Text(DateTime.fromMillisecondsSinceEpoch(doc['timestamp']).toString()
+"\n"+user),
);
}).toList()
);
}
});
}
);
return streamBuilder;
}
}
类聊天列表扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
var messagesSnapshot=Firestore.instance.collection(“chat”).orderBy(“timestamp”,降序:true).snapshots();
var usersSnapshot=Firestore.instance.collection(“users”).snapshot();
var streamBuilder=streamBuilder(
流:messagesSnapshot,
生成器:(BuildContext上下文,异步快照消息snapshot){
返回流生成器(
流:usersSnapshot,
生成器:(上下文,usersSnapshot){
if(messagesSnapshot.hasError | | | usersSnapshot.hasError | | |!usersSnapshot.hasData)
返回新文本('Error:${messagesSnapshot.Error},${usersSnapshot.Error}');
开关(消息snapshot.connectionState){
case ConnectionState.waiting:返回新文本(“加载…”);
违约:
返回新的ListView(
子项:messagesSnapshot.data.documents.map((DocumentSnapshot文档){
var user=“”;
if(doc['uid']!=null&&usersSnapshot.data!=null){
user=doc['uid'];
打印(“查找用户$user”);
user=usersSnapshot.data.documents.firstWhere((userDoc)=>userDoc.documentID==user.data[“name”];
}
返回新的ListTile(
标题:新文本(doc['message']),
字幕:新文本(DateTime.FromMillisSecondsSinceEpoch(doc['timestamp'])。toString()
+“\n”+用户),
);
})托利斯先生()
);
}
});
}
);
返回streamBuilder;
}
}
正如我在问题中所说的,我知道这个解决方案不是很好,但至少它是有效的
我发现这方面存在一些问题:
- 它加载所有用户,而不仅仅是发布消息的用户。在小数据集中,这不会是一个问题,但随着我获得更多的消息/用户(并使用查询显示其中的一个子集),我将加载越来越多没有发布任何消息的用户
- 对于两个构建器的嵌套,代码的可读性不是很强。我怀疑这是否是惯用的颤振
如果你知道一个更好的解决方案,请作为答案发布。我得到了另一个版本,看起来比这个版本稍微好一点
在这里,我使用一个专用的Message
类来保存Message文档
和可选的关联用户文档
中的信息,并在自定义方法中隔离数据加载
class Message {
final message;
final timestamp;
final uid;
final user;
const Message(this.message, this.timestamp, this.uid, this.user);
}
class ChatList extends StatelessWidget {
Stream<List<Message>> getData() async* {
var messagesStream = Firestore.instance.collection("chat").orderBy("timestamp", descending: true).snapshots();
var messages = List<Message>();
await for (var messagesSnapshot in messagesStream) {
for (var messageDoc in messagesSnapshot.documents) {
var message;
if (messageDoc["uid"] != null) {
var userSnapshot = await Firestore.instance.collection("users").document(messageDoc["uid"]).get();
message = Message(messageDoc["message"], messageDoc["timestamp"], messageDoc["uid"], userSnapshot["name"]);
}
else {
message = Message(messageDoc["message"], messageDoc["timestamp"], "", "");
}
messages.add(message);
}
yield messages;
}
}
@override
Widget build(BuildContext context) {
var streamBuilder = StreamBuilder<List<Message>>(
stream: getData(),
builder: (BuildContext context, AsyncSnapshot<List<Message>> messagesSnapshot) {
if (messagesSnapshot.hasError)
return new Text('Error: ${messagesSnapshot.error}');
switch (messagesSnapshot.connectionState) {
case ConnectionState.waiting: return new Text("Loading...");
default:
return new ListView(
children: messagesSnapshot.data.map((Message msg) {
return new ListTile(
title: new Text(msg.message),
subtitle: new Text(DateTime.fromMillisecondsSinceEpoch(msg.timestamp).toString()
+"\n"+(msg.user ?? msg.uid)),
);
}).toList()
);
}
}
);
return streamBuilder;
}
}
类消息{
最后信息;
最终时间戳;
最终uid;
最终用户;
const Message(this.Message、this.timestamp、this.uid、this.user);
}
类ChatList扩展了无状态小部件{
流getData()异步*{
var messagesStream=Firestore.instance.collection(“chat”).orderBy(“timestamp”,降序:true).snapshots();
var messages=List();
等待(消息流中的var messagesSnapshot){
for(messagesSnapshot.documents中的var messageDoc){
var消息;
if(messageDoc[“uid”!=null){
var userSnapshot=await Firestore.instance.collection(“users”).document(messageDoc[“uid”]).get();
message=message(messageDoc[“message”]、messageDoc[“timestamp”]、messageDoc[“uid”]、userSnapshot[“name”]);
}
否则{
message=message(messageDoc[“message”]、messageDoc[“timestamp”]、“”、“”);
}
消息。添加(消息);
}
产生信息;
}
}
@凌驾
小部件构建(构建上下文){
var streamBuilder=streamBuilder(
流:getData(),
生成器:(BuildContext上下文,AsyncSnapsho)
import 'dart:async';
import 'dart:math' show Random;
final random = Random();
const messageList = [
{
'message': 'Message 1',
'timestamp': 1,
'uid': 1,
},
{
'message': 'Message 2',
'timestamp': 2,
'uid': 2,
},
{
'message': 'Message 3',
'timestamp': 3,
'uid': 2,
},
];
const userList = {
1: 'User 1',
2: 'User 2',
3: 'User 3',
};
class Message {
final String message;
final int timestamp;
final int uid;
final String user;
const Message(this.message, this.timestamp, this.uid, this.user);
@override
String toString() => '$user => $message';
}
// Mimic a stream of a list of messages
Stream<List<Map<String, dynamic>>> getServerMessagesMock() async* {
yield messageList;
while (true) {
await Future.delayed(Duration(seconds: random.nextInt(3) + 1));
yield messageList;
}
}
// Mimic asynchronously fetching a user
Future<String> userMock(int uid) => userList.containsKey(uid)
? Future.delayed(
Duration(milliseconds: 100 + random.nextInt(100)),
() => userList[uid],
)
: Future.value(null);
// Transform the contents of a stream asynchronously
Stream<List<Message>> getMessagesStream() => getServerMessagesMock()
.asyncMap<List<Message>>((messageList) => Future.wait(
messageList.map<Future<Message>>(
(m) async => Message(
m['message'],
m['timestamp'],
m['uid'],
await userMock(m['uid']),
),
),
));
void main() async {
print('Streams with async transforms test');
await for (var messages in getMessagesStream()) {
messages.forEach(print);
}
}
import 'package:rxdart/rxdart.dart';
class Messages {
final String messages;
final DateTime timestamp;
final String uid;
final DocumentReference reference;
Messages.fromMap(Map<String, dynamic> map, {this.reference})
: messages = map['messages'],
timestamp = (map['timestamp'] as Timestamp)?.toDate(),
uid = map['uid'];
Messages.fromSnapshot(DocumentSnapshot snapshot)
: this.fromMap(snapshot.data, reference: snapshot.reference);
@override
String toString() {
return 'Messages{messages: $messages, timestamp: $timestamp, uid: $uid, reference: $reference}';
}
}
class Users {
final String name;
final DocumentReference reference;
Users.fromMap(Map<String, dynamic> map, {this.reference})
: name = map['name'];
Users.fromSnapshot(DocumentSnapshot snapshot)
: this.fromMap(snapshot.data, reference: snapshot.reference);
@override
String toString() {
return 'Users{name: $name, reference: $reference}';
}
}
class CombineStream {
final Messages messages;
final Users users;
CombineStream(this.messages, this.users);
}
Stream<List<CombineStream>> _combineStream;
@override
void initState() {
super.initState();
_combineStream = Observable(Firestore.instance
.collection('chat')
.orderBy("timestamp", descending: true)
.snapshots())
.map((convert) {
return convert.documents.map((f) {
Stream<Messages> messages = Observable.just(f)
.map<Messages>((document) => Messages.fromSnapshot(document));
Stream<Users> user = Firestore.instance
.collection("users")
.document(f.data['uid'])
.snapshots()
.map<Users>((document) => Users.fromSnapshot(document));
return Observable.combineLatest2(
messages, user, (messages, user) => CombineStream(messages, user));
});
}).switchMap((observables) {
return observables.length > 0
? Observable.combineLatestList(observables)
: Observable.just([]);
})
}
@override
void initState() {
super.initState();
_combineStream = Firestore.instance
.collection('chat')
.orderBy("timestamp", descending: true)
.snapshots()
.map((convert) {
return convert.documents.map((f) {
Stream<Messages> messages = Stream.value(f)
.map<Messages>((document) => Messages.fromSnapshot(document));
Stream<Users> user = Firestore.instance
.collection("users")
.document(f.data['uid'])
.snapshots()
.map<Users>((document) => Users.fromSnapshot(document));
return Rx.combineLatest2(
messages, user, (messages, user) => CombineStream(messages, user));
});
}).switchMap((observables) {
return observables.length > 0
? Rx.combineLatestList(observables)
: Stream.value([]);
})
}
class ChatBloc {
final Firestore firestore = Firestore.instance;
final Map<String, String> userMap = HashMap<String, String>();
Stream<List<Message>> get messages async* {
final messagesStream = Firestore.instance.collection('chat').orderBy('timestamp', descending: true).snapshots();
var messages = List<Message>();
await for (var messagesSnapshot in messagesStream) {
for (var messageDoc in messagesSnapshot.documents) {
final userUid = messageDoc['uid'];
var message;
if (userUid != null) {
// get user data if not in map
if (userMap.containsKey(userUid)) {
message = Message(messageDoc['message'], messageDoc['timestamp'], userUid, userMap[userUid]);
} else {
final userSnapshot = await Firestore.instance.collection('users').document(userUid).get();
message = Message(messageDoc['message'], messageDoc['timestamp'], userUid, userSnapshot['name']);
// add entry to map
userMap[userUid] = userSnapshot['name'];
}
} else {
message =
Message(messageDoc['message'], messageDoc['timestamp'], '', '');
}
messages.add(message);
}
yield messages;
}
}
}
class ChatList extends StatelessWidget {
final ChatBloc chatBloc = ChatBloc();
@override
Widget build(BuildContext context) {
return StreamBuilder<List<Message>>(
stream: chatBloc.messages,
builder: (BuildContext context, AsyncSnapshot<List<Message>> messagesSnapshot) {
if (messagesSnapshot.hasError)
return new Text('Error: ${messagesSnapshot.error}');
switch (messagesSnapshot.connectionState) {
case ConnectionState.waiting:
return new Text('Loading...');
default:
return new ListView(children: messagesSnapshot.data.map((Message msg) {
return new ListTile(
title: new Text(msg.message),
subtitle: new Text('${msg.timestamp}\n${(msg.user ?? msg.uid)}'),
);
}).toList());
}
});
}
}
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/widgets.dart';
import 'package:rxdart/rxdart.dart';
class MessageWidget extends StatelessWidget {
// final chatStream = Firestore.instance.collection('chat').snapshots();
// final userStream = Firestore.instance.collection('users').snapshots();
Stream<QuerySnapshot> chatStream;
Stream<QuerySnapshot> userStream;
MessageWidget(this.chatStream, this.userStream);
@override
Widget build(BuildContext context) {
Observable<List<QuerySnapshot>> combinedStream = Observable.combineLatest2(
chatStream, userStream, (messages, users) => [messages, users]);
return StreamBuilder(
stream: combinedStream,
builder: (_, AsyncSnapshot<List<QuerySnapshot>> snapshots) {
if (snapshots.hasData) {
List<DocumentSnapshot> chats = snapshots.data[0].documents;
// It would be more efficient to convert this list of user documents
// to a map keyed on the uid which will allow quicker user lookup.
List<DocumentSnapshot> users = snapshots.data[1].documents;
return ListView.builder(itemBuilder: (_, index) {
return Center(
child: Column(
children: <Widget>[
Text(chats[index]['message']),
Text(getUserName(users, chats[index]['uid'])),
],
),
);
});
} else {
return Text('loading...');
}
});
}
// This does a linear search through the list of users. However a map
// could be used to make the finding of the user's name more efficient.
String getUserName(List<DocumentSnapshot> users, String uid) {
for (final user in users) {
if (user['uid'] == uid) {
return user['name'];
}
}
return 'unknown';
}
}