zoukankan      html  css  js  c++  java
  • [RxJS] Connection operator: multicast and connect

    We have seen how Subjects are useful for sharing an execution of an RxJS observable to multiple observers. However, this technique requires some laborious setting up. In this lesson we will learn about the multicast() operator which helps solve the same problem with less code, and with a neater API.

    Let's go back and remember why did we need subjects in the first place? Originally, we had one typical observable, but we wanted two observers A and B, to see the same execution of that observable.

    Does that mean that every time that we want to have multiple observers we need to set up a subject, and subscribe to the observables, subscribe to the subjects?

    This system is not so ergonomic to set up. That's why there exists an operator or a method that simplifies all of this for us. That would be multicastmulticastis an operator on a normal observable. It takes here an argument, which is a subject.

    // var source = Rx.Observable
    //                .interval(100)
    //                .take(5);
    // var subject = new Rx.Subject();
    // source.subscribe(subject);
    var connectableObservable = Rx.Observable
                  .interval(100)
                  .take(5)
                  .multicast(new Rx.Subject());
    connectableObservable.connect();
    
    var observerA = {
      next: function (x) { console.log('A next ' + x); },
      error: function (err) { console.log('A error ' + err); },
      complete: function () { console.log('A done'); },
    };
    
    connectableObservable.subscribe(observerA);
    console.log('observerA subscribed');
    
    var observerB = {
      next: function (x) { console.log('B next ' + x); },
      error: function (err) { console.log('B error ' + err); },
      complete: function () { console.log('B done'); },
    };
    
    setTimeout(function () {
      connectableObservable.subscribe(observerB);
      console.log('observerB subscribed');
    }, 300);

    Now when we connect this observable, this connectableObservable, it will use a ReplaySubject to subscribe to this observable. That means that when the late observer arrives here, it will see the last values replayed to it. If we run this B arrives late, but B sees the latest values, zero and one, for instance.

    // var source = Rx.Observable
    //                .interval(100)
    //                .take(5);
    // var subject = new Rx.Subject();
    // source.subscribe(subject);
    var connectableObservable = Rx.Observable
                  .interval(100)
                  .take(5)
                  .multicast(new Rx.ReplaySubject(100));
    connectableObservable.connect();
    
    var observerA = {
      next: function (x) { console.log('A next ' + x); },
      error: function (err) { console.log('A error ' + err); },
      complete: function () { console.log('A done'); },
    };
    
    connectableObservable.subscribe(observerA);
    console.log('observerA subscribed');
    
    var observerB = {
      next: function (x) { console.log('B next ' + x); },
      error: function (err) { console.log('B error ' + err); },
      complete: function () { console.log('B done'); },
    };
    
    setTimeout(function () {
      console.log('observerB subscribed');
      connectableObservable.subscribe(observerB);
    }, 300);
    /*"observerA subscribed"
    "A next 0"
    "A next 1"
    "A next 2"
    "observerB subscribed"
    "B next 0"
    "B next 1"
    "B next 2"
    "A next 3"
    "B next 3"
    "A next 4"
    "B next 4"
    "A done"
    "B done"*/
  • 相关阅读:
    各种各样的Hashes
    爬取时出现报错 encoding error : input conversion failed due to input error, bytes 0xAC 0x4E 0x00 0x00
    Youtube.com中Uncaught TypeError: copy is not a function,如何解决
    生成“2021-Aug-27th”这样的1st,2nd,3rd, 4th 日期格式
    How to clear the content of the recycle bin in PowerShell?
    Delphi开发的服务在Windows2003 64位注册方式
    VS2015打开时,一直处理等待状态,并显示“Microsoft Visual Studio正忙”的提示窗,如下图
    Oracle操作类
    ie浏览器与其他浏览器兼容性问题解决
    echarts实时曲线【转】
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5978935.html
Copyright © 2011-2022 走看看