如何实现RxJS flatMapLatestTwo

Question

RxJS's flatMapLatest flattens the latest (only one) nested Observable. I have a use case where I don't want flatMap (that flattens all nested Observables from the past), and I don't want flatMapWithConcurrency (because it favors old Observables, not latest Observables), so what I want is a flatMapLatestTwo or some version of flatMapLatest where you can specify the maximum number of concurrent nested Observables, eg flatMapLatest(2, selectorFn) .

Here is my desired output ( _X refers to nested Observable X and eX refers to its X-th onNext event):

_0e0
_0e1
 _1e0
_0e2
 _1e1
  _2e0
 _1e2
  _2e1
   _3e0
  _2e2
   _3e1
    _4e0
   _3e2
    _4e1
   _3e3
    _4e2
    _4e3

This is what flatMapLatest produces:

_0e0
_0e1
 _1e0
 _1e1
  _2e0
  _2e1
   _3e0
   _3e1
    _4e0
    _4e1
    _4e2
    _4e3

I'd prefer a solution which uses existing operators instead of implementing this low-level.

Answer 1

This looks naive. I'm looking for ways to improve, but here it is:

Rx.Observable.prototype.flatMapLatestN = function (count, transform) {

  let queue = [];

  return this.flatMap(x => {
    return Rx.Observable.create(observer => {

      let disposable;

      if (queue.length < count) {
        disposable = transform(x).subscribe(observer);
        queue.push(observer);
      }
      else {
        let earliestObserver = queue[0];
        if (earliestObserver) {
          earliestObserver.onCompleted();
        }

        disposable = transform(x).subscribe(observer);
        queue.push(observer);
      }

      return () => {
        disposable.dispose();
        let i = queue.indexOf(observer);
        queue.splice(i, 1);
      };
    });
  });
};

To test out:

function space(n) {
  return Array(n+1).join(' ');
}

Rx.Observable
  .interval(1000)
  .take(6)
  .flatMapLatestN(2, (x) => {
    return Rx.Observable
      .interval(300)
      .take(10)
      .map(n => `${space(x*4)}${x}-${n}`);
  })
  .subscribe(console.log.bind(console));

It will output:

0-1
0-2
0-3
    1-0
0-4
    1-1
0-5
    1-2
    1-3
        2-0
    1-4
        2-1
    1-5
        2-2
        2-3
            3-0
        2-4
            3-1
        2-5
            3-2
            3-3
                4-0
            3-4
                4-1
            3-5
                4-2
                4-3
                    5-0
                4-4
                    5-1
                4-5
                    5-2
                4-6
                    5-3
                4-7
                    5-4
                4-8
                    5-5
                4-9
                    5-6
                    5-7
                    5-8
                    5-9

Answer 2

Here's a solution that uses the built in operators. First we split the Observable into N observables where each observable has the corresponding Nth latest item in the sequence. Then we flatMapLatest each of these and merge them.

Rx.Observable.prototype.flatMapLatestN = function(N, selector, thisArg) {
    var self = this;
    return Rx.Observable.merge(Rx.Observable.range(0, N).flatMap(function(n) {
        return self.filter(function(x, i) {
            return i % N === n;
        }).flatMapLatest(selector, thisArg);
    }));
}

Or in ES2015:

Rx.Observable.prototype.flatMapLatestN = function(N, selector, thisArg) {
    const {merge, range} = Rx.Observable;
    return merge(
        range(0, N)
            .flatMap(n => 
                this.filter((x, i) => i % N === n).flatMapLatest(selector, thisArg))
    );
}

Using the same test as Daiwei:

Output for N=1 (same as flatMapLatest ):

0-0
0-1
0-2
    1-0
    1-1
    1-2
        2-0
        2-1
        2-2
            3-0
            3-1
            3-2
                4-0
                4-1
                4-2
                    5-0
                    5-1
                    5-2
                    5-3
                    5-4
                    5-5
                    5-6
                    5-7
                    5-8
                    5-9

Output for N=2 :

0-0
0-1
0-2
0-3
    1-0
0-4
    1-1
0-5
    1-2
    1-3
        2-0
    1-4
        2-1
    1-5
        2-2
        2-3
            3-0
        2-4
            3-1
        2-5
            3-2
            3-3
                4-0
            3-4
                4-1
            3-5
                4-2
                4-3
                    5-0
                4-4
                    5-1
                4-5
                    5-2
                4-6
                    5-3
                4-7
                    5-4
                4-8
                    5-5
                4-9
                    5-6
                    5-7
                    5-8
                    5-9

Output for N=3 :

0-0
0-1
0-2
0-3
    1-0
0-4
    1-1
0-5
    1-2
0-6
    1-3
        2-0
0-7
    1-4
        2-1
0-8
    1-5
        2-2
    1-6
        2-3
            3-0
    1-7
        2-4
            3-1
    1-8
        2-5
            3-2
        2-6
            3-3
                4-0
        2-7
            3-4
                4-1
        2-8
            3-5
                4-2
            3-6
                4-3
                    5-0
            3-7
                4-4
                    5-1
            3-8
                4-5
                    5-2
            3-9
                4-6
                    5-3
                4-7
                    5-4
                4-8
                    5-5
                4-9
                    5-6
                    5-7
                    5-8
                    5-9

Answer 3

My answer is in C#. Sorry.

You didnt specify if your observables were hot or cold. It could be that your weird numbers came from the fact that your windowing made a new subscription to your 'inner' observable as it was pushed down from 1st in the window to 2nd. My first attempt did the same:

var q = Observable.Interval(TimeSpan.FromSeconds(1))
        .Select(i => Observable.Interval(TimeSpan.FromMilliseconds(100))
        .Select(x => $"_{i}e{x}"));

w = q.Zip(q.Skip(1), (prev, curr)=> prev.Merge(curr)).Switch(); 

I think you will struggle to do anything to avoid this that isnt dog shit ugly unless you create an operator as there is state involved in managing this. (Obviously someone will prove me wrong here!!)

Here was my operator approach which also happens to support the parameterization you asked for.

public static class Ex
{
    public static IObservable<T> SelectManyLatest<T>(this IObservable<IObservable<T>> source, int latest)
    {
        return Observable.Create<T>(o => 
        {
            var d = new Queue<IDisposable>();

            source.Subscribe(os => 
            {
                if(d.Count == latest)
                    d.Dequeue().Dispose();

                d.Enqueue(os.Subscribe(o.OnNext, o.OnError, () => {}));

            }, o.OnError, o.OnCompleted);

            return Disposable.Create(()=>new CompositeDisposable(d).Dispose());
        });     
    }
}

Again, sorry for the C#