套接字未在angular-firebase上连接以获得实时更新

Question

Hello I am new to angular and firebase trying to connect my angular app to get the real time data updates, I implemented the process from this url - https://www.djamware.com/post/5bbf534580aca7466989441c/angular-6-firebase-tutorial-firestore-crud-web-application , I am getting the initial data when the page loads from getOrder() function of the service.

in my app component -

import * as firebase from 'firebase';
import firestore from 'firebase/firestore';
import { environment } from '../environments/environment'; // here my configuration is

const settings = {timestampsInSnapshots: true}

ngOnInit(){
    firebase.initializeApp(environment.firebase);
    firebase.firestore().settings(settings);
}

in my firebase.service -

ref = firebase.firestore().collection('orders');
getOrders(): Observable<any> {
      console.log('on get orders snapshot');
      return new Observable((observer) => {
        this.ref.onSnapshot((querySnapshot) => {
          let boards = [];
          querySnapshot.forEach((doc) => {
            let data = doc.data();
            observer.next({
              driver_status: data.driver_status,
              food_status: data.food_status,
            });
          });
          observer.next(boards);
        });
      });
    }

    getOrder(id: string): Observable<any> {
      return new Observable((observer) => {
        this.ref.doc('ref-'+id).get().then((doc) => {
          let data = doc.data();
          observer.next({
            driver_status: data.driver_status,
            food_status: data.food_status,
          });
        });
      });
    }

in my detail component -

displayedColumns = ['driver_status', 'food_status'];
dataSource = new OrderDataSource(this.fs);

public fireOrder: Observable<any[]>;
ngOnInit(){
this.fs.getOrder(this.order.id).subscribe(res =>{
  this.fireOrder = res;
});
}
--------------------------
export class OrderDataSource extends DataSource<any> {

  constructor(private fs: FirebaseService) {
    super();
    console.log('in OrderDataSource constructor');
    this.connect();
  }

  connect() {
    console.log('in connect');
    return this.fs.getOrders();
  }

  disconnect() {
  }
}

I am getting the initial data from the firebase but it is not connecting the socket to get the real time data.

Answer 1

The doc().get() returns a promise, not a stream (Observable). With a promise, you can take advantage of only getting data once if that's your goal. In order to first get the data as well as listen to changes, what you need to be using is the doc().onSnapshot() method .

As a side mention, I'd recommend trying Angular's @angular/fire package (angular/angularfire2) for Angular + Firebase development since there is a lot of official documentation, specific support, and questions already out there for it. With it, it's possible for the getOrder method to be reduced to:

getOrder(id: string): Observable<Order> {
    console.log('on get order snapshot');
    return db.doc<Order>(`orders/${id}).valueChanges();
}