Detectar inatividade do usuário

Antes de mostrar uma função útil que faça a detecção da inatividade do usuário, saiba as principais motivações para o uso dessa funcionalidade

A detecção de inatividade do usuário é importante em muitas aplicações web e sistemas, pois permite que as aplicações respondam a períodos de inatividade do usuário de maneira adequada. Algumas das aplicações incluem:

1. Segurança: Em muitos sistemas, a detecção de inatividade do usuário é usada para garantir que a sessão do usuário seja encerrada após um período de tempo específico. Isso ajuda a proteger a segurança dos dados e das informações confidenciais.
2. Personalização de experiência: A detecção de inatividade do usuário pode ser usada para personalizar a experiência do usuário, por exemplo, exibindo conteúdo relevante ou ofertas personalizadas após um período de inatividade.
3. Otimização de recursos: Em aplicações com muitos recursos, a detecção de inatividade do usuário pode ser usada para liberar recursos desnecessários após um período de inatividade, o que ajuda a otimizar o desempenho da aplicação.
4. Controle de acesso: A detecção de inatividade do usuário pode ser usada para controlar o acesso a recursos específicos, por exemplo, permitindo o acesso a recursos premium apenas durante períodos de atividade do usuário.

Em resumo, a detecção de inatividade do usuário é uma funcionalidade importante em muitas aplicações web e sistemas, que permite ajustar a experiência do usuário, garantir a segurança, otimizar o desempenho e controlar o acesso a recursos.

Implementação de uma função para detectar inatividade do usuário

Você pode implementar a detecção de inatividade de usuário em JavaScript usando o evento “onblur” ou “onmousemove”. Aqui está um exemplo de como você pode fazer isso:

let inactivityTime = function () {
  let time;
  window.onload = resetTimer;
  document.onmousemove = resetTimer;
  document.onkeypress = resetTimer;

  function logout() {
    alert("Você foi desconectado devido à inatividade.");
    window.location.href = 'login.html';
  }

  function resetTimer() {
    clearTimeout(time);
    time = setTimeout(logout, 300000);  // 300000 é o tempo em milissegundos antes de ser considerado inativo (5 minutos)
  }
};

inactivityTime();

Este código verifica se o usuário está interagindo com a página (movendo o mouse ou pressionando uma tecla) e, se não houver interação por 5 minutos (definidos como 300000 milissegundos), uma mensagem de alerta é exibida e o usuário é redirecionado para a página de login.

Em detalhes os principais eventos utilizados nessa função

window.onload é um evento do JavaScript que é disparado quando a página inteira (incluindo todas as imagens, scripts, etc.) é completamente carregada. É comum usar esse evento para executar código após o carregamento da página, como por exemplo, para inicializar bibliotecas JavaScript ou configurar elementos da página.

Aqui está um exemplo de como você pode usar o window.onload:

window.onload = function() {
  console.log("A página foi completamente carregada.");
};

Neste exemplo, a função anônima será chamada assim que a página inteira for carregada e “A página foi completamente carregada.” será exibido no console.

document.onmousemove é um evento do JavaScript que é disparado quando o usuário move o mouse sobre a página. Ele pode ser usado para detectar a interação do usuário com a página, como por exemplo, para resetar um contador de inatividade.

Aqui está um exemplo de como você pode usar o document.onmousemove:

document.onmousemove = function() {
  console.log("O mouse foi movido.");
};

Neste exemplo, a função anônima será chamada sempre que o usuário mover o mouse sobre a página e “O mouse foi movido.” será exibido no console.

document.onkeypress é um evento do JavaScript que é disparado quando o usuário pressiona uma tecla enquanto está com o foco em algum elemento da página. Ele pode ser usado para detectar a interação do usuário com a página, como por exemplo, para resetar um contador de inatividade.

Aqui está um exemplo de como você pode usar o document.onkeypress:

document.onkeypress = function(event) {
  console.log("A tecla " + event.key + " foi pressionada.");
};

Neste exemplo, a função anônima será chamada sempre que o usuário pressionar uma tecla enquanto estiver com o foco em algum elemento da página e a tecla pressionada será exibida no console. O argumento event é uma instância do objeto KeyboardEvent que contém informações sobre o evento de teclado, incluindo a tecla pressionada (acessível através da propriedade key).

window.location.href é uma propriedade do JavaScript que representa a URL atual da página. Ela pode ser usada para obter ou definir a URL da página, permitindo a navegação para outra página ou a recarregamento da página atual.

Aqui está um exemplo de como você pode usar o window.location.href para navegar para uma nova página:

window.location.href = "https://www.example.com";

Neste exemplo, o usuário será redirecionado para a página em “https://www.example.com“.

Você também pode usar o window.location.href para recarregar a página atual:

window.location.href = window.location.href;

Neste exemplo, a página atual será recarregada.