如何定期从firebase实时数据库中获取数据。或提取数据并将其显示为实时数据

Question

我是编程新手，我开始使用Ionic框架构建应用程序作为体验。我目前正在学习构建一个基本的社交媒体应用程序，匿名用户可以在该平台上发帖。

我现在处于用户可以评论帖子的阶段。但是，我很难在视图上显示每个帖子的实时评论数。

我计算评论的方法是从Firebase获取帖子数据，计算评论数量，然后显示给视图。

我尝试过使用间隔来每隔x秒获取post数据，以刷新post数据。这有点可行，但问题是离子内容（视图）一直在重新加载，就像每次刷新/重新加载数据时屏幕都在闪烁一样。在google chrome开发工具上运行一段时间后，它崩溃了，并说“资源不足”

有没有更好的方法可以显示来自Firebase实时数据库的实时数据？一个例子将不胜感激。

家页ts

import { PostsService } from '../posts/posts.service';
import { Posts } from '../posts/posts.model';


export class HomePage implements OnInit, OnDestroy {

  listedLoadedPosts: Posts[];
  private postSub: Subscription;
  commentCount: string[] = [];
  subscription: Subscription;

  constructor(
    private postService: PostsService,
  ) {}

  ngOnInit() {
    this.postSub = this.postService.posts.subscribe(posts => {
      this.listedLoadedPosts = posts; 

      const source = interval(10000);
      this.subscription = source.subscribe(val => 
      this.constantlyFetchCommentCount());
    });

  }


constantlyFetchCommentCount(){
  this.commentCount = [];
  this.postService.fetchPosts().subscribe(() => {

    // used to count comments in each posts and pushes it to commentCount[]. 
    for (const item of this.listedLoadedPosts) {
      this.commentCount.push((Object.values(item.comments).length - 1).toString());
    }

  });

}

  ionViewWillEnter() {
    this.commentCount = [];
    this.isLoading = true;
    this.postService.fetchPosts().subscribe(() => {

      // used to count comments in each posts and pushes it to commentCount[].
      for(const item of this.listedLoadedPosts){
        this.commentCount.push((Object.values(item.comments).length - 1).toString());
        this.isLoading = false;
      }
    });

  }

}

查看/html

// placed inside ion-virtual-scroll and ion-list
<ion-label >{{commentCount[i]}}</ion-label> 

帖子。服务ts

interface PostsData {
 comments: object;
 // also other data;
}

interface Comments {
  comment: string;
}


export class PostsService {
  private Pposts = new BehaviorSubject<Posts[]>([]);
  private Ccomments = new BehaviorSubject<Comment[]>([]);

  get posts() {
    return this.Pposts.asObservable();
  }

  get comments() {
    return this.Ccomments.asObservable();
  }


 constructor(private http: HttpClient) {} 



  fetchPosts() {
    return this.http
      .get<{ [key: string]: PostsData }>(
        'https://whatever.firebaseio.com/whatever.json'
      )
      .pipe(
        map(resData => {
          const posts = [];
          for (const key in resData) {
            if (resData.hasOwnProperty(key)) {
              posts.push(
                new Posts(
                  key,
                  resData[key].message,
                  // resData[key].description,
                  // etc....
                  // etc..
                   resData[key].comments
                )
              );
            }

          }
          return posts.reverse(); 
        }),
        tap(posts => {
          this.Pposts.next(posts);
        })
      );
  }






  fetchComments(id) {
    return this.http
      .get<{ [key: string]: Comments }>(
        `https://whatever.firebaseio.com/whatever/${id}/comments.json`
      )
      .pipe(
        map(resData => {
          const comment = [];
          for (const key in resData) {
            if (resData.hasOwnProperty(key)) {
              comment.push(
                new Comment(
                  key,
                  resData[key].comment
                )
              );
            }

          }
          return comment;
        }),
        tap(comment => {
          this.Ccomments.next(comment);
        })
      );
  }


}

帖子。模型ts

export class Posts {
  constructor(
    public id: string,
    public message: string,
    // etc.... 
    public comments: object
  ) {}
}


export class Comment {
  constructor(
    public id: string,
    public comment: string
  ) {}
}

Answer 1

Firebase为这种行为提供了一些非常酷的帮助函数。查看如何在此处进行设置：

https://firebase.google.com/docs/web/setup

这将使您能够访问以下内容：

https://firebase.google.com/docs/database/web/read-and-write

特别是，启用功能允许实时数据。

您可能还想看看AngularFire，这是一个将Firebase与AngularFire结合使用的优秀库：

https://github.com/angular/angularfire2