rxjs 多播

最新推荐文章于 2023-02-07 09:49:51 发布
最新推荐文章于 2023-02-07 09:49:51 发布
阅读量494 收藏
点赞数 1
分类专栏： rxjs 文章标签： rxjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sllailcp/article/details/88654425
版权 
/*多播
* 前面的例子都是只有一个订阅者的情况，实际上当然可以有多个订阅者，这就是多播(multicast)，即一个数据流的内容被多个 Observable 订阅。
*
* Hot Observable 和 Cold Observable
* */
// 每次订阅都重新生产一份数据流
const source$ = interval(1000).pipe(
  take(3)
)

source$.subscribe(x => console.log('Observer 1: ' + x))

setTimeout(() => {
  source$.subscribe(x => console.log('Observer 2: ' + x))
}, 1000)

/*
Subject
为了防止每次订阅都重新生产一份数据流，我们可以使用中间人，让这个中间人去订阅源数据流，观察者都去订阅这个中间人。这个中间人能去订阅数据流，所以是个 Observer，又能被观察者订阅，所以也是 Observable。我们可以自己实现一个这样的中间人：
 */
const subject = {
  observers: [],
  subscribe: function (observer) {
    this.observers.push(observer)
  },
  next: function (value) {
    this.observers.forEach(o => o.next(value))
  },
  error: function (error) {
    this.observers.forEach(o => o.error(error))
  },
  complete: function () {
    this.observers.forEach(o => o.complete())
  }
}
// //v这个 subject 拥有 Observer 的 next、error、complete 方法，每次被观察者订阅时都会在内部保存这个观察者。当接收到源数据流的数据时，会把数据发送给每一个观察者。
const source$ = interval(1000).pipe(
  map(x => Math.floor(Math.random() * 10)),
  take(3)
)

const observerA = {
  next: x => console.log('Observer A: ' + x),
  error: null,
  complete: () => console.log('Observer A completed')
}
const observerB = {
  next: x => console.log('Observer B: ' + x),
  error: null,
  complete: () => console.log('Observer B completed')
}

source$.subscribe(subject)
subject.subscribe(observerA)
setTimeout(() => {
  subject.subscribe(observerB)
}, 1000)

//这时我们发现两个观察者接收到的是同一份数据，ObserverB 由于延迟一秒订阅，所以少接收到一个数据。将我们自己实现的 subject 换成 RxJS 中的 Subject，效果相同：
const subject = new Subject()
subject.subscribe(x => console.log('Observer A: ' + x))
setTimeout(() => {
  subject.subscribe( x => console.log('Observer B: ' + x))
}, 500)


subject.next(1)
setTimeout(() => {
  subject.next(2)
}, 1000)
// 总结一下，Subject 既是 Observable 又是 Observer，它会对内部的 observers 清单进行组播(multicast)。
// Subject 的错误处理
// 在 RxJS 5 中，如果 Subject 的某个下游数据流产生了错误异常，而又没有被 Observer 处理，那这个 Subject 的其他 Observer 都会失败。但是在 RxJS 6 中不会如此。
//
// 在 v6 的这个例子 中，ObserverA 没有对错误进行处理，但是并不影响 ObserverB，而在 v5 这个demo中因为 ObserverA 没有对错误进行处理，使得 ObserverB 终止了。很明显 v6 的这种处理更符合直觉。


/*
BehaviorSubject:BehaviorSubject 需要在实例化时给定一个初始值，如果没有默认是 undefined，每次订阅时都会发出最新的状态，即使已经错过数据的发送时间。
 */
const observerA = {
  next: x => console.log('Observer A: ' + x)
}
const observerB = {
  next: x => console.log('Observer B: ' + x)
}

const subject = new BehaviorSubject(0)

subject.subscribe(observerA) // Observer A: 0

subject.next(1) // Observer A: 1
subject.next(2) // Observer A: 2
subject.next(3) // Observer A: 3

setTimeout(() => {
  subject.subscribe(observerB) // Observer B: 3
}, 500)


/*
ReplaySubject 表示重放，在新的观察者订阅时重新发送原来的数据，可以通过参数指定重放最后几个数据。
 */
const observerA = {
  next: x => console.log('Observer A: ' + x)
}
const observerB = {
  next: x => console.log('Observer B: ' + x)
}

const subject = new ReplaySubject(2) // 重放最后两个

subject.subscribe(observerA)

subject.next(1) // Observer A: 1
subject.next(2) // Observer A: 2
subject.next(3) // Observer A: 3
subject.complete()

setTimeout(() => {
  subject.subscribe(observerB)
  // Observer B: 2
  // Observer B: 3
}, 500)

// 这里我们可以看到，即使 subject 完结后再去订阅依然可以重放最后两个数据。
// ReplaySubject(1) 和前面的 BehaviorSubject 是不一样的，首先后者可以提供默认数据，而前者不行，其次前者在 subject 终结后再去订阅依然可以得到最近发出的数据而后者不行。



/*
AsyncSubject 有点类似 operator last，会在 subject 完结后送出最后一个值。
 */
const observerA = {
  next: x => console.log('Observer A: ' + x)
}
const observerB = {
  next: x => console.log('Observer B: ' + x)
}
const subject = new AsyncSubject()

subject.next(1)
subject.next(2)
subject.next(3)
subject.complete()

subject.subscribe(observerA)
// Observer A: 3
setTimeout(() => {
  subject.subscribe(observerB)
  // Observer B: 3
}, 500)
// observerA 即使早就订阅了，但是并不会响应前面的 next，完结后才接收到最后一个值 3。


/*
前面我们写的 Subject 需要去订阅源数据流和被观察者订阅，写起来比较繁琐，我们可以借助操作符来实现
 */
/*
multicast:使用方式如下，接收一个 subject 或者 subject factory。这个操作符返回了一个 connectable 的 Observable。等到执行 connect() 才会用真的 subject 订阅 source，并开始发送数据，如果没有 connect，Observable 是不会执行的
 */
const source = interval(1000).pipe(
  map(x => Math.floor(Math.random() * 10)),
  take(3),
  multicast(new Subject)
)

const observerA = {
  next: x => console.log('Observer A: ' + x),
  error: null,
  complete: () => console.log('Observer A completed')
}
const observerB = {
  next: x => console.log('Observer B: ' + x),
  error: null,
  complete: () => console.log('Observer B completed')
}

source.subscribe(observerA) // subject.subscribe(observerA)

source.connect() // source.subscribe(subject)

setTimeout(() => {
  source.subscribe(observerB) // subject.subscribe(observerB)
}, 1000)


/*
refCount
上面使用了 multicast，但是还是有些麻烦，还需要去手动 connect。这时我们可以再搭配 refCount 操作符创建只要有订阅就会自动 connect 的 Observable。只需要去掉 connect 方法调用，在 multicast 后面再加一个 refCount 操作符。
 */

// multicast(new Subject),
//   refCount()
//refCount 其实就是自动计数的意思，当 Observer 数量大于 1 时，subject 订阅上游数据流，减少为 0 时退订上游数据流。

// multicast selector 参数

// multicast 第一个参数除了是一个 subject，还可以是一个 subject factory，即返回 subject 的函数。这时使用了不同的中间人，每个观察者订阅时都重新生产数据，适用于退订了上游之后再次订阅的场景。
//
// multicast 还可以接收可选的第二个参数，称为 selector 参数。它可以使用上游数据流任意多次，而不会重复订阅上游的数据。当使用了这个参数时，multicast 不会返回 connectable Observable，而是这个参数（回调函数）返回的 Observable。selecetor 回调函数有一个参数，通常叫做 shared，即 multicast 第一个参数所代表的 subject 对象

const selector = shared => {
  return shared.pipe(concat(of('done')))
}
const source = interval(1000).pipe(
  take(3),
  multicast(new Subject, selector)
)

const observerA = {
  next: x => console.log('Observer A: ' + x),
  error: null,
  complete: () => console.log('Observer A completed')
}
const observerB = {
  next: x => console.log('Observer B: ' + x),
  error: null,
  complete: () => console.log('Observer B completed')
}

source.subscribe(observerA)
setTimeout(() => {
  source.subscribe(observerB)
}, 5000)
// observerB 订阅时会调用 selector 函数，subject 即shared 已经完结，但是 concat 依然会在这个 Observable 后面加上 'done'。


/*
可以利用 selector 处理 “三角关系”的数据流，如有一个 tick$ 数据流，对其进行 delay(500) 操作后的下游 delayTick$， 一个由它们合并得到的 mergeTick$，这时就形成了三角关系。delayTick$ 和 mergeTick$ 都订阅了 tick$。
 */
const tick$ = interval(1000).pipe(
  take(1),
  tap(x => console.log('source: ' + x))
)

const delayTick$ = tick$.pipe(
  delay(500)
)

const mergeTick$ = merge(tick$, delayTick$).subscribe(x => console.log('observer: ' + x))
// source: 0
// observer: 0
// source: 0
// observer: 0
// 从上面的结果我们可以验证，tick$ 被订阅了两次。


// 我们可以使用 selector 函数来使其只订阅一次，将上面的过程移到 selector 函数内即可。
const source$ = interval(1000).pipe(
  take(1),
  tap(x => console.log('source: ' + x))
)

const result$ = source$.pipe(
  multicast(new Subject(), shared => {
    const tick$ = shared
    const delayTick$ = tick$.pipe(delay(500))
    const mergeTick$ = merge(tick$, delayTick$)
    return mergeTick$
  })
)

result$.subscribe(x => console.log('observer: ' + x))
//这时只会输出一次 'source: 0'。

/*publish 是 multicast 的一种简写方式，效果等同于如下：*/
function publish (selector) {
  if (selector) {
    return multicast(() => new Subject(), selector)
  } else {
    return multicast(new Subject())
  }
}

/*
share 是 multicast 和 refCount 的简写，share() 等同于在 pipe 中先调用了 multicast(() => new Subject())，再调用了 refCount()。
 */
const source = interval(1000).pipe(
  take(3),
  share()
)

const observerA = {
  next: x => console.log('Observer A: ' + x),
  error: null,
  complete: () => console.log('Observer A completed')
}
const observerB = {
  next: x => console.log('Observer B: ' + x),
  error: null,
  complete: () => console.log('Observer B completed')
}

source.subscribe(observerA)
setTimeout(() => {
  source.subscribe(observerB)
}, 5000)
// 由于 share 是调用了 subject 工厂函数，而不是一个 subject 对象，因此 observerB 订阅时可以重新获取数据。

/*同前面的 publish，只不过使用的不是普通 Subject，而是对应的 AsyncSubject、BehaviorSubject、ReplaySubject。*/

 

榴莲不好吃
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
12. RxJS - 多播运算符
我的博客，不一样的自我表达
06-02 72
这些选项可以使用一个简单的布尔值来启用或禁用行为，或者我们可以传递一个通知器工厂，该工厂返回一个可观察到的对象，该对象允许对重置的方式和时间进行更细粒度的控制。这意味着第一个订阅启动了 observable，所有订阅这个 observable 的下一个订阅不会运行一个新的 observable 实例，但它们接收到与第一个订阅相同的值，因此丢失了它们订阅之前发出的所有先前值。在某些情况下，当我们在多个观察者之间共享值时，如果观察者订阅了一个已经启动的可观察对象，我们还需要重放所有先前已经发出的值。
深入浅出 RxJS(全本)
12-31
第10章介绍RxJS如何实现多播的方式。第11章介绍实现调度Scheduler的作用、原理与使用。第12章介绍如何调试和测试RxJS相关代码，写出高可测试性代码。第13章介绍如何在React应用中使用RxJS，提高代码质量。第14章介绍...
简简单单的理解 RxJS 中的多播操作符（Multicasting Operators）
最新发布
发果叁
02-07 240
对于 RxJS，多播可能是一个比较高级的概念。这篇文章会通过一个例子，逐步的介绍多播以及多播的操作符。💡publish相当于💡相当于💡相当于💡相当于💡 有了refCount，我们不再需要手动调用，connect()也不再需要处理退订。💡share等同于refCount()。💡等同于refCount()。这就是 RxJS 中的全部内容啦，希望对你有帮助～ 😃转载需注明作者及来源喔～
rxjs 多播操作符
yanyi24的博客
03-29 515
这一节介绍RxJs多播操作符 单播和多播 单播：之前我们看到的所有 Observable都是单播的，即源头有值发出时，不管这个 Observable被几个 Observer订阅，我一次只会给一个 Observer推送。 多播：当源头有值发出时，这个值会同一时间发给所有的 Observer。 简单来说，单播与多播的区别类似于，concat和 merge的区别。 单播： import { range } from 'rxjs'; const source$ = range(5); // 先输出A: 0...
Rxjs--多播操作符
weixin_34174422的博客
01-14 252
2019独角兽企业重金招聘Python工程师标准>>> ...
RxJS Subject 主题 EventEmitter对象 组播Multicast
小辣抓
07-29 3429
Subject主题什么是Subject？Subject是允许值被多播到多个观察者的一种特殊的Observable。然而纯粹的可观察对象是单播的(每一个订阅的观察者拥有单独的可观察对象的执行)。Subject就是一个可观察对象，只不过可以被多播至多个观察者。同时Subject也类似于EventEmitter:维护者着众多事件监听器的注册表。每一个Subject都是一个observable可观察对象，给
深入浅出Rxjs
10-07
收，包括Subject的使⽤⽅法和RxJS对各种多播场景的⽀持。 第11章　掌握时间的Scheduler。这⼀章介绍RxJS中Scheduler的概念。 第12章　RxJS的调试和测试。介绍RxJS应⽤的调试和单元测试⽅法， 深⼊介绍如何利⽤RxJS写...
RxJS响应式编程
02-08
5. **Subject**：既是Observable又是Observer，能够多播数据到多个Observer。 6. **Scheduling**：调度器用于控制何时何地执行Observable的订阅，有助于解决并发和线程问题。 RxJS中的关键特性： - ** Marble ...
一步一步地学习RxJS
08-09
4. 管道（Pipeable Operators）：从RxJS 6开始，操作符被设计为可管道化的，这意味着你可以将多个操作符链接在一起，形成一个处理流水线。这使得代码更易读，也更利于维护。 5. 错误处理：RxJS提供了错误处理机制，...
[译] RxJS: 理解 publish 和 share 操作符
weixin_34362875的博客
01-23 1246
原文链接: blog.angularindepth.com/rxjs-unders… 本文为 RxJS 中文社区 翻译文章，如需转载，请注明出处，谢谢合作！ 如果你也想和我们一起，翻译更多优质的 RxJS 文章以奉献给大家，请点击【这里】 照片取自 Unsplash，作者 Kimberly Farmer 。 我经常会被问及 publish 操作符的相关问题: publish 和 share ...
RxJS 核心概念之Subject
weixin_33968104的博客
05-06 157
什么是Subject？ 在RxJS中，Subject是一类特殊的Observable，它可以向多个Observer多路推送数值。普通的Observable并不具备多路推送的能力（每一个Observer都有自己独立的执行环境），而Subject可以共享一个执行环境。 Subject是一种可以多路推送的可观察对象。与EventEmitter类...
[译] RxJS: multicast 操作符的秘密
weixin_33691700的博客
02-01 180
原文链接: blog.angularindepth.com/rxjs-multic… 本文为 RxJS 中文社区 翻译文章，如需转载，请注明出处，谢谢合作！ 如果你也想和我们一起，翻译更多优质的 RxJS 文章以奉献给大家，请点击【这里】 multicast 操作符有一个秘密。publish 操作符也是如此，它封装了 multicast 。这个秘密有时候真的挺好用的。 秘密 multicast...
RxJS中文手册
材女的进击
04-10 1万+
入门 RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件作为集合来处理。 可以把 RxJS 当做是用...
Rxjs Observable
weixin_43718291的博客
05-14 644
创建Observable： Rx.Observable.create 是 Observable 构造函数的别名，它接收一个参数：subscribe 函数。 例子：每秒推送一个“Hi” Rx.Observable.create(function subscribe(observer){ var i=setInterval((observer)=>{ observer.next("Hi") },1000); }); 在上面的示例中，subscribe 函数是用来描述 Observable 最重要的一块。
RxJS笔记
好女绪的博客
10-28 510
RxJS笔记 参考资料： RxJS文档 RxJS 快速入门 RxJS v6 学习指南 Rxjs知识整理 RxJS的入门指引和初步应用 Rxjs6学习 概述 简介 RxJS 是用于 JavaScript 的 ReactiveX 库。ReactiveX是一种针对异步数据流的编程。简单来说，它将一切数据，包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅的实现你所需要的功能。 ReactiveX 结合了
[RxJS] Multicast with a selector argument, as a sandbox
weixin_34405925的博客
10-26 63
Let's explore a different use of the multicast() operator in RxJS, where you can provide a selector function as a sandbox where the shared Observable is available.   When we have code like below: ...
RxJs简介
xiangzhihong8的专栏
01-25 1万+
这两年，各种异步编程框架，上面RxJava,RxAndroid,RxSwift等等，今天要聊的是RxJs，对于我等入门不久的前端工程师来说，这个框架还是比较有新颖的，中文官网地址：http://cn.rx.js.org/ RxJs简介 RxJS是一个异步编程的库，同时它通过observable序列来实现基于事件的编程。它提供了一个核心的类型：Observable，几个辅助类型（Observ
加入一个多播组(最简单的情况)
shijian408的专栏
07-11 4305
应用程序通过命令字IP_ADD_MEMBERSHIP把一个socket加入到一个多播组，IP_ADD_MEMBERSHIP是一个IP层的命令字，其调用使用的参数是结构体struct ip_mreq，其定义如下： struct ip_mreq { struct in_addr imr_multiaddr; struct in_addr imr_interface; }; 该结构体的两个成
数组里面对象去重的3种方法
热门推荐
榴莲不好吃的专栏
06-10 3万+
数组里面对象去重的方法挺多的，下面列了几种方法任君选择！ 下面是将要过滤的数据，将arr里面id重复的数据去掉（下面方法中用的arr都是这组数据哦）。 var arr = [ {id: 1, name: '周瑜1'}, {id: 3, name: '王昭君1'}, {id: 2, name: '李白1'}, {id: 1, name: '周瑜2'}, {id: 2, na...
RxJS编程思想解析与实践指南
例如，`map`操作符可以将数据流中的每个元素转换为另一个值，`filter`用于筛选符合特定条件的元素，`concat`和`merge`用于合并多个数据流，而`switchMap`则常用于根据上游事件动态调整下游的请求。通过深入理解并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值