I'm implementing the cache using BehaviorSubject and multicast. The stream returned from the cache should start with HTTP request. I should also be able to force refresh the cache by triggering manually next on subject. The common approach with two subjects outlined by Poul Kruijt is well known and suggested everywhere. My idea is to find a way to achieve the following using only one subject throughout lifecycle of a stream.
It would be easy to achieve with multicast like this
const cache = new BehaviorSubject(null);
const shared = queryThatCompletes.pipe(multicast(cache)) as any;
// sets up subscription, waits for connect
shared.subscribe((values) => console.log(values));
// triggers http request
shared.connect();
setTimeout(() => {
// will only emit COMPLETE from subject
shared.subscribe((values) => console.log(values));
}, 2000);
// force refresh the cache
cache.next();
but since the HTTP query stream completes, the second subscription doesn't get any value, just COMPLETE notification from subject. This behavior is described in detail here.
The other option is to pass a factory function instead of the subject instance like this:
const cache = ()=> new BehaviorSubject(null);
const shared = queryThatCompletes.pipe(multicast(cache)) as any;
This will re-create the subject, that will subscribe to queryThatCompletes and re-trigger HTTP request. But the downsides is the need to call connect multiple times and redundant queries.
const cache = () => new BehaviorSubject(null);
const shared = queryThatCompletes.pipe(multicast(cache)) as any;
// sets up subscription, waits for connect
shared.subscribe((values) => console.log(values));
// triggers http request
shared.connect();
setTimeout(() => {
// sets up subscription, waits for connect
shared.subscribe((values) => console.log(values));
// triggers http request
shared.connect();
}, 2000);
So I simply implemented HTTP stream that doesn't complete by itself and use it like this:
const queryOnceButDontComplete = new Observable((observer) => {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => observer.next(data));
return () => {};
});
const cache = new BehaviorSubject(null);
const shared = queryOnceButDontComplete.pipe(multicast(cache)) as any;
// sets up subscription, waits for connect
shared.subscribe((values) => console.log(values));
// triggers http request
shared.connect();
setTimeout(() => {
// sets up subscription, waits for connect
shared.subscribe((values) => console.log(values));
}, 2000);
This works, but I'm wondering if there's a way to achieve what I want without the use of custom observable. Any ideas?
Best would be to just use a shareReplay(1):
const shared = queryThatCompletes.pipe(shareReplay(1));
// sets up subscription, waits for connect
shared.subscribe((values) => console.log(values));
// triggers http request
shared.connect();
setTimeout(() => {
shared.subscribe((values) => console.log(values));
}, 2000);
Not entirely sure what the subscribe and connect are doing there, but if you are just returning a HttpClient get call, then you should just return the shared observable, and whomever subscribes first to it, will trigger the http request. No need for connect. Any subsequent subscriptions will wait for the request to finish or receive the last emitted value from the observable.
Based on your comment, let's wrap this in a service (untested):
#Injectable()
SomeDataService {
readonly refresh$ = new BehaviorSubject(undefined);
readonly get$ = this.httpClient.get(/*url here*/);
readonly shared$ = this.refresh$.pipe(
switchMap(() => this.get$),
shareReplay(1)
);
constructor(private httpClient: HttpClient) {}
getData(): Observable<unknown> {
return this.shared$;
}
refreshData(): void {
this.refresh$.next();
}
}
Does this make sense? Basically you start with a refresh subject, which get mapped to the actual network call. On the first getData(), the network request gets triggered. Any call on getData() after that will get the cached value. Calling refreshData will refresh the data for any subscription
I have made functional approach that I believe is much more simpler
it uses two observables refresh$ and the desired observable,
I hope this solution might give you some thoughts
const makeRestartableCahcedObservable = (ob:Observable<any>)=>{
const refresh$ = new BehaviorSubject(null)
return [
refresh$.pipe(
switchMap(()=>ob),
shareReplay(1)
),
()=>refresh$.next(null)
]
}
const [ob, refreshFun] = makeRestartableCahcedObservable(of('string'))
ob.subscribe(console.log)
setTimeout(()=>{refreshFun()}, 3000)
this basically can refresh your data with much more simpler API,
you can even wrap it with an object to make it a proxy with included refresh function
const makeRestartableCahcedObservable = (ob:Observable<any>)=>{
const refresh$ = new BehaviorSubject(null)
const wrappedOb$ = refresh$.pipe(switchMap(()=>ob),shareReplay(1))
return {
subscribe:(...args)=>wrappedOb$.subscribe(...args),
pipe:(...funs)=>wrappedOb$.pipe(...funs),
refresh:()=>refresh$.next(null)
}
}
const ob = makeRestartableCahcedObservable(of('string'))
ob.subscribe(console.error)
setTimeout(()=>{ob.refresh()}, 3000)
Related
I have been trying to get stream of objects in a sequencial order, however concatMap is not working for me. With mergeMap I get the stream but no in a sequencial order.
Below is my code I am trying:
this.result
.pipe(
map((result: Result) => {
return result.contents
.map((content: Content) => this.databaseService
.getResource<Resource>('Type', content.key) // http call in service
)
}),
mergeMap((requests: Observable<Resource>[]) => {
return from(requests)
.pipe(
concatMap((resource: Observable<Resource>) => resource), // ----> Trigger only once.
filter((resource:Resource) => resource.status === 'active'),
skip(this.pageIndex * this.PAGE_SIZE),
take(this.PAGE_SIZE),
)
}),
)
.subscribe({
next: (resource: Resource) => {
console.log(resource) // resource stream
},
complete: () => console.log('completed')
});
concatMap will only process one observable source at a time. It will not process subsequent sources until the current source completes.
In your case the observable from this.databaseService.getResource() is not completing. To force it to complete after the first emission, you could append a take(1) like this:
concatMap((resource: Observable<Resource>) => resource.pipe(take(1))
Alternatively, if the call to databaseService.getResource() is only meant to emit a single value, you could modify your service to emit only a single value.
// http call in service
Note: If you are using the Angular HttpClient, a typical get request will complete when the response is received. So you can probably have your getResource() method return the oservable from the http.get() call.
Im having an Observable that is storing data from an API.
countDownLogout$: Observable<any> = this.authenticationService
.getCountdown()
.pipe(
tap((x) => {
console.log('calling the service');
setTimeout(() => {
this.authenticationService.getCountdown().subscribe();
}, 20000);
})
<ng-container *ngIf="countDownLogout$ | async as countDownLogout">
The API is called but observable and as result data and console log are not fired. Except from the first time.
I would like the observable to re-take the data after re-calling the API.
It doesn't work because that is not how you should do that.
Use this approach instead.
countdownLogout$ = timer(0, 20000).pipe(
tap((i) => console.log('Calling the service for the ' + i + 'nth time')),
switchMap(() => this.authenticationService.getCountdown())
);
Be careful to unsubscribe properly from this observable, otherwise you will have memory leaks !
What I want to do:
Send a 'request' event to a websocket server.
Receive an immediate response event bundled with some additional data.
Keep receiving responses over time.
My question is:
Is there a cleaner way of doing what I'm doing below? Without using setTimeout.
First, look at this simplified working example:
const { Subject, defer, interval, of} = rxjs;
const EventEmitter = EventEmitter3;
const emitter = new EventEmitter();
const subject = new Subject();
// The next lines mock a websocket server message listener, imagine this being present on server side
emitter.on("request", () => {
subject.next(`Immediate response`);
interval(1000).subscribe((index) =>
subject.next(`Delayed response...${index}`)
);
});
// Imagine the following code being present in the browser
function getData() {
return defer(() => {
// The next line mocks a websocket client sent event
setTimeout(() => emitter.emit("request"), 0);
return subject;
});
}
getData().subscribe((data) => console.log(data));
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/eventemitter3#latest/umd/eventemitter3.min.js"></script>
Now look at a non-working example. Here, the client doesn't get the immediate response, because the 'request' event is being sent before the subscription is set up.
const { Subject, defer, interval, of} = rxjs;
const EventEmitter = EventEmitter3;
const emitter = new EventEmitter();
const subject = new Subject();
// The next lines mock a websocket server message listener, imagine this being present on server side
emitter.on("request", () => {
subject.next(`Immediate response`);
interval(1000).subscribe((index) =>
subject.next(`Delayed response...${index}`)
);
});
// Imagine the following code being present in the browser
function getData() {
return defer(() => {
emitter.emit('request');
return subject;
});
}
getData().subscribe((data) => console.log(data));
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/eventemitter3#latest/umd/eventemitter3.min.js"></script>
You could use a BehaviorSubject instead of a Subject:
const { BehaviorSubject, defer, interval, of } = rxjs;
const EventEmitter = EventEmitter3;
const emitter = new EventEmitter();
const subject = new BehaviorSubject();
// The next lines mock a websocket server message listener, imagine this being present on server side
emitter.on("request", () => {
// the timing of this synchronous response would be impossible in a real socket
subject.next(`Immediate response`);
interval(1000).subscribe((index) =>
subject.next(`Delayed response...${index}`)
);
});
// Imagine the following code being present in the browser
function getData() {
return defer(() => {
emitter.emit('request');
return subject;
});
}
getData().subscribe((data) => console.log(data));
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/eventemitter3#latest/umd/eventemitter3.min.js"></script>
Keep in mind though that it's impossible for the server's response to arrive back synchronously after the socket request is sent in the same way you've implemented your mock for this demo, so while Subject does not produce the expected result here, it would work fine with a real socket.
In the example provided in the aor-realtime readme
import realtimeSaga from 'aor-realtime';
const observeRequest = (fetchType, resource, params) => {
// Use your apollo client methods here or sockets or whatever else including the following very naive polling mechanism
return {
subscribe(observer) {
const intervalId = setInterval(() => {
fetchData(fetchType, resource, params)
.then(results => observer.next(results)) // New data received, notify the observer
.catch(error => observer.error(error)); // Ouch, an error occured, notify the observer
}, 5000);
const subscription = {
unsubscribe() {
// Clean up after ourselves
clearInterval(intervalId);
// Notify the saga that we cleaned up everything
observer.complete();
}
};
return subscription;
},
};
};
const customSaga = realtimeSaga(observeRequest);
fetchData function is mentioned, but it's not accessible from that scope, is it just a symbolic/abstract call ?
If I really wanted to refresh the data based on some realtime trigger how could i dispatch the data fetching command from this scope ?
You're right, it is a symbolic/abstract call. It's up to you to implement observeRequest, by initializing it with your restClient for example and calling the client methods accordingly using the fetchType, resource and params parameters.
We currently only use this saga with the aor-simple-graphql-client client
I'm trying to hook into a stream a) before the request is executed and b) after the request is received (e.g. to show/hide a loading bar). Without using interval I could set a boolean isLoaded to false and set it to true in the subscribe function.
But how can I do that with using interval?
Observable.interval(5000).
timeout(3500, new Error('Server not available.')).
flatMap(() => this._http.get('http://api.dev/get/events')).
map(res => (<Response>res).json())
.subscribe(data => this.events = data,
error => console.debug('ERROR', error),
() => console.log('END')
);
Do I have to wrap angulars http.get method in my own observable? Or is there a better / "more angular" way to do it?
I would suggest to not use interval because network request can delay and take longer/shorter times then the interval which would/could make it inconsistent. The way to do it though is...
// the import needed is
import { interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
private intervalSub: Subscription;
private ngUnsubscribe = new Subject();
somefunction (){
// Interval_Time was 5000
this.intervalSub = interval(Interval_Time)
.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
// call your api and do the request every Interval time
}
}
// make sure you have
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
the reason you need the ngUnsubscribe subject is so if you route away from the component then it won't keep polling.