RxJs:zip运算符的有损形式

时间:2017-10-06 09:25:19

标签: javascript rxjs reactive-programming rxjs5 backpressure

考虑使用zip运算符将两个无限的Observable压缩在一起。其中一个Observable发出的项目频率是另一个的两倍。
当前的实现是无损耗的,即如果我让这些Observables发射一小时然后我在它们的发射率之间切换,第一个Observable将最终赶上另一个。 随着缓冲区越来越大,这会在某些时候引起内存爆炸 如果第一个observable将发出几个小时的项目而第二个将在最后发出一个项目,则会发生同样的情况。

如何为此运营商实现有损行为?我只是想随时从两个流中获得排放,我不会关心我错过的更快流量的排放量。

澄清:

  • 由于zip运算符的无损性质,我试图解决的主要问题是内存爆炸。
  • 我想在任何时候从两个流中获得排放,即使两个流每次都发出相同的值

示例:

Stream1: 1 2    3 4    5 6 7                
Stream2:     10     20       30 40 50 60 70

常规zip将产生以下输出:

[1, 10]
[2, 20]
[3, 30]
[4, 40]
[5, 50]
[6, 60]
[7, 70]



const Observable = Rx.Observable;
const Subject = Rx.Subject;


const s1 = new Subject();
const s2 = new Subject();

Observable.zip(s1,s2).subscribe(console.log);

s1.next(1); s1.next(2); s2.next(10); s1.next(3); s1.next(4); s2.next(20); s1.next(5); s1.next(6); s1.next(7); s2.next(30); 
 
s2.next(40); s2.next(50); s2.next(60); s2.next(70); 

<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
&#13;
&#13;
&#13;

输出我喜欢它产生:

[1, 10]
[3, 20]
[5, 30]

说明:
有损zip运算符为zip,缓冲区大小为1。这意味着它只会保留首先发出的流中的第一个项目,并将丢弃所有其余项目(第一个项目和第二个流中的第一个项目之间到达的项目)。因此,示例中发生的情况如下:stream1发出1,有损zip&#34;记住&#34;它会忽略stream1上的所有项目,直到stream2发出。 stream2的第一次发射为10,因此stream1失去2。在相互发射(第一次发射有损zip)之后,它开始了:&#34;记住&#34; 3,&#34;松散&#34; 4,发出[3,20]。然后重新开始:&#34;记住&#34; 5,&#34;松散&#34; 67,发出[5,30]。然后重新开始:&#34;记住&#34; 40,&#34;松散&#34; 506070并等待stream1上的下一个项目。

示例2:

Stream1: 1 2 3 ... 100000000000
Stream2:                        a

在这种情况下,常规zip运算符会爆炸内存 我不想要它。

要点:
基本上我希望有损zip运算符仅记住stream 1 在之前的相互发射之后发出的第一个值,并在stream 2赶上{{1}时发出}。并重复一遍。

5 个答案:

答案 0 :(得分:6)

以下内容将为您提供所需的行为:

Observable.zip(s1.take(1), s2.take(1)).repeat()

RxJs 5.5管道语法中:

zip(s1.pipe(take(1)), s2.pipe(take(1))).pipe(repeat());

const s1 = new Rx.Subject();
const s2 = new Rx.Subject();

Rx.Observable.zip(s1.take(1), s2.take(1)).repeat()
    .subscribe(console.log);

s1.next(1); s1.next(2); s2.next(10); s1.next(3); s1.next(4); s2.next(20); s1.next(5); s1.next(6); s1.next(7); s2.next(30);  
s2.next(40); s2.next(50); s2.next(60); s2.next(70); 
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

<强>解释

  • repeat运算符(在其当前实现中)在后者完成时重新订阅源可观察量,即在此特定情况下,它在每次相互发射时重新订阅zip
  • zip结合了两个observable并等待它们两个发出。 combineLatest也会这样做,因为take(1)
  • 而无关紧要
  • take(1)实际上会处理内存爆炸并定义有损行为

如果你想在相互发射时从每个流中获取最后一个而不是第一个值,请使用:

Observable.combineLatest(s1, s2).take(1).repeat()

RxJs 5.5管道语法中:

combineLatest(s1.pipe(take(1)), s2.pipe(take(1))).pipe(repeat());

const s1 = new Rx.Subject();
const s2 = new Rx.Subject();

Rx.Observable.combineLatest(s1,s2).take(1).repeat()
    .subscribe(console.log);

s1.next(1); s1.next(2); s2.next(10); s1.next(3); s1.next(4); s2.next(20); s1.next(5); s1.next(6); s1.next(7); s2.next(30);  
s2.next(40); s2.next(50); s2.next(60); s2.next(70); 
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

答案 1 :(得分:1)

我认为以下内容应始终采用每个来源Observable的最后一个值。

const source1 = Observable.interval(1000).publish();
const source2 = Observable.interval(300).publish();

source1.connect();
source2.connect();

Observable.defer(() => Observable.forkJoin(
        source1.takeUntil(source2.skipUntil(source1)),
        source2.takeUntil(source1.skipUntil(source2))
    ))
    .take(1)
    .repeat()
    .subscribe(console.log);

现场演示:http://jsbin.com/vawewew/11/edit?js,console

打印:

[ 0, 2 ]
[ 1, 5 ]
[ 2, 8 ]
[ 3, 12 ]
[ 4, 15 ]
[ 5, 18 ]

您可能需要将source1source2转换为热门的Observable(如果尚未加入)。

编辑:

核心部分是source1.takeUntil(source2.skipUntil(source1))。这会从source1开始,直到source2发出。但与此同时,它会忽略source1,直到source2发出至少一个值:)。

forkJoin() Observable作品等到两个来源完成,同时记住每个来源的最后一次发射。

然后我们想重复这个过程,因此我们使用take(1)来完成链,并.repeat()立即重新订阅。

答案 2 :(得分:1)

这给出了序列[0,2] [1,5] [2,8] [3,12] ......

const interval1 = Rx.Observable.interval(1000)
const interval2 = Rx.Observable.interval(300)

const combined = Rx.Observable.combineLatest(interval1, interval2);
const fresh = combined.scan((acc, x) => { 
    return x[0] === acc[0] || x[1] === acc[1] ? acc : x 
  })
  .distinctUntilChanged() //fresh ones only

fresh.subscribe(console.log);

可以说运营商更少。不知道它有多高效。
CodePen

更新#3

然后你需要为每个源项目提供一个密钥。

// Simulated sources according to latest spec provided (update #3)
const source1 = Rx.Observable.from(['x','y','z'])
const source2 = Rx.Observable.from(['a','a','b','b','c'])

// Create keys for sources
let key1 = 0
let key2 = 0
const keyed1 = source1.map(x => [x, key1++])
const keyed2 = source2.map(x => [x, key2++])

const combined = Rx.Observable
  .combineLatest(keyed1, keyed2)
  .map(([keyed1, keyed2]) => [...keyed1, ...keyed2]) // to simplify scan below
combined.subscribe(console.log) // not the output, for illustration only
console.log('-------------------------------------')

const fresh = combined.scan((acc, x) => { 
    return x[1] === acc[1] || x[3] === acc[3] ? acc : x 
  })
  .distinctUntilChanged() //fresh ones only

const dekeyed = fresh
  .map(keyed => { return [keyed[0], keyed[2]] })
dekeyed.subscribe(console.log); // required output

这会产生

["x", "a"]  
["y", "a"]  
["z", "b"]  

CodePen(打开控制台后刷新CodePen页面,以便更好地显示)

答案 3 :(得分:0)

你提到缓冲区大小为1,想知道是否压缩两个缓冲区大小为1的ReplaySubjects会这样做吗?

答案 4 :(得分:0)

我为了清晰起见添加了另一个答案,因为它是在接受的答案之后(但建立在我以前的答案的基础上)。

如果我误解了,请原谅我,但我期待解决方案能够处理转换排放率:

  

然后我在他们的发射率之间切换,

提供的测试不会切换排放率,直到第一个流停止后

Stream1: 1 2    3 4    5 6 7                 
Stream2:     10     20    30 40 50 60 70

所以我尝试了另一项测试

Stream1: 1 2      3 4     5 6
Stream2:    10 20    30 40   50 60

此流的测试数据为

s1.next(1); s1.next(2); s2.next(10); s2.next(20); s1.next(3); s1.next(4);
s2.next(30); s2.next(40); s1.next(5); s1.next(6);  s2.next(50); s2.next(60);

根据我的理解,接受的答案未通过此测试 它输出

[1, 10]
[3, 20]
[4, 30]
[5, 40]
[6, 50]

而我希望看到

[1, 10]
[3, 30]
[5, 50]

如果操作员要对称(可交换?)

加强我之前的回答

此解决方案由基本运算符构建,因此可以说更容易理解。我无法说出它的效率,也许会在另一次迭代中测试它​​。

const s1 = new Rx.Subject();
const s2 = new Rx.Subject();

const tagged1 = s1.map(x=>[x,1])
const tagged2 = s2.map(x=>[x,2])
const merged = tagged1.merge(tagged2)
const fresh = merged.scan((acc, x) => { 
    return x[1] === acc[1] ? acc : x 
  })
  .distinctUntilChanged() //fresh ones only
const dekeyed = fresh.map(keyed => keyed[0])
const paired = dekeyed.pairwise()
let index = 0
const sequenced = paired.map(x=>[x,index++])
const alternates = sequenced.filter(x => x[1] % 2 === 0)
const deindexed = alternates.map(x=>x[0])

或以更紧凑的形式(如果愿意)

let index = 0
const output = 
  s1.map(x=>[x,1]).merge(s2.map(x=>[x,2])) // key by stream id
  .scan((acc, x) => { 
    return x[1] === acc[1] ? acc : x 
  })
  .distinctUntilChanged()       //fresh ones only
  .map(keyed => keyed[0])       // de-key
  .pairwise()                   // pair
  .map(x=>[x,index++])          // add a sequence no
  .filter(x => x[1] % 2 === 0)  // take even sequence
  .map(x=>x[0])                 // deindex

进行测试,CodePen(打开控制台后刷新CodePen页面,以便更好地显示)