如何在ASP.NET Core应用中用C#检测用户空闲时间并提示消息

核心思路 #

用户在浏览器中的点击、滚动、按键等操作均属于活跃行为，我们通过前端监听这些事件来重置计时器；当计时器累计达到20分钟无交互时，触发空闲提醒。核心逻辑在前端实现，后端可按需配合记录空闲状态或验证会话有效性。

前端实现步骤 #

1. 设置基础变量与计时器：定义空闲时长常量，初始化全局计时器。
2. 监听用户交互事件：覆盖常见的用户操作事件，确保任何活跃行为都能重置计时器。
3. 实现计时器重置与提醒逻辑：编写函数处理计时器的重置与空闲提醒的触发。

示例代码

// 配置空闲时长：20分钟（转换为毫秒）
const IDLE_DURATION = 20 * 60 * 1000;
let idleTimer;

// 重置空闲计时器
function resetTimer() {
    clearTimeout(idleTimer);
    idleTimer = setTimeout(triggerIdleAlert, IDLE_DURATION);
}

// 触发空闲提醒
function triggerIdleAlert() {
    // 替换为自定义模态框可提升体验，这里用原生alert演示
    alert("User is idle for 20 min");
    
    // 可选：通知后端用户空闲状态（示例API请求）
    // fetch('/api/User/MarkAsIdle', {
    //     method: 'POST',
    //     headers: { 'Content-Type': 'application/json' },
    //     credentials: 'include'
    // });
}

// 绑定用户交互事件，任何操作都重置计时器
['click', 'mousemove', 'keydown', 'scroll', 'touchstart'].forEach(eventType => {
    document.addEventListener(eventType, resetTimer);
});

// 页面加载时启动计时器
window.addEventListener('load', resetTimer);

优化与扩展 #

• 处理页面隐藏/休眠：浏览器标签页隐藏或系统锁屏时，计时器可能不准，可结合Page Visibility API调整：

  document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
          clearTimeout(idleTimer);
      } else {
          resetTimer();
      }
  });
  

• 多标签页同步：若用户打开多个应用标签，可通过localStorage同步计时器状态，避免重复弹出提醒。
• 替换原生alert：用Bootstrap模态框或自定义弹窗组件替代原生alert，更符合应用UI风格。

后端配合（可选） #

如果需要在后端记录用户空闲状态或验证会话，可编写ASP.NET Core API接口：

[ApiController]
[Route("api/User")]
public class UserController : ControllerBase
{
    [HttpPost("MarkAsIdle")]
    public IActionResult MarkAsIdle()
    {
        // 这里可更新用户状态到数据库或Session
        HttpContext.Session.SetString("LastIdleTime", DateTime.UtcNow.ToString());
        return Ok();
    }
}

内容的提问来源于stack exchange，提问作者sridhar elangovan