Javascript 用于获取实时更新的angular firebase上的套接字未连接

您好，我是angular和firebase的新手，尝试连接我的angular应用程序以获取实时数据更新，我从这个url实现了这个过程-，我从服务的getOrder（）函数加载页面时获取初始数据

在我的应用程序组件中-

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);
}

在我的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,
          });
        });
      });
    }

ref=firebase.firestore（）.collection（'orders'）；
getOrders（）：可观察{
log（'on get orders snapshot'）；
返回新的可观察对象（（观察者）=>{
此.ref.onSnapshot（（querySnapshot）=>{
让董事会=[]；
querySnapshot.forEach（（doc）=>{
设data=doc.data（）；
下一个({
驱动程序状态：data.driver\u status，
食物状况：数据。食物状况，
});
});
观察员：下一届（理事会）；
});
});
}
getOrder（id:string）：可观察{
返回新的可观察对象（（观察者）=>{
this.ref.doc（'ref-'+id）.get（）。然后（（doc）=>{
设data=doc.data（）；
下一个({
驱动程序状态：data.driver\u status，
食物状况：数据。食物状况，
});
});
});
}

在我的细节部分-

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() {
  }
}

displayedColumns=[“驾驶员状态”、“食物状态”]；
dataSource=新的OrderDataSource（this.fs）；
公共秩序：可见；
恩戈尼尼特（）{
this.fs.getOrder（this.order.id）.subscribe（res=>{
this.fireOrder=res；
});
}
--------------------------
导出类OrderDataSource扩展了DataSource{
构造函数（私有fs:FirebaseService）{
超级（）；
log（'in OrderDataSource构造函数'）；
这个.connect（）；
}
连接（）{
console.log（'in connect'）；
返回这个.fs.getOrders（）；
}
断开连接（）{
}
}

我正在从firebase获取初始数据，但它没有连接套接字以获取实时数据。

doc（）.get（）返回承诺，而不是流（可观察）。有了承诺，如果这是您的目标，您可以利用只获取一次数据的优势。为了首先获取数据并听取更改，您需要使用的是

顺便提一句，我建议尝试（angularfire2）angular+Firebase开发，因为已经有很多官方文档、具体支持和问题。使用它，getOrder方法可以简化为：

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

getOrder（id:string）：可观察{
log（'on get order snapshot'）；
返回db.doc（`orders/${id}）.valueChanges（）；
}

谢谢@one午餐提供的答案doc（）。onSnapshot（）为我做了这项工作，但我的脑海中有一个问题，我正在XHR请求中获得更新，我的系统如何知道何时发出XHR请求。我想XHR请求是从我这边发出的。