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

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

我不想调试代码，我希望我能找到更好的逻辑。代码在这一点上不那么重要

我的尝试

当任何用户更新页面上的

数据

时，更新

修改的时间戳

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

由于所有用户都订阅了

数据

可观察数据；在

data

change上，我用相同的戳记更新所有用户对象（现在我知道谁得到了上次更新）

现在我知道谁得到了数据更新；在html中，我将用户时间戳与“上次修改的数据”时间戳进行比较。如果时间戳不匹配，那么我知道用户离开了页面

<div *ngIf="user.modified===data.modified">
    <!-- show this user icon because they recieved the last update -->
</div>

这是可行的，但它似乎很复杂，而且在数据更新和用户获得更新之间存在延迟，这导致了前端挑战

这是对我有用的 基于Mium的回答

组成部分

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

document.addEventListener（“visibilitychange”，function（））{
let visible=document.visibilityState=='visible'；
self.configsService.update_collab_visible（visible）；//检测选项卡上的用户是否处于活动状态的更好方法是检测可见性状态

可视性更改API：

Document.visibilityState只读属性返回可见性
在文档的上下文中，该元素现在是可见的。
了解文档是在后台还是在后台是很有用的
不可见选项卡，或仅为预渲染加载。
更多：

因此，首先，对于每个用户，您可以更有效地检测存在性：

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

从这一步开始，您可能遇到的唯一延迟将与firebase密切相关。因此，您需要配置同步频率，或者如果您真的想要快速，请使用WebSocket连接作为示例。
为了确保我理解，您的数据库位于后端或前端？当您响应时，我将更新我的答案，但是我假设你的数据库在后端。那么，从那里开始，你如何在后端订阅数据库？你有推送服务器或websocket？我的数据库是对前端firebase的api调用。但是如果你有想法，我有一个nodebackend api，我可以根据你的反馈进行更新。请检查并告诉我是否有回答你的问题。很好。我正在用正确的代码更新我的问题
    <div *ngIf="user.visible">
        {{user.initial}}
    </div>

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