1

Tengo un script JavaScript que me permite cerrar sesión automáticamente según el tiempo establecido si el usuario deja de interactuar con la app con los siguientes eventos: click, mousemove, scroll, keypress, load.

Entonces, si deja de hacer estos eventos se activa el conteo con un setTimeout hasta cerrar sesión automáticamente.

El detalle está en que cuando interactúa de forma independiente, según por pestaña, o sea, que no está sincronizado el tiempo de espera cuando estás en pestañas diferentes.

Es decir, que si yo estoy en otra pestañas el setTimeout debe de restablecerse.

import Swal from "sweetalert2";

const events = [
  "click",
  "mousemove",
  "mousedown",
  "scroll",
  "keypress",
  "load",
];

let warningTimer = null;
let logoutTimer = null;

events.forEach((event) => {
  localStorage.setItem("tabs", "1");
  const localTabs = parseInt(localStorage.getItem("tabs"));
  if (localTabs == 1) {
    window.addEventListener(event, resetTimer);
  }
  localStorage.clear();
});

setTimers();

function setTimers() {
  warningTimer = setTimeout(warningMessage, 10000); // 59 minutos = 3540000 milisegundo
  logoutTimer = setTimeout(logoutUser, 15000); // 60 minutos = 3600000
}

function warningMessage() {
  Swal.fire({
    position: "top-end",
    type: "warning",
    title: "Inactive user, The system will be closed.",
    showConfirmButton: false,
  });
  console.log("paso el swal");
}

function logoutUser() {
  document.getElementById("logout-form").submit();
}

function resetTimer() {
  clearTimeout(warningTimer);
  clearTimeout(logoutTimer);
  setTimers();
  Swal.close();
}
0

1 respuesta 1

1

Encuentro un tanto hostil para el usuario eso de sacarlo cuando no interactúa. Mi banco lo hace y es muy irritante. Segundo, eso de tener timeOuts dando vuelta es muchas veces fuente de un memory leak que terminará colgando el browser.

Dicho esto, lo anterior no es de mi incumbencia, así que me limito a comentar posibles soluciones.

BroadcastChannel API.

No funciona eso sí en explorer ni Safari, pero ánimo.

Para crear un BroadcastChannel invocas el constructor pasándole el nombre del canal.

  const actividadChannel = new BroadcastChannel('monitoreo_actividad');

Tú puedes enviar un mensaje al canal y todos los que estén suscritos a él lo recibirán.

 actividadChannel.postMessage({action:'resetTimer'});

Para suscribirte a los mensajes:

 actividadChannel.onmessage = (messageEvent)=> {
      console.log(messageEvent);
      // messageEvent.data contiene {action:'resetTimer'}
 });

El que envía no recibe su propio mensaje, claro.

Tendrás que determinar el momento correcto para enviar ese mensaje, y el lugar correcto para recibirlo. Respecto a lo segundo pareciera óptimo algo como

 actividadChannel.onmessage = (messageEvent)=> {
     if(messageEvent?.data?.action !== 'resetTimer') { 
         return;
     }
     resetTimer();
 });

Para no actuar ante cualquier mensaje de otro tipo. Por otro lado, ya que invocas a resetTimer al recibir el mensaje, claramente no debes enviar un mensaje en esa función a las otras pestañas, porque entrarías en un loop infinito.

Eventos LocalStorage

Puedes escuchar a cambios en el localStorage hechos por otra pestaña

window.onstorage = function(storageEvent) {
     let {key}=storageEvent;
     console.log(localStorage.getItem(key);
}

(no escuchas lo de la misma pestaña donde se declara el listener)

Este enfoque es más compatible pero menos elegante, porque si vas a pasar mensajes que sean objetos complejos necesitas serializarlos como string para guardarlos, y deserializarlos al otro lado para leerlos.

Pivotear en un serviceWorker con Client API

Si estás familiarizado con el uso de ServiceWorkers, me parece que la mejor opción es utilizar el SW como encargado de correr o resetear los timers cuando las pestañas le avisan. Las pestañas, en vez de lanzar mensajes al infinito sin saber si alguien los recibe, saben si un SW las está controlando, po lo que pueden hablarle directamente:

navigator?.serviceWorker?.controller?.postMessage(
  {action:'resetTimer'}
)

En el serviceworker mismo, se escucha el evento message

addEventListener('message',(extendableMessageEvent) => {
    console.log({ evento: extendableMessageEvent });
});

Este SW puede determinar quienes son sus "clientes", dado que puede haber dos versiones de un SW en distintas pestañas, y no necesariamente quieres hablarle a todas sino sólo a las que controlas.

 function logoutUser() {
   self.clients.matchAll().then(function (clients) {
     console.log({ clients });
   });
 }

Ahí clients es un array de WindowClient, y habría que enviarle a cada uno la orden de desloguearse, o bien gatillar el llamado a logout desde el SW y a las pestañas solamente decirles que naveguen al login.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.