如何解决“用户在打字”精益RXJS实现
我目前正在为多用户聊天室实现“用户正在键入”功能。以我对RXJS的有限了解,我能够生成以下代码段,这些代码段满足“用户正在键入”功能的最低要求:
this.messageForm.message.valueChanges
.pipe(
tap(() => this.convoService.isUserTyping(true)),debounceTime(500),map(() => this.convoService.isUserTyping(false))
)
.subscribe();
但是,此实现并不理想,因为它对服务器产生太多请求。我的目标是将请求限制为2 ,并使用RXJS运算符创建以下行为:
- 仅在第一次按键时发出请求
- 忽略所有后续按键
- 在最后一次按键之后等待X的时间
- 如果在倒数计时到期之前引入了新的按键,请重置倒数计时
- 倒数计时结束后发出请求
解决方法
这是实现此目的的一种免费的副作用:
const typing$ = this.messageForm.message.valueChanges.pipe(
switchMap(() => concat(
of(true),of(false).pipe(delay(500)),)),distinctUntilChanged(),)
您可以使用它来执行您的请求。如果isUserTyping
是一劳永逸的,那么您可以做
typing$.subscribe(typing => this.convoService.isUserTyping(typing));
如果这是一个异步请求(并返回一个可观察到的),我宁愿这样做:
typing$.pipe(
concatMap(typing => this.convoService.isUserTyping(typing))
).subscribe();
这样,您可以确保按顺序执行所有请求,避免在高延迟情况下出现混乱的情况。
¹如果延迟是一个真正的问题,这将需要使用缓冲进行更多的工作,从而避免过多地对请求进行反向加压,但这仍然超出了此问题的范围。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。