understanding observers and subscibers angular2

Question

long time lurker - first time poster. This is a lot of theory, so bear with me.

I am working to mentally model the idea of an observable, observer and a subscriber (rxjs and angular2) and wanted to make sure I am on the right track.

I currently understand observables as "streams of events that can be watched and acted upon". arrays and requests can be cast as observable so that an observer can subscribe to them and when an event is fired can act on that event or the data in the observable.

I see that a subscriber is a type of observer that can watch an observable with 3 possible handlers: onNext, onComplete and onError.

I understand these can be in separate classes so long as the subscriber can gain access to the observable to subscribe.

Please let me know if this is an accurate description.

If this is true, I am curious as how to make an array observable as in: when new items are added to the array, how do I subscribe to that event and act upon it?

I have tried working through this by creating an array, filling it with mouse events and attempting to cast this array as Observable.

This failed, but I was able to create an observable subject, pushing new items in with next() and subscribing to those next events with a subscriber (which I have no idea what type it is, so I just left it untyped as I could not get the compiler to accept anything I put in).

my questions are:

1) Is my above understanding of observable & observer/subscriber correct?

2) can I create a standard array, make it observable and listen to 'added' or 'modified' events?

3) what is the type of the subscriber that I mention above?

this.mouseLocationSubscriber = this.mLocs$.subscribe(
        X => this.handleNext(X),
        err => this.handleSubscriberError(err),
        () => console.log('subscriber recd complete')
);

Please:

• if this post is in the wrong place, help me put it in the right spot

• if this post is incorrectly formatted, help me understand how to format it for the best possibility of finding an answer

• if this post is a dupe of some similar lost code theorist, help me find that response

• if there is any thing else I should be mobbed for, I have prepared you a pitchfork: ----E

Answer 1

1) Is my above understanding of observable & observer/subscriber correct?

You are on the right track, there's nothing that I could consider a mistake on that definition. Maybe what I would just change is that I would merge observer/subscribers into one entity, because they are quite the same.

Also, keep in mind that Observables take a functional-style programming approach: When you create a stream, nothing gets executed until an observer calls .subscribe() on it.

Another thing that people often get confused on is the use of onError. When a stream yields onError it means that an unrecoverable crash has happened: The stream gets closed and onNext won't be called again. When people wants to get some kind of soft-errors what they do is tweak the Observable type to include that, such as isSuccesfull:boolean or errors:Error[]

2) can I create a standard array, make it observable and listen to 'added' or 'modified' events?

No... Observables can't do magic. From Rx.Observable you get some helper methods to transform arrays into Observable sequences, but they are not observable arrays. Think of it that you can make an observable of anything that you can do with Rx.Observable.create, for instance, a possible implementation of Rx.Observable.fromArray could be:

function observableFromArray(array){
    return Rx.Observable.create((observer) => {
        array.forEach((elm) => {
            observer.onNext(elm);
        });
        observer.onCompleted();
    });
}

But as you can see, when an item is pushed on the array, there's no way to notify the observer.

Something that could be used to do something as such are Proxies, which allow you to intercept operations done in a object/array... That's a bit edgy, so don't expert too much support in IE.

I think your best bet is to go through Subjects, as you said. You could create your custom "ObservableArray" (or try googling that, maybe someone already did) where observers can subscribe to it, and producers can push/delete values.

3) what is the type of the subscriber that I mention above?

Types are always kept. If you have a Observable<MouseEvent>, the observer will be of type Observer<MouseEvent>. Think of it as an observable that emits MouseEvents, and an observer that accepts MouseEvents.