在聊天应用中优化Firestore实时更新

时间:2018-10-02 15:43:07

标签: javascript firebase react-native google-cloud-firestore react-native-firebase

我正在使用Firestore实时更新在我的React Native应用中创建实时聊天。我读到,这可能不是建立聊天的最佳方法,但我决定这样做是因为我已经在使用Firebase,并且聊天不是该应用程序的主要目的。因此,在实时聊天的情况下,我将如何优化Firestore连接?通常它确实能很好地工作,但到目前为止我遇到了一些问题:

  • 消息传入缓慢
  • 邮件发送后未显示
  • 推送通知在消息之前到达

这些问题通常在互联网连接不佳(尽管Whatsapp消息仍然可以正常工作)时发生,但有时在良好的连接上也会发生...

这是我查询数据的方式(在componentDidMount中添加了实时侦听器,在componenWillUnmount中将其删除了):

onLogUpdate = (querySnapshot) => {
  allMessages = this.state.allMessages

  cb = (allMsgs) => {
    allMsgs.sort((a,b) => {
      a = new Date(a.timestamp);
      b = new Date(b.timestamp);
      return a>b ? -1 : a<b ? 1 : 0;
    })
    messages = _.takeRight(allMsgs, this.state.messageLimit)
    this.setState({ loading: false, messages, allMessages: allMsgs })
  }

  async.map(querySnapshot._changes, (change, done) => {
    if (change.type === "added") {
      const msgData = change._document.data()
        if (msgData.origin == 'user') {
          this.usersRef.doc(msgData.byWhom).get()
            .then(usr => {
              msgData.user = usr.data()
              done(null, msgData)
            })
            .catch(err => { console.log('error getting user in log:', err) })
        } else {
          done(null, msgData)
        }
    } else {
      done(null, 0)
    }
  }, (err, results) => {
    const res = results.filter(el => { return el != 0 })
    allMessages = _.concat(allMessages, res)
    cb(allMessages)
  })
}

这是我添加新消息的方式:

// in utils.js
exports.addLogMessage = (msgObj, moment_id, callback) => {
  logMessagesRef.add(msgObj)
    .then(ref => {
      momentsRef.doc(moment_id).get()
        .then(doc => {
          const logMsgs = doc.data().logMessages ? doc.data().logMessages : []
          logMsgs.push(ref.id)
          momentsRef.doc(moment_id).update({ logMessages: logMsgs })
        })
        .then(() => {
          if (callback) {
            callback()
          }
        })
    })
    .catch(err => { console.log('error sending logMessage:', err) })
}

// in chat Screen
sendLogMessage = () => {
  if (this.state.newMessage.length > 0) {
    firebase.analytics().logEvent('send_log_message')
    this.setState({ newMessage: '' })
    const msgObj = {
      text: this.state.newMessage,
      origin: 'user',
      timestamp: Date.now(),
      byWhom: this.state.user._id,
      toWhichMoment: this.state.moment._id
    }
    addLogMessage(msgObj, this.state.moment._id)
  }
}

任何建议将不胜感激:)

1 个答案:

答案 0 :(得分:0)

我正在做类似的事情,提交数据后,它不会显示在ListView中。我通过将新条目推入已映射的预先存在的状态来解决它,并且由于ActiveRecord::StaleObjectError.new调用了 attr_accessible :original_updated_at def original_updated_at @original_updated_at || updated_at.to_f end def set_total_and_buckets_used tries = 0 begin if total_approved - attributes["total_amount_used"] < 0 raise Exception.new("Total amount used is greater than approved") elsif self.updated_at.to_f == original_updated_at @original_updated_at = nil raise ActiveRecord::StaleObjectError.new("Car is changed while you were editing") else self.with_lock do attributes["updated_at"] = Time.now.utc Product.where(:id => self.id).update_all(attributes) self.attributes = attributes end end rescue ActiveRecord::StaleObjectError => e if tries < 3 tries += 1 retry else raise Exception.new(timeout.inspect) end end self.reload attributes end 方法,所以它工作得很好。我做了这样的事情:

setState()

这当然是假设您使用render()来呈现聊天记录。当我无法看到我发送的消息时,以及随着数据库更新而更新的消息时,这将起作用,您可能想利用Firebase API提供的 sendLogMessage().then(newData => { joined = this.state.data.concat(newData); this.setState({ data: joined}) }) 回调。希望我能帮上忙。