我的尝试

Question

在Angular6项目中，有一个“合作者”页面。显示协作者很容易，但是现在我需要确定用户何时不在页面上（或跳动），以便删除图标。

我不想调试代码，希望我能找到更好的逻辑。此时的代码不太重要

我的尝试

任何用户更新页面上的data都会更新modified时间戳。

update_data() {
    db.object('dataRef').update({modified: Date.now()})
}

因为所有用户都订阅了data可观察的内容；在data上进行更改时，我使用相同的标记更新了所有用户对象（现在我知道谁得到了最近的更新）
```
// on data updated
this.data.subscribe( res => {
    this.user.update({modified: Date.now()})
});
```
现在我知道谁得到了数据更新；在html中，我将用户时间戳与“数据上次修改”时间戳进行了比较。如果时间戳不匹配，那么我知道用户离开了页面。
```
<div *ngIf="user.modified===data.modified">
    
</div>
```

这可行，但似乎很复杂，并且在数据更新和用户获得更新之间存在延迟-引起前端挑战

这里有什么对我有用的

基于 Mium的答案

组件

    document.addEventListener("visibilitychange", function() {
        let visible = document.visibilityState==='visible';
        self.configsService.update_collab_visible(visible); // <= updates the db with true or false
    });

html

    <div *ngIf="user.visible">
        {{user.initial}}
    </div>

Answer 1

一种更好的检测用户是否处于活动状态的方法是检测可见性状态。

VisibilityChange API ：

Document.visibilityState只读属性返回可见性在文档的上下文中，此元素现在可见。知道文档是在后台还是在不可见的标签，或仅加载用于预渲染。更多： https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState

因此，首先，对于每个用户，您可以更有效地检测到状态：

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
  // send notification to firebase
});

从此步骤开始，您可能遇到的唯一延迟将与Firebase紧密相关。因此，您需要配置同步频率，或者如果您确实想提高速度，请使用WebSocket连接。

显示活动用户图标-如何确定谁不再在线（寻找NG或JS解决方案）

我的尝试

这里有什么对我有用的

1 个答案: