Come posso rilevare con JavaScript / jQuery se l’utente è attualmente attivo nella pagina?

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

Penso che potrebbe essere meglio usare il blolling dell’evento collegato al tag body e quindi continuare a reimpostare un timer per 30 minuti, ma non sono esattamente sicuro di come farlo.

Dispongo di jQuery, anche se non sono sicuro di quanto effettivamente utilizzi jQuery.

Modifica: ho più bisogno di sapere se stanno usando triggersmente il sito, quindi cliccando (cambiando campi o posizione all’interno di un campo o selezionando checkbox / radio) o digitando (in un input, 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 n. 2: quindi tutti sono chiari, questo non serve a 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).

Il Javascript è usato 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.

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

Questo è quello che ho trovato. Sembra funzionare nella maggior parte dei browser, ma voglio essere sicuro che funzionerà ovunque, sempre:

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

Qualcuno vede qualche problema?

Recentemente ho fatto qualcosa di simile, anche se utilizzando Prototype invece di JQuery, ma immagino che l’implementazione sarebbe più o meno la stessa fintanto che JQuery supporta eventi personalizzati.

In poche parole, IdleMonitor è una class che osserva gli eventi del mouse e della tastiera (adattarsi di conseguenza 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 appena creato un’altra class 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) 

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

Usando jQuery, puoi facilmente osservare 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. Cerca setTimeout e setInterval per fare i tempi. Probabilmente dovrai anche eseguire una funzione ogni minuto per reimpostare la variabile su false.

Ifvisible è una bella lib di JS per verificare l’inattività dell’utente.

 ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds ifvisible.on("idle", function(){ // do something }); 

Ecco il mio scatto:

 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. } 

Se si tratta di un problema di sicurezza, fare questo clientide con javascript è assolutamente la parte 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 serveride ha una sorta di impostazione di timeout della sessione per gli accessi. Usalo e risparmia il lavoro di ingegneria.

Non puoi 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.

Usare javascript per questo è 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, credimi quando ti dico che usare javascript in questo modo (e che richiede javascript per gli accessi !!) è un modo incredibilmente pesante per progettare qualsiasi tipo di app web.

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 tu stia usando PHP (puoi facilmente rifare 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 aggiungi questo nella tua pagina (facoltativo, l'utente verrà disconnesso indipendentemente dal fatto che la pagina venga aggiornata o meno (mentre si disconnette nel registro della pagina successiva)).

  

Se la tua 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, è ansible 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.

Ciò 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.