Leave rxjs-for-await loop programatically - rxjs

Question

I have app that opens stream where server pumps SSEs.
I want the loop to run until desired value arrives, then leave the loop and continue.
I've looked at takeWhile operator, but couldn't find a way to implement it. I also don't know how could I unsubscribe and since the stream never completes...
const stream = this.sseService.returnAsObservable();
for await (const data of eachValueFrom(stream)) {
console.log(data);
if (data.jobid === "JOB05879") {
this.sseService.stopConnection();
// how to get out now?
}
}
console.log('we are out');

Answer 1

Generally, mixing promises and observables is an anti-pattern. If you don't mind that, then here's a way to get only the first data where data.jobid === "JOB05879". You don't need for-await as you're just expecting 1 value from this stream.
const stream = this.sseService.returnAsObservable().pipe(
filter(data => data.jobid === "JOB05879"),
first()
);
data = await stream.toPromise();
console.log(data);
this.sseService.stopConnection();
console.log('we are done');
Without promises:
const stream = this.sseService.returnAsObservable().pipe(
filter(data => data.jobid === "JOB05879"),
first()
).subscribe({
next: data => {
console.log(data);
this.sseService.stopConnection();
},
error: _ console.log("Data with jobid JOB05879 not found"),
complete: () => console.log("We are done");
});
Update #1: Using forkJoin
You wrote the following which first grabs an array of finito and then uses that array as input for your notes.
const finito = await forkJoin([
this.jobsService.submitTestJob('blabla1').pipe(first()),
this.jobsService.submitTestJob('blabla2').pipe(first())
]).toPromise();
const notes = await forkJoin([
this.sseService.returnAsObservable().pipe(
filter((d: any) => d.jobid === finito[0].jobid),
first()
),
this.sseService.returnAsObservable().pipe(
filter((d: any) => d.jobid === finito[1].jobid),
first()
)
]).toPromise();
That should work, though there's a bunch of error checking you should do.
This can actually be simplified using RxJS operators so that you're not waiting on each finito
const notes = await merge(
this.jobsService.submitTestJob('blabla1').pipe(first()),
this.jobsService.submitTestJob('blabla2').pipe(first()),
this.jobsService.submitTestJob('blabla3').pipe(first()),
this.jobsService.submitTestJob('blabla4').pipe(first()),
this.jobsService.submitTestJob('blabla5').pipe(first()),
).pipe(
mergeMap(finito => this.sseService.returnAsObservable().pipe(
filter((d: any) => d.jobid === finito.jobid),
first()
)),
toArray()
).toPromise();
And another step to make it even more concise, if you'd like:
const notes = await from([
"blabla1",
"blabla2",
"blabla3",
"blabla4",
"blabla5"
]).pipe(
mergeMap(blabla =>
this.jobsService.submitTestJob(blabla).pipe(first())
),
mergeMap(finito => this.sseService.returnAsObservable().pipe(
filter((d: any) => d.jobid === finito.jobid),
first()
)),
toArray()
).toPromise();
Even more concise:
const notes = await from([1,2,3,4,5]).pipe(
map(num => `blabla${num}`),
mergeMap(blabla =>
this.jobsService.submitTestJob(blabla).pipe(first())
),
mergeMap(finito => this.sseService.returnAsObservable().pipe(
filter((d: any) => d.jobid === finito.jobid),
first()
)),
toArray()
).toPromise();
Making only 1 call to sseService
From the look of your example code, it seems it should be possible for you to make just one call to this.sseService.returnAsObservable(). It can filter through any of the allowable jobs.
That might look like this:
const params = [1,2,3,4,5];
const notes = await from(params).pipe(
map(num => `blabla${num}`),
mergeMap(blabla =>
this.jobsService.submitTestJob(blabla).pipe(first())
),
toArray(),
mergeMap(finitoArray => this.sseService.returnAsObservable().pipe(
filter(d => finitoArray.map(f => f.jobid).includes(d.jobid))
)),
take(params.length),
toArray()
).toPromise();
and to take this example back to the two-stage code you wrote, that would look like this:
const params = [1,2,3,4,5];
const streams = params
.map(num => `blabla${num}`)
.map(blabla => this.jobsService.submitTestJob(blabla).pipe(first())
const finito = await forkJoin(streams).toPromise();
const notes = await this.sseService.returnAsObservable().pipe(
filter(d => finitoArray.map(f => f.jobid).includes(d.jobid)),
take(params.length),
toArray()
).toPromise();