CODEWITHSUNDEEP
angulargoogle-cloud-firestoreobservablesubscribenestjs
Radecom System
Radecom System

Reputation: 252

How to subscribe from Angular to a NestJs Observable?

I'm doing an application in angular 7 with database in Firestore, but to avoid the cloud functions, I decided to backend with NestJs (5), and I use the firebase-admin transactions to keep the embedded data synchronized. Everything seems to work well when I do the consultations, my nestjs backend is responsible for collecting and joining them to respond to my frontend application in angular. But here my real question: What do I have to do to make my back end in nestjs return an observable to the angular frontend?

What I want to achieve is that my fronted detect the changes in real time of firestore through my backend in NestJs.

Introduction I'm doing an application in angular 7 with database in Firestore, but to avoid the cloud functions, I decided to backend with NestJs (5), and I use the firebase-admin transactions to keep the embedded data synchronized. Everything seems to work well when I do the consultations, my nestjs backend is responsible for collecting and joining them to respond to my frontend application in angular. But here my real question: What do I have to do to make my back end in nestjs return an observable to the angular frontend?

What I want to achieve is that my fronted detect the changes in real time of firestore through my backend in NestJs.

I understand that from NestJs we can return as a result of an observable so that from angular you subscribe to the changes in real time.

Firestore -> Nestjs (runing in Firebase functions) -> Angular (.subscribe)

Current function in NestJs:

async getAllAdministratorsForFirestore(): Promise<Administrator[]> {

    const administratorsSnapshot = await administratorsRef.get();
    const administrators = [];
    administratorsSnapshot.forEach(doc => {
      administrators.push(mapFirestoreDocs(doc.id, doc.data()));
    });

    return administrators;
  }

Current consumer in Angular:

subscribeToAdministratorsForNestJs() {

    this.http.get(nestJsEndPointUrl, options).subscribe((administrators) => {
      this.administrators = administrators;
    })
  }

What I want to achieve is that my fronted detect the changes in real time of firestore through my backend in NestJs.

But how do I do it?

Upvotes: 1

Views: 827

Answers (1)

Ing. Alejandro Villal&#243;n
Ing. Alejandro Villal&#243;n

Reputation: 522

To achieve what you want to do, you need the @nestjs/websockets package that is included in NestJs and the ngx-socket-io package in Angular.

With that, you can subscribe to the changes that your firestore database emits when someone connects to the @WebSocketServer () server that generates NestJs and sends them through the method

client.broadcast.emit ('change', changes);

and from angular only you subscribe to the event change:

this.socket.fromEvent ('change'). subscribe ((changes) => console.log (changes));

And that's it;), a suggestion when the users connected to that socket is 0, unsubscribe to the changes in the firestore database.

Upvotes: 1

Related Questions