如何检测react web应用程序中的空闲时间

Question

我正在开发一个包含空闲时间检测功能的react web应用程序(小型项目(。应用程序应该检测整个系统的空闲时间。如果用户关闭浏览器，我的意思不是用户对应用程序空闲，而是对整个系统/操作系统空闲：没有键盘输入，没有鼠标操作，即使在最小化对应用程序或应用程序的关注时也没有触摸。有什么方法可以实现这一点吗？

Answer 1

下面是一个在React中实现空闲超时的示例项目。您可以克隆此项目并在您的计算机上运行它。

// clone the project
git clone https://github.com/bbachi/react-idle-timeout.git
// install dependencies and start the project
npm install
npm start

这是一个简单的项目，有两个屏幕：登录屏幕和仪表板屏幕。

当您使用任何用户名和密码登录时，仪表板会显示一些用户表。如果您空闲5秒，我们将通过模式窗口通知用户，如果用户在5秒后仍处于空闲状态，则用户将注销。

关于细节，这篇博客文章似乎支持这个想法。