Idle Spy para Mootools - Detectando la ausencia de interacción

Publicado por aartiles
22 de enero de 2010 01:03 hrs.

Nuestra misión como programadores es velar por los recursos de nuestros usuarios y por los de nuestro servidor. Las aplicaciones ajax suelen realizar constantes pedidos al servidor, y aunque cambiemos de ventana o pestaña suelen continuar ejecutándose malgastando CPU del usuario, y ancho de banda y otros recursos del servidor.

Imaginemos una aplicación como Gmail, que esté constantemente chequeando si hay nuevos correos en el servidor para mostrarlos, además actualizando cada un minuto las fechas en formato time ago para mostrar el tiempo transcurrido desde que se recibió el correo. Si cambiamos de pestaña, muchas de esas acciones se deberían detener mientras no volvamos. Si abrís decenas de pestañas a la vez como yo y en un navegador tan goloso de memoria como Firefox, tened por seguro que las apps que no optimizan sus recursos terminarán saturando el navegador.

Hoy os traigo la clase IdleSpy para Mootools que monitoriza los eventos de ratón y teclado para determinar si el usuario está interactuando con la página y establecer un estado de inactividad (idle) para detener ciertas acciones o enviar un mensaje y llamar la atención del usuario.

?Ver código JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

  var IdleSpy = new Class({
    Implements: [Options, Events],
 
    options: {
      idleTime: 60000 //1 min
    },
 
    initialize: function(options) {
      this.setOptions(options);
      this.idle = false;
 
      documente.id(document.body).addEvents({
        'mousemove': this.doBack.bind(this),
        'mousewheel': this.doBack.bind(this),
        'keydown': this.doBack.bind(this)
      });
    },
 
    start: function() {
      this.idleTimer = this.doIdle.delay(this.options.idleTime, this);
    },
 
    doBack: function() {
      if (this.idleTimer) {
        $clear(this.idleTimer);
      }
      if (this.idle) {
        this.idle = false;
        this.fireEvent('back');
      }
      this.start();
    },
 
    doIdle: function() {
      this.idle = true;
      this.fireEvent('idle');
      this.idleTimer = this.doIdle.delay(this.options.idleTime, this);
    }
  });

La clase es bien sencilla de utilizar, creamos una instancia pasándole como parámetro el tiempo en milisegundos para considerar el estado de idle y podemos escuchar dos eventos idle o back para ser notificado cuando el usuario vuelva a interactuar con la página.

?Ver código JAVASCRIPT
1
2
3
4
5
6
7
8
9
10

 var idleSpy = new IdleSpy({
   idleTime: 300000
 });
 
 idleSpy.addEvents({
   'idle': function() { /* on user idle code here */ },
   'back': function() { /* on user back code here */ }
 });
 
 idleSpy.start();

No la he probado demasiado aun, así que espero comentarios ;)

Soluciones para otros frameworks AJAX:

Update1: añadido chequeo de del evento mousewheel
Update2: añadido this.start() al onBack, bug señalado por eneko.

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Bitacoras.com
  • E-mail this story to a friend!
  • Meneame
  • MySpace
  • Netvibes
  • Reddit
  • StumbleUpon
  • Technorati
  • Wikio
Componentes, Mootools
Comentarios
Trackbacks por Bitacoras.com el 22 de enero de 2010 a las 01:03 hrs.

Información Bitacoras.com…

Valora en Bitacoras.com: Nuestra misión como programadores es velar por los recursos de nuestros usuarios y por los de nuestro servidor. Las aplicaciones ajax suelen realizar constantes pedidos al servidor, y aunque cambiemos de ventana o pestaña sue…

Pingback por Tweets that mention Idle Spy para Mootools - Detectando la ausencia de interacción - AJAX24 -- Topsy.com el 22 de enero de 2010 a las 02:18 hrs.

[...] This post was mentioned on Twitter by Alfredo Artiles, Noticias sobre AJAX. Noticias sobre AJAX said: RT @aartiles24: Idle Spy para #Mootools - Detectando la ausencia de interacción http://bit.ly/8ofv06 #ajax [...]

Comentario por David Walsh el 22 de enero de 2010 a las 15:35 hrs.

I love this! You may want to consider a mousewheel event also.

Comentario por memoclic el 22 de enero de 2010 a las 15:36 hrs.

Really nice one.
May be the analytics vendors should inspire from this to have the real elapsed time on the site (last page not counted)

Comentario por Eneko Alonso el 22 de enero de 2010 a las 17:45 hrs.

Great idea, although if I’m not mistaken there is a minor bug. Once the doBack function is called, the timer gets cleared and never set again.

You should call this.start() just after clearing the timer on doBack().

Comentario por Eneko Alonso el 22 de enero de 2010 a las 17:47 hrs.

By the way, I love your default avatar, hahaha. Very appropriate for my previous comment :P

Comentario por aartiles el 22 de enero de 2010 a las 18:31 hrs.

@david: Thanks, added!

@memoclic: Good idea, them should do something like this

@eneko: I had that fixed on my real app, i forgot to fix it here too, thanks for notifying me.

Pingback por Idle Spy para MooTools, usa Ajax solo cuando sea necesario | aNieto2K el 23 de enero de 2010 a las 11:30 hrs.

[...] Artiles nos vuelve a deleitar con un espectacular script con el que aprovecharemos al máximo los recursos del usuarios y los de nuestro servidor haciendo [...]

Comentario por Juan Maria Nieves el 23 de enero de 2010 a las 18:38 hrs.

Muy interesante tendre que empezar a trabajar tambien con mootols , pero es que mi amigo jquery me tira mucho…

Pero este plugin esta genial… a ver si me animo y con el permiso del creador lo migro a jquery.

Pingback por Idle Spy para Mootools controla la carga de tu web según la interacción de tus usuarios - colorate el 25 de enero de 2010 a las 17:48 hrs.

[...] ha publicado un post en el que habla de la entrada que Alfredo Artiles ha escrito en el que nos muestra un script con el que podremos controlar el uso de Ajax dependiendo [...]

Deja un comentario

(requerido)

(requerido)