如何检测 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 秒后仍处于空闲状态，则用户将被注销。

关于细节，this blog post 似乎支持这个想法。