使用Cloud Firestore分页进行React-Native-gifted聊天

问题描述

我正在使用Firestore存储消息。为了优化移动应用程序的性能，我想在Firestore查询中设置一个limit（50）。 它运行良好，并实现了道具中可用的onLoadEarlier React-native-gifted-chat。

一切正常。

但是，当我在聊天室中发送新消息时，向上滚动以查看较早的消息后，只有50条带有新消息的消息（当然是不可用）。

因此，每次在Firestore数据库中添加一条消息时，都会执行onSnapshot（在useeffect中）并应用限制查询。

有办法避免这种情况吗？

谢谢。

这是我的useEffect：

useEffect(() => {
    const messagesListener = firestore()
    .collection('groups')
    .doc(group._id)
    .collection('messages')
    .orderBy('createdAt','desc')
    .limit(50)
    .onSnapshot(querySnapshot => {
        const newMessages = querySnapshot.docs.map(doc => {
            const firebaseData = doc.data();

            const data = {
                _id: doc.id,text: '',createdAt: new Date().getTime(),...firebaseData
            };

            return data;
        });

        setMessages(prevIoUsMessages => {
            return GiftedChat.append(prevIoUsMessages,newMessages);
        });
    });

    return () => messagesListener();
},[]);

解决方法

您的查询第一次可以，对于随后的查询，您必须使用:: startAt或:: startAfter方法。

您可以在官方文档中找到更多信息。 https://firebase.google.com/docs/firestore/query-data/query-cursors

,

我在react-native中使用FlatList来渲染聊天，我不得不对聊天列表进行分页。由于实时侦听器不支持Firestore查询光标，因此我创建了两个列表，recentChats和oldChats。

我使用实时监听器recentChats和query.onSnapshot使用光标oldChats填充了startAfter。 FlatList数据是两个列表的组合，我负责合并逻辑。

const MESSAGE_LIMIT = 15;

const ChatWindow = props => {
  const { sessionId,postMessage,onSendTemplateButtonPress } = props;

  // Firestore cursor is not supported in query.onSnapshot so maintaining two chat list
  // oldChats -> chat list via cursor,recentChats -> chat list via live listener
  const [oldChats,setOldChats] = useState([]);
  const [recentChats,setRecentChats] = useState([]);

  // if true,show a loader at the top of chat list
  const [moreChatsAvailable,setMoreChatsAvailable] = useState(true);

  const [inputMessage,setInputMessage] = useState('');

  useEffect(() => {
    const query = getGuestChatMessagesQuery(sessionId)
      .limit(MESSAGE_LIMIT);
    const listener = query.onSnapshot(querySnapshot => {
      let chats = [];
      querySnapshot.forEach(snapshot => {
        chats.push(snapshot.data());
      });
      // merge recentChats & chats
      if (recentChats.length > 0) {
        const newRecentChats = [];
        for (let i = 0; i < chats.length; i++) {
          if (chats[i].sessionId === recentChats[0].sessionId) {
            break;
          }
          newRecentChats.push(chats[i]);
        }
        setRecentChats([...newRecentChats,...recentChats]);
      } else {
        setRecentChats(chats);
        if (chats.length < MESSAGE_LIMIT) {
          setMoreChatsAvailable(false);
        }
      }
    });

    return () => {
      // unsubscribe listener
      listener();
    };
  },[]);

  const onMessageInputChange = text => {
    setInputMessage(text);
  };

  const onMessageSubmit = () => {
    postMessage(inputMessage);
    setInputMessage('');
  };

  const renderFlatListItem = ({ item }) => {
    return (<ChatBubble chat={item} />);
  };

  const onChatListEndReached = () => {
    if (!moreChatsAvailable) {
      return;
    }
    let startAfterTime;
    if (oldChats.length > 0) {
      startAfterTime = oldChats[oldChats.length - 1].time;
    } else if (recentChats.length > 0) {
      startAfterTime = recentChats[recentChats.length - 1].time;
    } else {
      setMoreChatsAvailable(false);
      return;
    }
    // query data using cursor
    getGuestChatMessagesQuery(sessionId)
      .startAfter(startAfterTime)
      .limit(MESSAGE_LIMIT)
      .get()
      .then(querySnapshot => {
        let chats = [];
        querySnapshot.forEach(snapshot => {
          chats.push(snapshot.data());
        });
        if (chats.length === 0) {
          setMoreChatsAvailable(false);
        } else {
          setOldChats([...oldChats,...chats]);
        }
      });
  };

  return (
    <View style={[GenericStyles.fill,GenericStyles.p16]}>
      <FlatList
        inverted
        data={[...recentChats,...oldChats]}
        renderItem={renderFlatListItem}
        keyExtractor={item => item.messageId}
        onEndReached={onChatListEndReached}
        onEndReachedThreshold={0.2}
        ListFooterComponent={moreChatsAvailable ? <ActivityIndicator /> : null}
      />
      {
        Singleton.isStaff ?
          null:
          <ChatInput
            onMessageInputChange={onMessageInputChange}
            onMessageSubmit={onMessageSubmit}
            inputMessage={inputMessage}
            style={GenericStyles.selfEnd}
            onSendTemplateButtonPress={onSendTemplateButtonPress}
          />
      }
    </View>
  );
};