Rxjs 添加事件侦听器，并使用“扫描”保持简化状态，然后删除事件侦听器

我正在处理这个沙箱-

我想做的是：

1） 等待onLogin事件

2） 登录时，我想

connectSocket（）

，每当套接字断开连接，并且应用程序位于前台时，我想重新连接socket（）。（在沙盒中，我将

connectSocket（）

删除为只需等待5秒的承诺）

3） 我想重复步骤2，直到onLogout事件出现

我在这里写了这段代码，请查看沙箱，然后按“onLogin”按钮开始操作

我使用

switchMap

，因为在它运行时，我不希望任何其他登录事件重新启动另一个流

---

我不能让它工作。我是rxjs新手。

使用

startWith

初始化该值，

CombineTest

将在触发任一事件时触发

fromEvent(document, 'onLogin').pipe(
    switchMap(() =>
        combineLatest(
            fromEvent(document, 'onDisconnect').pipe(
                mapTo(true),
                startWith(true)
            ),
            fromEvent(document, 'onAppStateChange').pipe(
                map(e => e.detail === 'foreground'),
                startWith(true),
            )
        ).pipe(
            mergeMap(([isDisconnected, isInForeground]) =>
                isDisconnected && isInForeground ? connectSocket() : EMPTY
            ),
            takeUntil(fromEvent(document, 'onLogout'))
        )
    )
)

---

我认为您必须将逻辑附加到onDisconnected事件，才能触发重新连接。但是我没有看到在当前的代码中Thank@Fanchung我有

fromEvent（document，'onDisconnect'）

——但问题是因为我用

isDisconnected

和

isInForeground

true初始化它，它应该通过并运行

connectSocket（）

但它没有这样做。调用

connectSocket（）

方法后，是否有必要将

isDisconnected

设置为

false

？无需将其设置为false，因为您没有重用此值。您可以组合所有三种状态：onconnect、ondisconnect和satechangecombinelateest（合并（连接、断开连接）管道（映射（（[connected，isForeground]）=>……反应式功能样式需要时间来适应

fromEvent(document, 'onLogin').pipe(
    switchMap(() =>
        combineLatest(
            fromEvent(document, 'onDisconnect').pipe(
                mapTo(true),
                startWith(true)
            ),
            fromEvent(document, 'onAppStateChange').pipe(
                map(e => e.detail === 'foreground'),
                startWith(true),
            )
        ).pipe(
            mergeMap(([isDisconnected, isInForeground]) =>
                isDisconnected && isInForeground ? connectSocket() : EMPTY
            ),
            takeUntil(fromEvent(document, 'onLogout'))
        )
    )
)