WhatsApp Status Monitor

Después de publicar Telegram Status Monitor, he recibido bastantes peticiones de gente interesada en esa misma solución, pero para WhatsApp. Es decir, poder saber los cambios de estado de un contacto, pese a que tenga oculta la hora de la última actividad. Para eso está WhatsApp Status Monitor.

Se encarga de supervisar el estado del contacto seleccionado cada segundo, y registrar en la consola del navegador, cuando éste cambia. Así podrás saber a qué horas se conectó, cuanto rato estuvo activo, etcétera.

Supongo que hay muchos usos para este tipo de soluciones. El caso, es que si lo que necesitas, es poder registrar los cambios de estado que se producen en un contacto de WhatsApp, puedes aprovechar WhatsApp Web, y ejecutar este script en tu navegador.

Usarlo es muy sencillo:
1) Accede a web.whatsapp.com normalmente.
2) Escoge el contacto a supervisar.
3) Abre la ventana de chat con él.
4) Abre la consola de depuración de tu navegador (CTRL-SHIFT-I), y pega el código que se muestra a continuación al completo.
5) Pulsa ENTER.

En la consola de depuración, irás viendo entradas como estas:
[WHATSAPP MONITOR] 12/4/2017 10:52:02 Javier Gutiérrez en línea
[WHATSAPP MONITOR] 12/4/2017 10:52:35 Javier Gutiérrez
[WHATSAPP MONITOR] 12/4/2017 10:56:04 Javier Gutiérrez en línea
[WHATSAPP MONITOR] 12/4/2017 10:56:33 Javier Gutiérrez escribiendo…
[WHATSAPP MONITOR] 12/4/2017 10:57:01 Javier Gutiérrez en línea
[WHATSAPP MONITOR] 12/4/2017 10:57:26 Javier Gutiérrez

Si te es más cómodo, puedes aplicar un filtro en la consola, para mostrar todas las salidas de tipo INFO, que contengan el texto [WHATSAPP MONITOR], y así tendrás un registro limpio de advertencias y errores del navegador.

A diferencia de Telegram Web, WhatsApp Web, funciona conectado a tu teléfono, así que mientras se esté ejecutando el script, tendrás que tener encendido el teléfono (aunque no hace falta que la app esté abierta), y con conectividad a internet. Idealmente con WiFi, para evitar consumir los datos disponibles. Lo bueno, es que al ser independiente del teléfono, no aparecerás como «En linea» mientras se esté ejecutando.

Igual que ocurría con el Telegram Status Monitor, en muchos navegadores web, cuando la pestaña no está activa, a veces suspenden la ejecución de código con el fin de ahorrar energía. Por lo que te recomiendo que la dejes abierta en primer plano.

/**
* Logs WhatsApp Web (web.whatsapp.com) status changes for the selected contact.
* Very useful for monitorying in background "Online" / "En línea" for a particular chat.
* Open WhatsApp Web as usual, go to the contact you want to monitor, and then execute this code.
* In Chrome/Chromium/Opera/Vivaldi and Firefox/SeaMonkey, press CTRL-SHIFT-I to open the Developer Console, and then paste the whole contents and press ENTER.
* @summary WhatsApp Web Status Monitor.
* @version 1.1 (2017/09/05)
* @license LGPL
* @author Javier Gutiérrez Chamorro (Guti) - http://www.javiergutierrezchamorro.com
*/
"use strict";
var msStatus = '';
setInterval(function()
{
	var sNewStatus;
	var sContact = '';
	if ((document.getElementsByClassName('pane-header pane-chat-header')) && (document.getElementsByClassName('pane-header pane-chat-header').length > 0) && (document.getElementsByClassName('pane-header pane-chat-header')[0].getElementsByClassName('emojitext ellipsify')))
	{
		sContact = document.getElementsByClassName('pane-header pane-chat-header')[0].getElementsByClassName('emojitext ellipsify')[0].innerText;
	}
	if (document.getElementsByClassName('emojitext chat-subtitle-text')[0])
	{
		sNewStatus = document.getElementsByClassName('emojitext chat-subtitle-text')[0].innerText;
	}
	else
	{
		sNewStatus = '';
	}
	if (sNewStatus != msStatus)
	{
		msStatus = sNewStatus;
		console.log('[WHATSAPP MONITOR] ' + new Date().toLocaleString() + ' ' + sContact + ' ' + msStatus);
	}
}, 1000);

Actualizado a martes 5 de septiembre de 2017. 17:09:
A petición de Javi, he hecho una actualización rápida del script con los últimos cambios en WhatsApp Web. Éstos sólo afectaban a la forma de obtener el estado, y el resto queda igual. Lo he verificado por encima con Opera 49.

Actualizado a sábado 5 de enero de 2019. 10:08:
He vuelto a probar el script, y nuevamente ha dejado de funcionar. En caso de que lo actualice, lo notificaré aquí mismo.



33 comentarios en “WhatsApp Status Monitor”

  1. Decirte que he probado Telegram y está muy bien, abrí una cuenta allí y muy contento, bajo Windows funciona muy bien (incluso en mi navegador antiguo, cosa que con whatsapp no puedo hacer). Además, según tengo entendido se pueden crear hasta bots, haber si puedo hacerme uno en Lazarus (los lenguajes de programación que admiten por defecto no me atraen demasiado).

  2. Me alegra mucho BiaNamaran. Ahora sólo queda que más usuarios vayan pasándose a esta plataforma. Después del chasco de Line, no creo que a WhatsApp le quede demasiado. El tema de los bots, yo también lo tengo pendiente, me da mucha curiosidad. Aunque si te digo la verdad, aún no me he puesto. No por falta de motivación, sino porque no se me ha ocurrido ninguna idea para implementar.

  3. Yo había pensado uno con «inteligencia artifical», teniendo en cuenta que tú tenías uno así en los noventa… 😀 Si te decides a ello pásamelo para cambiarle de sexo y convertirlo en mi droide pelirroja 🙂

    La razón de hacerlo en Lazarus es que así lo tendría como una aplicación independiente, pero no se si se podrá hacer, solo hablo por hablar (pero estaría bien).

    En el IRC yo tenía algunos, no recuerdo todo lo que hacían pero tenían comandos para hacerlos hablar y eso, ya sabes, tonterías de esas pero que son curiosas, como por ejemplo enviarle de tu parte un mensaje a otra persona, mediante un comando al bot… Claro que para eso se puede abrir otra cuenta, pero ya no tendría la misma gracia 😀 Las posibilidades son bastante grandes:
    https://telegram.org/blog/bot-revolution

  4. Pues a la mayoría de la gente le gusta WhatsApp porque las compañías de telefonía movil lo imponen como gancho de venta de sus planes de abono pero; yo prefiero usar VIBER y me gustaría que le dedicaras un lugar a esta aplicación superior a todas las que he instalado y usado.

  5. No he usado Telegram pero hoy lo bajo para probar en el celular y ¿hay versión para PC?
    Espero que alguno de mis contactos lo use y así experimentar.
    Porque lo que me gusta de Viber es que se puede instalar en Linux, Mac o Windows como un programa más y sincroniza automático con el celular
    Esta en muchos idiomas y sería bueno le dieras una nueva probada, te dejo la página oficial:
    https://www.viber.com/es/

  6. Buenas. Yo uso whatsagent para esto. Es muy completa el pero es que es app de pago, y tiene un periodo de prueba de unas horas, borrando los datos de la app en informacion de la aplicacion, puedes seguir monitorizando ya que guarda el historial de monitorizacion. Probarlo y me contais.

  7. Sinceramente no comprendo el aporte de WhatsAgent José. Teniendo mi script, que es gratuito, y abierto, que puedes adaptar a tus necesidades, y que nunca caduca, ¿por qué hay que complicarle la vida con otras soluciones, que hasta donde yo se, no aportan nada más?

  8. Saludos amigo.. a esta fecha encontre este script. me parecio interesante.. pero cuando trate de ejecutarlo no hace nada.. Sera que a esta fecha ya cambiaron algo en la web chat del wp.. Lo utilice con una version actual de firefoz, la verdad no probe con otro navegador.. Espero tus comentarios..
    Gracias

  9. Entiendo que quiere comprobar si está en blanco o por el contrario está escribiendo o en línea pero hace tantas comprobaciones && que si me pierdo con variables y demás eso si no lo manejo bien

  10. genial funciona a la perfección, muchas gracias, aunque sea ahora está actualizado, que desde google esta es la única web que me aparece en resultados de «whatsapp status monitor» los demas o mencionan apps o nada de nada…

  11. Me alegra que funcione Javi, porque apenas probé las modificaciones. Efectivamente, WhatsApp Status Monitor, es la única herramienta de este tipo disponible que es gratuita. No sólo eso, su código es abierto, de manera que cualquiera puede actualizarlo o modificarlo.

    Gracias a todo ello, poco a poco se va volviendo más popular.

  12. Algo que he hecho ya que dejo de funcionar tu código, vamos a ver cuanto dura este…

    (function(console, document){
        'use strict';
        var mainElement = function() {
            return document.querySelector('.pane-header.pane-chat-header');
        }
        var getImgProfile = function() {
            var url = mainElement().querySelector('img').src
            var style = [
                'font-size: 1px',
                'line-height: ' + 100 + 'px;',
                'padding: ' + 90 * .5 + 'px ' + 90 * .5 + 'px',
                'background-size: ' + 40 + 'px ' + 40 + 'px',
                'background: url('+ url +')'
            ].join(';');
            return style;
        };
        var getStyle = function(color) {
            var style = [
                'color: ' + color + '',
                'font-size: 16px',
                'font-weight: bolder',
            ].join(';');
            return style;
        };
        var getDataOfContact = function() {
            var name = mainElement().querySelector('.chat-body')
                .querySelector('.chat-title')
                .querySelector('span').innerText;
            return 'Contacto: ' + name;
        };
        var getStatusOfContact = function() {
            var elements = mainElement().querySelector('.chat-body').children;
            if (elements.length < 2) {
                return 'Estado: Sin datos....';
            }
            return 'Estado: ' + elements[1].querySelector('span').innerText;;
        };
        var drawConsoleStyle = function(style, data) {
            data = data || '';
            console.log('%c' + data, style);
        };
        var init = function() {
            drawConsoleStyle(getStyle('#3FE900'), '[WHATSAPP MONITOR] ' + new Date().toLocaleString());
            drawConsoleStyle(getImgProfile());
            drawConsoleStyle(getStyle('#fff'), getDataOfContact());
            drawConsoleStyle(getStyle('#fff'), getStatusOfContact());
            setTimeout(init, 1500);
        };
        init();
    })(console, document);
  13. Muchas gracias kip. Me he permitido formatear tu código. Lo he estado probando con Opera 50, y a día de hoy, funciona correctamente. Me gusta tu solución con la consola coloreada, y que obtenga la imagen de perfil del usuario. Tiene algunas mejoras pendientes que mi implementación si que contemplaba, por ejemplo no dar error cuando no se ha escogido ningún chat (falla al intentar obtener la imagen), o detectar los cambios de estado, en vez de sacarlos por pantalla cada segundo.

    Debo felicitarte, porque el código está muy bien estructurado. De nuevo, te estoy muy agradecido por haberlo compartido.

  14. Hola Javier hice algo rápido el código y no tome en cuenta de esos detalles, he actualizado el código agregándole un par de lineas, puede mejorarse pero bueno así quedo…..

    (function(console, document){
        'use strict';
        var data = {
            contact: '',
            status: ''
        };
        var statusChanged = function(newData) {
            return data.contact !== newData.contact ||
                data.status !== newData.status;
        };
        var mainElement = function() {
            return document.querySelector('.pane-header.pane-chat-header');
        };
        var getImgProfile = function() {
            var url = mainElement().querySelector('img').src
            var style = [
                'font-size: 1px',
                'line-height: ' + 100 + 'px;',
                'padding: ' + 90 * .5 + 'px ' + 90 * .5 + 'px',
                'background-size: ' + 40 + 'px ' + 40 + 'px',
                'background: url('+ url +')'
            ].join(';');
            return style;
        };
        var getStyle = function(color) {
            var style = [
                'color: ' + color + '',
                'font-size: 16px',
                'font-weight: bolder',
            ].join(';');
            return style;
        };
        var getDataOfContact = function() {
            var name = mainElement().querySelector('.chat-body')
                .querySelector('.chat-title')
                .querySelector('span').innerText;
            return 'Contacto: ' + name;
        };
        var getStatusOfContact = function() {
            var elements = mainElement().querySelector('.chat-body').children;
            if (elements.length < 2) {
                return 'Estado: Sin datos....';
            }
            return 'Estado: ' + elements[1].querySelector('span').innerText;;
        };
        var drawConsoleStyle = function(style, data) {
            data = data || '';
            console.log('%c' + data, style);
        };
        var init = function() {
            if (mainElement() &amp;&amp; statusChanged({contact: getDataOfContact(), status: getStatusOfContact()})) {
                data = {
                    contact: getDataOfContact(),
                    status: getStatusOfContact()
                };
                drawConsoleStyle(getStyle('#3FE900'), '[WHATSAPP MONITOR] ' + new Date().toLocaleString());
                drawConsoleStyle(getImgProfile());
                drawConsoleStyle(getStyle('#fff'), data.contact);
                drawConsoleStyle(getStyle('#fff'), data.status);
            }
            setTimeout(init, 1000);
        };
        init();
    })(console, document);

    Disculpa si no logro dar con el uso de las etiquetas correctas para formatear el código.

  15. Está estupendo kip, unas buenas mejoras. No tienes porque disculparte, te agradezco el código aún sin formatear. El código lo formatea WP-Syntax, un plugin bastante extrano. Lo que entiende son las etiquetas tipo < pre lang="Javascript" >….

    Una costumbre que tengo, es indicar la versión en todos los scripts que hago. De esta manera, los usuarios no se confundirán, y sabrán la versión que tienen.

  16. Es una pena que este script no funcione hoy día, gran curro. Si supiera del tema lo actualizaría, pero estoy perdido como un pato en el Manzanares.

Deja un comentario