如何编写一个可以取消订阅rxjs6 Angular6的observable

时间:2018-06-07 15:06:50

标签: angular rxjs

我正在尝试编写一个observable,它会根据鼠标悬停文件将数据库更新为'away'status。如果鼠标处于活动状态,请更新回“在线”。

这是我到目前为止所做的:

private updateOnIdle(userId) {
  this.timer$ =  fromEvent(document, 'mousemove')
                       .pipe(
                        first(),
                        throttleTime(2000),
                        switchMap(() => firebase.database()
                        .ref(`/status/${userId}`).set({status: 'online', last_changes: firebase.database.ServerValue.TIMESTAMP}),
                        ),
                        map(() =>
                        timer(5000)
                        .map(() => {
                          firebase.database().ref('/status/' + userId).set({
                            status: 'away',
                            last_changed: firebase.database.ServerValue.TIMESTAMP
                        });
                        })
                      )
                      );
}

但这对我不起作用。怎么办呢?

1 个答案:

答案 0 :(得分:0)

你几乎拥有它,真的只需要在几个地方console.log()

为了使下面的示例更清楚,我已经抽象出了Firebase代码,并且出于演示目的而将其替换为timer(5000).map()

我还将.pipe()更改为可管理格式,因为您上面已经有first()。如果您有正确的导入,它应该以任何一种方式工作,但最好保持一致。

最后,我放弃了console.clear() fromEvent = rxjs.fromEvent first = rxjs.operators.first throttleTime = rxjs.operators.throttleTime switchMap = rxjs.operators.switchMap map = rxjs.operators.map timer = rxjs.timer of = rxjs.of userId = 1 /* setStatus = (newStatus, userId) => { return firebase.database() .ref(`/status/${userId}`) .set({ status: newStatus, last_changed: firebase.database.ServerValue.TIMESTAMP }) } */ setStatus = (newStatus, userId) => { console.log(newStatus, userId) return of(1) } timer$ = fromEvent(document, 'mousemove').pipe( //first(), throttleTime(2000), switchMap(() => setStatus('online', userId)), map(() => timer(5000).pipe( map(() => setStatus('away', userId)) ).subscribe() ) ); timer$.subscribe();,因为假设代码应该随着时间的推移继续监视鼠标。

现在,您可以在控制台中看到Firebase将以各种模式移动鼠标时会看到什么。

下一个增强功能可能是在线时禁止“在线”更新,但这取决于您的要求。

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.0/rxjs.umd.js"></script>
$quizzes = $course->students()->with(['quizzes'=> function($query) use ($course) {
              $query->where('course_id', $course->id);
           }])->get();