Angular Firebase слушает foreach изменения с подпиской - PullRequest
Новая
       43

Angular Firebase слушает foreach изменения с подпиской

0 голосов
/ 05 февраля 2019

Я подписываюсь на получение чатов пользователей, а затем для каждого чата я подписываюсь на две другие наблюдаемые. 

get_user_chat(chat) {
    let user = this.firebase.get_user_by_uid(chat.key).snapshotChanges();
    let chatInfo = this.firebase.get_single_chat(chat.payload.val()).snapshotChanges();
    return Observable.forkJoin(user.take(1), chatInfo.take(1));
}

getChats() {
//start loading
let loading = this.loadingCtrl.create();
loading.present();

//get chats
this.firebase.get_user_chats().snapshotChanges().takeUntil(this.ngUnsubscribe).subscribe(chats => {
  chats.forEach(chat => {
    this.get_user_chat(chat).takeUntil(this.ngUnsubscribe).subscribe(userChat => {
      this.userChat = userChat;
      this.user = this.userChat[0];
      this.chat = this.userChat[1];

      this.chats.push({
        firstName: this.user.payload.val().firstName,
        imageUrl: this.user.payload.val().imageUrl,
        uid: this.user.key,
        chatId: chat.payload.val(),
        last_message: this.chat.payload.val().last_message.message,
        type: this.chat.payload.val().last_message.type
      })
    })
  })
  //dimiss loading
  loading.dismiss();
}, err => {
  //dimiss loading
  loading.dismiss();
})

}

Теперь для внешнего интерфейса я отображаюданные как это: 

<ion-content>
  <ion-list class="chat-list" *ngIf="(chats)?.length>0">
    <a ion-item detail-none *ngFor="let c of chats" (click)="toChat(c.chatId, c.uid)">
      <ion-thumbnail item-start>
        <img-loader class="img-logo" src={{c.imageUrl}} fallbackUrl="assets/img/placeholder-person.png" useImg></img-loader>
      </ion-thumbnail>
      <h2>{{c.firstName}}</h2>
      <h3 *ngIf="c.type!='img'">{{c.last_message}}</h3>
      <img class="img-placeholder" *ngIf="c.type=='img'" src="assets/img/placeholder-image.png">
      <!-- <ion-icon item-right name="ios-arrow-forward"></ion-icon> -->
    </a>
  </ion-list>
  <ion-card *ngIf="(chats)?.length==0">
    <ion-card-content>
      You don't have any chats.
    </ion-card-content>
  </ion-card>
</ion-content>

Это работает, за исключением того, что последнее сообщение чата не будет автоматически обновляться во внешнем интерфейсе, я понимаю, почему это не работает, я толкаю наблюдателя в массив, который теряетфункция для прослушивания изменений, но я не мог понять, как я могу прослушивать изменения, не выдвигая объекты от двух разных подписчиков и правильно отображая их.По сути, мне приходится каждый раз перезагружать список чатов, чтобы увидеть изменения.

Это лучше объяснить картинками:

Последнее сообщение для Холли: «a» Last message for Holly is a

Я отправляю еще одно сообщение Холли, последнее сообщение теперь должно быть 'B' I send another message, the last message should now be B

Но последнее сообщение не будет обновлятьсябез обновления страницы, он не слушает изменения, потому что я помещаю наблюдаемое в массив But last message won't update without refreshing the page

Структура базы данных Firebase в реальном времени для чата 1: 1

Пользователь1: enter image description here

Пользователь 2: enter image description here

Чат: enter image description here

1 Ответ

0 голосов
/ 05 февраля 2019

Я настоятельно рекомендую моделировать каждую комнату чата как коллекцию в Firestore.Таким образом, если у вас есть чат / коллекция для чата между Бренданом и Холли, вы читаете только из одной коллекции, а не из двух.Это также упрощает поддержание сообщений в правильном порядке, так как вы можете использовать один запрос для их получения.

Пример этого см. Лучший способ управления каналами чата в Firebase .Хотя этот вопрос касается базы данных реального времени, ту же логику можно применить к облачному хранилищу пожаров.

...