Come posso rilevare con JavaScript/jQuery se l'utente è attualmente attivo sulla pagina?

Question

Devo rilevare quando un utente non è attivo (non fa clic o non scrive) nella pagina corrente per più di 30 minuti.

Penso che potrebbe essere meglio utilizzare un evento blolling collegato al tag body e quindi continuare a reimpostare un timer per 30 minuti, ma non sono esattamente sicuro di come creare questo.

Ho jQuery disponibile, anche se non sono sicuro di quanto effettivamente utilizzerò jQuery.

Edit: Sono più bisogno di sapere se stanno attivamente utilizzando il sito, quindi fare clic (cambiando campi o posizione all'interno di un campo o selezionando le caselle di controllo/radio) o di battitura (in un ingresso, textarea, ecc) . Se sono in un'altra scheda o utilizzano un altro programma, suppongo che non stiano utilizzando il sito e che pertanto debbano essere disconnessi (per motivi di sicurezza).

Modifica # 2: Quindi tutti sono chiari, questo non è affatto per determinare se l'utente è loggato, autenticato o altro. In questo momento il server effettuerà il login dell'utente se non effettua una richiesta di pagina entro 30 minuti. Questa funzionalità impedisce i tempi in cui qualcuno spende più di 30 minuti per compilare un modulo e quindi invia il modulo solo per scoprire che non sono stati disconnessi. Pertanto, questo verrà utilizzato in combinazione con il sito del server per determinare se l'utente è inattivo (non facendo clic o digitando). Fondamentalmente, l'accordo è che dopo 25 minuti di inattività, verrà presentata una finestra di dialogo per inserire la password. Se non lo fanno entro 5 minuti, il sistema li registra automaticamente e la sessione del server viene disconnessa (la prossima volta che si accede a una pagina, come nella maggior parte dei siti).

Javascript è utilizzato solo come avvertimento per l'utente. Se JavaScript è disabilitato, non riceveranno l'avviso e (insieme alla maggior parte del sito non funzionante) verranno disconnessi la prossima volta che richiederanno una nuova pagina.

Answer 1

È possibile guardare mouse movement, ma questo è il meglio che si ottiene per l'indicazione di un utente ancora presente senza ascoltare l'evento click. Ma non c'è modo per javascript per dire se è la scheda attiva o se il browser è addirittura aperto. (beh, potresti ottenere la larghezza e l'altezza del browser e questo ti direbbe se è stato minimizzato)

Answer 2

Utilizzando jQuery, puoi facilmente controllare il movimento del mouse e usarlo per impostare una variabile che indica l'attività su true, quindi usando vanilla javascript, puoi controllare questa variabile ogni 30 minuti (o qualsiasi altro intervallo) per vedere se è vera. Se è falso, esegui la tua funzione o altro. Cercare setTimeout e setInterval per eseguire i tempi. Probabilmente dovrai anche eseguire una funzione ogni minuto per reimpostare la variabile su false.

Answer 3

Qui il mio colpo:

var lastActivityDateTime = null; 

function checkActivity() 
{ 
    var currentTime = new Date(); 
    var diff = (lastActivityDateTime.getTime() - currentTime.getTime()); 
    if (diff >= 30*60*1000) 
    { 
     //user wasn't active; 
     ... 
    } 
    setTimeout(30*60*1000-diff, checkActivity); 
} 

setTimeout(30*60*1000, checkActivity); // for first time we setup for 30 min. 


// for each event define handler and inside update global timer 
$("body").live("event_you_want_to_track", handler); 

function handler() 
{ 
    lastActivityDateTime = new Date(); 
    // rest of your code if needed. 
} 

Answer 4

Sono recentemente ha fatto qualcosa di simile, anche se con Prototype invece di JQuery, ma immagino l'attuazione sarebbe più o meno lo stesso a patto che JQuery supporta gli eventi personalizzati.

In breve, IdleMonitor è una classe che osserva eventi di mouse e tastiera (regolare di conseguenza in base alle proprie esigenze). Ogni 30 secondi reimposta il timer e trasmette uno stato: evento inattivo, a meno che non riceva un evento mouse/chiave, nel qual caso trasmette uno stato: evento attivo.

var IdleMonitor = Class.create({ 

    debug: false, 
    idleInterval: 30000, // idle interval, in milliseconds 
    active: null, 
    initialize: function() { 
     document.observe("mousemove", this.sendActiveSignal.bind(this)); 
     document.observe("keypress", this.sendActiveSignal.bind(this)); 
     this.timer = setTimeout(this.sendIdleSignal.bind(this), this.idleInterval); 
    }, 

    // use this to override the default idleInterval 
    useInterval: function(ii) { 
     this.idleInterval = ii; 
     clearTimeout(this.timer); 
     this.timer = setTimeout(this.sendIdleSignal.bind(this), ii); 
    }, 

    sendIdleSignal: function(args) { 
     // console.log("state:idle"); 
     document.fire('state:idle'); 
     this.active = false; 
     clearTimeout(this.timer); 
    }, 

    sendActiveSignal: function() { 
     if(!this.active){ 
      // console.log("state:active"); 
      document.fire('state:active'); 
      this.active = true; 
      this.timer = setTimeout(this.sendIdleSignal.bind(this), this.idleInterval); 
     } 
    } 
}); 

Poi ho creato un'altra classe che ha il seguente da qualche parte in esso:

Event.observe(document, 'state:idle', your-on-idle-functionality); 
Event.observe(document, 'state:active', your-on-active-functionality) 

Answer 5

questo è quello che è venuta in mente. Sembra funzionare nella maggior parte dei browser, ma voglio essere sicuro che funzionerà ovunque, per tutto il tempo:

var timeoutTime = 1800000; 
var timeoutTimer = setTimeout(ShowTimeOutWarning, timeoutTime); 
$(document).ready(function() { 
    $('body').bind('mousedown keydown', function(event) { 
     clearTimeout(timeoutTimer); 
     timeoutTimer = setTimeout(ShowTimeOutWarning, timeoutTime); 
    }); 
}); 

Chiunque veda problemi?

Answer 6

Se si tratta di un problema di sicurezza, fare questo clientide con javascript è assolutamente l'estremità sbagliata della pipe per eseguire questo controllo. L'utente potrebbe facilmente avere javascript disabilitato: cosa fa la tua applicazione allora? Cosa succede se l'utente chiude il proprio browser prima del timeout. si disconnettono mai?

La maggior parte dei framework server ha un tipo di impostazione di timeout della sessione per gli accessi. Usalo e risparmia il lavoro di ingegneria.

Non si può fare affidamento sul presupposto che le persone non possono accedere senza javascript, quindi l'utente ha javascript. Tale assunto non è un deterrente per qualsiasi aggressore determinato, o anche educato modestamente.

L'uso di javascript è come una guardia di sicurezza che consegna ai clienti la chiave del caveau di una banca. L'unico modo in cui funziona è sulla fede.

Per favore, credetemi quando dico che l'uso di javascript in questo modo (e che richiede javascript per gli accessi !!) è un modo incredibilmente potente per progettare qualsiasi tipo di app web.

Answer 7

Senza usare JS, un modo più semplice (e più sicuro) sarebbe semplicemente avere un timestamp lastActivity memorizzato con la sessione dell'utente e controllarlo al caricamento della pagina. Supponendo che si sta utilizzando PHP (si può facilmente ripetere questo codice per un'altra piattaforma):

if(($_SESSION['lastAct'] + 1800) < time()) { 
    unset($_SESSION); 
    session_destroy(); 
    header('Location: session_timeout_message.php'); 
    exit; 
} 

$_SESSION['lastAct'] = time(); 

e aggiungere questo nella tua pagina (opzionale, l'utente verrà disconnesso a prescindere se la pagina viene aggiornata o meno (come si disconnette nel registro della pagina successiva)).

<meta http-equiv="refresh" content="1801;" /> 

Answer 8

Se la preoccupazione è la perdita di informazioni per l'utente dopo un timeout di accesso; un'altra opzione sarebbe quella di archiviare semplicemente tutte le informazioni registrate all'apertura di una nuova sessione (una nuova sessione verrà sempre avviata quando la sessione precedente è stata chiusa/scartata dal server) quando la richiesta a una pagina viene effettuata prima di instradamento alla pagina di registrazione. Se l'utente accede correttamente, è possibile utilizzare queste informazioni salvate per riportare l'utente a dove si trovava. In questo modo, anche se l'utente si allontana per alcune ore, può sempre tornare dove si trovava dopo un login riuscito; senza perdere alcuna informazione.

Questo richiede più lavoro da parte del programmatore, ma è una grande funzionalità totalmente apprezzata dagli utenti. Apprezzano in particolare il fatto che possono concentrarsi completamente su ciò che devono fare senza sottolineare la possibilità di perdere le loro informazioni ogni 30 minuti circa.

Answer 9

Ifvisible.js è una soluzione leggera crossbrowser che fa proprio questo. Può rilevare quando l'utente passa a un'altra scheda e torna alla scheda corrente. Può anche rilevare quando l'utente diventa inattivo e diventa di nuovo attivo. È piuttosto flessibile

Answer 10

Ifvisible è una buona libreria JS per verificare l'inattività dell'utente.

ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds 

ifvisible.on("idle", function(){ 
    // do something 
});