Get a service callback function response in component

Question

My component calling a function from service which get data through a sdk. Sdk get data and response in a callback function. It returns before getting any response of callback function. How can i inform my component that service callback response done?

Component.ts

async publishSession() {

    let publishCallback = await this.myService.publishStream();
    
  }

Service.ts

callbackResponse;
publishStream(publishCapabilities, mediaConstraints) {
    this.session = session;

    var videoElement = document.getElementsByTagName('video')[0];

    var publishOptions = {
      publishToken: publishing,
      mediaConstraints: mediaConstraints,
      videoElement: videoElement
    };

    return this.sdk.publishToChannel(publishOptions, this.publisherCallback.bind(this));
  }

publisherCallback(error, response) {
    
      if (error) {
        this.logger.log(error);
      }

 this.callbackResponse = response; // need this response in component once received here.
}

score 0 · Answer 1 · answered Nov 15 '21 at 08:16

There are a couple of ways to solve this. One of them is using Promise and another one is using observables. Given that the library you are using is based on promises, we can think about it in the following way:

publishStream(publishCapabilities, mediaConstraints): Promise<any> {
  this.session = session;

  var videoElement = document.getElementsByTagName('video')[0];

  var publishOptions = {
    publishToken: publishing,
    mediaConstraints: mediaConstraints,
    videoElement: videoElement
  };


  return new Promise((resolve, reject) => {
    this.sdk.publishToChannel(publishOptions, (error, response) => {
      if (error) {
        reject(error);
        return;
      }
      resolve(response);
    });
  });
}

And now when you call this, you will get the response of the publishToChannel call.

score 0 · Answer 2 · answered Nov 15 '21 at 08:18

You can add a Subject into your service and subscribe in the component to that subject property to get callback response. Update your component and service respectively:

Component.ts

export class YourComponent implements OnInit {

    constructor(private service: YourService) {}

    ngOnInit(): void {

        // here we will subscribe to the new value of a callback response
        this.service
            .callbackResponse
            .subscribe(response => {
                // process your response here...
            });
    }
}

Service.ts

export class UtilsService {
    callbackResponse = new Subject();

    publishStream(publishCapabilities, mediaConstraints) {
        this.session = session;

        var videoElement = document.getElementsByTagName('video')[0];

        var publishOptions = {
        publishToken: publishing,
        mediaConstraints: mediaConstraints,
        videoElement: videoElement
        };

        return this.sdk.publishToChannel(publishOptions, this.publisherCallback.bind(this));
    }

    publisherCallback(error, response) {
        
        if (error) {
            this.logger.log(error);
        }

        // this will send a response to the subscription in your component
        this.callbackResponse.next(response);
    }
}

Above example should work, but there are couple things to consider

Subject vs. BehaviorSubject
any component which will subscribe to callbackResponse Subject will have access to the response - nothing bad, just something you should be aware of
it's good to add type, if you know the shape of your response, e.g. new Subject<T>() instead of new Subject()

Get a service callback function response in component

2 Answers2