Bloquear pantalla si otro usuario está activo con JavaScript y PHP

Bloquear pantalla si otro usuario está activo con JavaScript y PHP

Muchas veces en un sistema web nos encontramos con la situación de que necesitamos bloquear pantalla si otro usuario está activo en esa misma, esto como una solución para la concurrencia de usuarios y posibles modificaciones no deseadas en base de datos, hoy implementaremos esta funcionalidad con JavaScript y PHP.

Actualmente existen varias formas de tratar la concurrencia de usuarios.

Hoy vamos a hablar e implementar posiblemente la solución más sencilla pero eficaz.

En un proyecto que estoy desarrollando me tope con esta problemática que me ocasionaba actualizaciones en base de datos no deseadas.


¿Sabías que?

¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.

Udemy

Trabajo en un sistema donde un usuario ingresa a una pantalla y se encuentra con cientos de datos que se actualizan en base de datos automáticamente al cambiar sus valores.

Esto hace que el sistema sea más fácil de trabajar pues no existe un botón de guardar, pero también causa algunos problemas de compatibilidad al estar dos usuarios sobre la misma pantalla de proyecto.

Por esta razón implementamos una solución de concurrencia de usuarios bastante simple, bloquear pantalla si otro usuario está activo, veamos que hicimos.

Estructura de base de datos

Cabe mencionar que en nuestra base de datos tenemos una tabla de proyectos que es sobre lo que va la pantalla que queremos bloquear el acceso a solo un usuario.

En esta tabla de proyectos agregamos dos columnas o campos más: ultimaactualizacion y idusuarioactivo.

El primer campo es un datetime donde almacenaremos una fecha que cada usuario dentro de la pantalla de proyecto estará reportando cada cierto tiempo.

El segundo campo es el id del usuario que está reportando para conocer a detalle quien está trabajando en la pantalla de proyecto.

Revisar concurrencia al ingresar a pantalla

A continuación veamos lo que se hace al ingresar a la pantalla de proyecto, nuestra pantalla en la que queremos implementar esta funcionalidad.

Esta función debe de llamarse al inicio del proyecto, recomendable en el metodo jQuery(document).ready(function(){).

Lo que hacemos aquí es revisar si existe un usuario activo mediante un archivo llamado revisarUltimaActualizacion.php.

Si el estatus es ERR entonces sabemos que existe otro usuario en este proyecto entonces hacemos cualquier cosa que querramos nosotros lanzamos un modal con información del usuario activo gracias al idusuarioactivo.

Si no existe usuario activo únicamente iniciamos la función iniciarWorker() que se encarga de reportar que estamos trabajando en esta pantalla cada cierto tiempo.

Revisar ultima actualización

He tratado de comentar el código anterior para que sea más fácil de comprender.

Lo que hace es prácticamente revisar la última fecha de actualización y el id usuario activo mediante un idproyecto.

Si no hay actividad hace más de 10 minutos se registra la fecha actual y el id usuario que entro a revisar, ahora el tiene el control de la pantalla o proyecto.

Regresamos el arreglo mediante JSON, en este arreglo pasamos estatus, ultimaactualizacion, idusuarioactivo y usuario.

Worker en JavaScript

En nuestra pantalla de proyecto también implementamos la función iniciarWorker() que se encarga de reportar cada 3 minutos a base de datos.

Esto lo hacemos mediante un archivo JavaScript llamado worker.js que veremos a continuación.

En la función onmessage recibimos el idproyecto y el idusuario que enviamos en  nuestra pantalla de proyecto y los enviamos a la función ultimaActualización.

En esta función lo único que hacemos es registrar nuestra actividad en base de datos mediante el archivo registrarUltimaActualizacion.php

Ejemplo de la funcionalidad Picture in Picture en JavaScript.

Registrar ultima actualización

En este archivo recibimos idproyecto e idusuario que usaremos para registrar en la base de datos que seguimos trabajando en ese proyecto.

Ahora cuando un usuario este activo en un proyecto y quiera ingresar otro usuario al mismo proyecto verá este mensaje, tu puedes realizar cualquier otra acción.

Bloquear pantalla si otro usuario está activo con JavaScript y PHP

Ceder el control rápidamente

Aunque esta funcionalidad funciona perfectamente existe el inconveniente de tener que esperar algunos minutos para que otro usuario tome el control de un proyecto.

A pesar de que una persona solicitará a la otra que le deje ingresar a un proyecto aún asi tiene que esperar menos de 10 minutos a que deje de reportar una vez abandono la pantalla de proyecto.

Para solucionar este problema se implementó un botón en la pantalla de proyectos que permite ceder el control, es decir, eliminar los campos ultimaactualización e idusuarioactivo.

En nuestra pantalla de proyecto:

En nuestro archivo eliminarUltimaActualizacion.php:

Como dijimos anteriormente, limpiamos los campos de ultimaactualizacion e idusuarioactivo, de esta forma cualquier usuario podrá ingresar rápidamente sin tener que esperar.

Si esta información sobre cómo bloquear pantalla si otro usuario está activo con JavaScript y PHP te ha sido de utilidad no olvides compartirla en tus redes sociales favoritas o dejarnos un comentario en la sección de abajo si tienes cualquier duda respecto de este tema, será un placer ayudarte.

¡Hasta luego!

Clic para valorar esta información
[Total: 3 Promedio: 5]