如何编写一个取消订阅自己的 observable rxjs6 Angular6 [英] How to write an observable that unsubscribes itself rxjs6 Angular6

问题描述

我正在尝试编写一个 observable，它将根据鼠标悬停文档将数据库更新为离开"状态.如果鼠标处于活动状态，则更新回在线".

I am trying to write an observable that will update database to 'away'status depending on mouseover document. And if mouse active, update back to 'online'.

这是我目前所拥有的:

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
                        });
                        })
                      )
                      );
}

但这对我不起作用.这样做的方法是什么?

But this doesn't work for me. What would be the way to do it?

推荐答案

你几乎拥有它，真的只需要在几个地方subscribe().

You almost have it, really just need to subscribe() in a couple of places.

为了让下面的示例更清晰，我抽象出了 Firebase 代码，并出于演示目的将其替换为 console.log().

To make things clearer in the sample below I have abstracted away the Firebase code and for demo purposes replaced it with a console.log().

我还将 timer(5000).map() 更改为可管道格式，因为您在上面已经有了 .pipe().如果您有正确的导入，它应该可以工作，但最好保持一致.

I also changed the timer(5000).map() to pipeable format, since you already have .pipe() above. It should work either way if you have the correct imports, but better to keep it all consistent.

最后，我放弃了 first() 因为假定代码应该随着时间的推移继续监视鼠标.

Finally, I dropped the first() since presume the code should keep monitoring the mouse over time.

现在可以正常工作了，您可以在控制台中看到当鼠标以各种模式移动时 Firebase 会看到什么.

With this working now, you can see in the console what Firebase will see as the mouse is moved in various patterns.

下一个增强功能可能是在已经在线时禁止在线"更新，但这取决于您的要求.

The next enhancement may be to suppress 'online' updates when already online, but that depends on your requirement.

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();

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.0/rxjs.umd.js"></script>

这篇关于如何编写一个取消订阅自己的 observable rxjs6 Angular6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！