How to make the observable still fire without subscribing? - rxjs

Question

I have the following code =>
https://stackblitz.com/edit/angular-3avdpv
this.joystickStart$ = Observable.create(observer => {
this.joystickManager.on('start', (evt, nipple) => {
console.log("START")
observer.next(nipple);
});
});
this.joystickMove$ = Observable.create(observer => {
this.joystickManager.on('move', (evt, nipple) => {
console.log("MOVE")
this.lastEvent = nipple;
clearInterval(this.lastInterval);
this.lastInterval = setInterval(() => {
observer.next(this.lastEvent);
}, this.refireFrequency);
observer.next(nipple);
});
});
this.joystickRelease$ = Observable.create(observer => {
this.joystickManager.on('end', (evt, nipple) => {
console.log("END")
clearInterval(this.lastInterval);
observer.next(nipple);
});
});
the problem I face is, if someone subscribe to the joystickStart$, joystickMove$, joystickEnd$ the content of the observable is fired. but if none do this (or subscribe only to for exemple movement, the start and end are not fired.
but, this break my system, cause the setInterval will not be cleared.
how to make it work even without subscriber ? should I autosubscribe ?

Answer 1

As per your question, it appears you want to do following -
As soon as joystick starts, track the joystick move and do that until the first joystick release comes. If my understanding is correct then instead of using setInterval or [imperative approach], you can use rxjs operators [reactive approach] and various Subjects like this:
export class JoystickComponent implements AfterViewInit {
#ViewChild('joystick') joystick: ElementRef;
#Input() options: nipplejs.JoystickManagerOptions;
private lastEvent: nipplejs.JoystickOutputData;
private refireFrequency: 1000;
private lastInterval: any;
private joystickManager: nipplejs.JoystickManager;
joystickStart$ = new Subject<nipplejs.JoystickOutputData>();
joystickMove$ = new Subject<nipplejs.JoystickOutputData>();
joystickRelease$: Subject<nipplejs.JoystickOutputData> = new Subject<nipplejs.JoystickOutputData>();
constructor() { }
ngAfterViewInit() {
this.create();
}
create() {
this.joystickManager = nipplejs.create({
zone : this.joystick.nativeElement,
position: {left: '50%', top: '50%'},
mode: 'semi'
});
this.joystickManager.on('start', (evt, nipple) => {
this.joystickStart$.next(nipple);
});
this.joystickManager.on('move', (evt, nipple) => {
this.joystickMove$.next(nipple);
});
this.joystickManager.on('end', (evt, nipple) => {
this.joystickRelease$.next(nipple);
});
//combine start and move events
//and do that until you hit first released event
combineLatest(this.joystickStart$
.pipe(tap(_ => console.log(`Joystick Started`))),
this.joystickMove$
.pipe(tap(_ => console.log(`Joystick Moved`)))
)
.pipe(
takeUntil(this.joystickRelease$.pipe(tap(_ => console.log(`Joystick released`)))),
//If you want to repeat the observable then use repeat operator
//repeat()
).subscribe(([start, move]) => {
console.log({start}, {move});
}, () => {}, () => console.log('complete'));
}
}
Working stackblitz - https://stackblitz.com/edit/angular-fazjcf?file=src/app/joystick/joystick.component.ts

Answer 2

Change to using subjects and have the logic in a subscription to the subject.
this.joystickRelease$ = new Subject();
this.joystickRelease$.subscribe(
nipple => { clearInterval(this.lastInterval); }
);
this.joystickManager.on('end', (evt, nipple) => {
this.joystickRelease$.next(nipple);
});