Bot para chat de Facebook (v2)

Estándar

Hace un tiempo publiqué un bot para el chat de Facebook, el cual en su tiempo (diciembre de 2013) funcionaba a la perfección.
Hace unos días anduve dando una repasada al blog (ya no publico por falta de tiempo), y vi que no funcionaba más.

Durante el tiempo que anduve desaparecido, aprendí que jQuery no vale (al menos para mí no, eviten críticas en esto), y que JavaScript puede hacer peticiones web usando AJAX y parseo del DOM con DOMParser. Fue entonces cuando con más razón decidí refactorizar el código de mi bot, actualizarlo a cómo Facebook trabaja hoy en día, y optimizar el código. Así que, a ver el código:

Código del bot

/**
 * Sends a message to all your online Facebook contacts.
 *
 * @author Bryan Horna <bryanjhv@gmail.com>
 * @version 2.0
 */


/* Constants */

/**
 * The message you want to send.
 *
 * @type {String}
 */
var MESSAGE = "Hi! I'm trying my Facebook Chat Bot v2. Would you like to " +
    "build your own? Go to: http://wp.me/p40uwy-1E",
  TO_ALL = false;

/**
 * Wrapper for unnecessary functions.
 */
(function (g) {

  /* Helpers */

  /**
   * Iterates over an Array.
   *
   * @param {Array|NodeList} arr
   * @param {Function} callback
   */
  var forEach = function (arr, callback) {
    [].forEach.call(arr, callback);
  };

  /**
   * Parses HTML.
   *
   * @param {String} html
   * @returns {HTMLDocument}
   */
  var parseHtml = function (html) {
    var parser = new DOMParser();
    return parser.parseFromString(html, "text/html");
  };

  /**
   * Gets Object keys.
   *
   * @type {Function}
   */
  var keys = Object.keys;

  /**
   * Makes an AJAX request.
   *
   * Options object:
   * - url: The URL to fetch.
   * - data: Data as hash. (optional)
   * - method: HTTP verb. (default "GET")
   * - success: Callback on success.
   * - error: Callback on error.
   *
   * @param {Object} options
   */
  var request = function (options) {
    var nop = function () {},
      url = options.url || ";",
      data = options.data || {},
      method = options.method || "GET",
      success = options.success || nop,
      error = options.error || nop;
    if (!url) {
      return;
    }

    var params = [],
      eUC = encodeURIComponent;
    forEach(keys(data), function (key) {
      params.push(eUC(key) + "=" + eUC(data[key]));
    });
    var textData = params.join("&amp;");

    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          success(xhr.response, data);
        } else {
          error(xhr.status, data);
        }
      }
    };
    xhr.send(method === "GET" ? null : textData);
  };

  /**
   * Fetchs the full name given an ID.
   *
   * @param {Object} fields
   * @param {Function} callback
   */
  var userName = function (fields, callback) {
    var id = "";
    forEach(keys(fields), function (field) {
      if (field.indexOf("ids") + 1) {
        id = fields[field];
      }
    });
    var success = function (data) {
      data = JSON.parse(data);
      callback(data.name, id);
    };
    if (id) {
      request({
        url:     "https://graph.facebook.com/" + id,
        success: success
      });
    }
  };

  /**
   * Notifies events.
   *
   * @param {String} msg
   */
  var notify = function (msg) {
    alert(msg + ".");
  };


  /* Callbacks */

  /**
   * Gets called when message was sent.
   *
   * @param {String} response
   * @param {Object} fields Fields sent.
   */
  var msgSuccess = function (response, fields) {
    userName(fields, function (name) {
      setTimeout(function () {
        notify("Message sent to: " + name);
      }, 5000);
    });
  };

  /**
   * Gets called when message failed.
   *
   * @param {Number} status
   * @param {Object} fields Fields sent.
   */
  var msgError = function (status, fields) {
    userName(fields, function (name) {
      setTimeout(function () {
        notify("Couldn't send message to: " + name);
      }, 5000);
    })
  };

  /**
   * Called when buddy page was loaded.
   *
   * @param {String} buddyHtml The HTML of the page.
   */
  var buddySuccess = function (buddyHtml) {
    var doc = parseHtml(buddyHtml),
      form = doc.querySelector("#composer_form"),
      inputs = form.querySelectorAll("input"),
      fields = {};
    forEach(inputs, function (input) {
      fields[input.name] = input.value;
    });
    delete fields.send_photo;
    fields.body = MESSAGE;
    var exec = function () {
      request({
        url:     form.action,
        data:    fields,
        method:  "POST",
        success: msgSuccess,
        error:   msgError
      });
    };
    if (TO_ALL) {
      exec();
    } else {
      userName(fields, function (name) {
        if (confirm("Send message to: " + name + "?")) {
          exec();
        }
      });
    }
  };

  /**
   * If fetching buddy page failed.
   */
  var buddyError = function () {
    notify("Couldn't fetch buddy page");
  };

  /**
   * Called when buddylist was retrieved.
   *
   * @param {String} listHtml HTML content.
   */
  var listSuccess = function (listHtml) {
    var doc = parseHtml(listHtml),
      tables = doc.querySelectorAll("#root div table"),
      buddies;
    forEach(tables, function (table) {
      buddies = table.querySelectorAll("td div a");
      if (buddies) {
        forEach(buddies, function (buddy) {
          request({
            url:     buddy.href,
            success: buddySuccess,
            error:   buddyError
          });
        });
      }
    });
  };

  /**
   * If buddylist failed.
   */
  var listError = function () {
    notify("Couldn't fetch buddy list");
  };

  /**
   * Main program.
   *
   * @param {Boolean} all True to send message to all connected buddies.
   */
  g.bot = function (all) {
    if (all) {
      TO_ALL = true;
    }
    request({
      url:     "/buddylist.php",
      success: listSuccess,
      error:   listError
    });
  };

})(window);

Modo de uso

Aquí no voy a suponer que sabes cómo usar lo de arriba, así que detallaré cada paso de forma que todo quede claro. No explicaré el código pues hace lo mismo que el de la versión 1, sólo que está mejorado y actualizado.

  1. Inicia Mozilla Firefox. Si desgraciadamente no lo tienes instalado, tendrás que hacerlo.
  2. Ve a la página móvil de Facebook, e inicia sesión si aún no lo hiciste.
  3. Presiona F12, haz clic en Consola, pega el código (luego de colocar el puntero del mouse en la parte inferior) y presiona ENTER.
  4. Edita el mensaje. Escribe allí mismo MESSAGE = '[tu mensaje]' y presiona de nuevo ENTER.
  5. Llegó la hora de enviar tu mensaje. Si quisieras enviarlo a todos tus contactos, escribe bot(true) y si quieres escoger cada uno, bot(). (y luego de cualquiera un ENTER)
  6. Espera a tus amigos preguntando qué fue lo que enviaste. ¡Listo!

El código puede ser descargado desde este enlace.

Anuncios

Bot para chat de Facebook

Estándar

NOTA: El código aquí no funciona más. Ve a este enlace para una versión actualizada.

Muchas veces necesitamos comunicar algo a todos nuestros contactos en Facebook. Por ejemplo, para celebrar nuestra fiesta de cumpleaños, salir a pasear un rato, o tal vez para un evento masivo.

Pero sabemos que crear un “evento” en Facebook no es lo mejor: nadie los ve (me incluyo). Facebook se tomó la molestia de colocar a la barra lateral su panel de eventos, sabiendo que cuando visitan el sitio, la mayoría ve al centro. No sé lo que pensaría su creador, pero bueno, eso no es de mi incumbencia.

Ahora, ¿de qué forma hacemos llegar nuestro mensaje a todos nuestros amigos? Pues de ninguna. Siempre verás que cuando creas un evento, quienes primero lo ven son los que están online. Entonces, ¿para qué enviar a los demás el mensaje si ni siquiera lo van a ver?

Bueno, dejando ya de criticar a Facebook. Muchas veces me vi en aprietos al querer comunicar algo a todos los conectados, y tuve que ir de ventanita en ventanita haciendo “Ctrl+C“, “Ctrl+V” en cada uno de los campos. Y si tengo 40 conectados, créanme que no es nada bonito cansarse tocando tanto el teclado sólo para eso.

Vi en varios foros alguna solución al respecto, y veo que se quedaron con el Facebook del año 2011 (23 de abril y 10 de junio). La verdad me dispuse a probar cada uno de ellos. ¡Ninguno me funcionó! Se complica tanto la cosa cuando intentan hacer expresiones regulares y uno no entiende absolutamente ni mierda nada.

¡Venga el código!

Visto esto, y con la necesidad de informar masivamente, es que decidí hacer algo yo mismo. Pues con las experiencias que tengo viendo código en Internet, supe que no iba a encontrar algo que acertara. ¡Y pues aquí tengo un código JavaScript que funcionará para comunicar a todos los conectados del chat, a modo de bot para chat de Facebook!

/**
 * Send a message to all your online Facebook contacts
 *
 * @author Bryan Horna &lt;bryanjhv@gmail.com&gt;
 * @version 1.0
 */

// Your message
var message = &quot;Hi! I'm trying my new Facebook Chat Bot.&quot; +
&quot; Would you like how to build your own?&quot; +
&quot; Go to https://bryanjhvtk.wordpress.com/2013/12/02/bot-chat-facebook/&quot;;

// Only load jQuery if it isn't present yet
if ( !window.jQuery ) {
  var _jQ = document.createElement( &quot;script&quot; );
  _jQ.setAttribute( &quot;type&quot;, &quot;text/javascript&quot; );
  _jQ.setAttribute( &quot;id&quot;, &quot;_jQ&quot; );
  _jQ.setAttribute( &quot;src&quot;, &quot;//code.jquery.com/jquery-1.10.2.min.js&quot; + &quot;?r=&quot; + ( new Date() ).getTime() );
  document.getElementsByTagName( &quot;head&quot; )[ 0 ].appendChild( _jQ );
  _jQ.onload = function() {

    // If jQuery is now loaded, send the message
    sendAll( message );
  };
}

// When DOM is ready for work
var sendAll = function( msg ) {
  jQuery( document ).ready(function( $ ) {

    var fb_ = &quot;https://m.facebook.com&quot;;

    // Get all online contacts
    $.ajax({
      url: fb_ + &quot;/buddylist.php&quot;,
      success: function( src ) {
        var buddies = $( &quot;.buddylistItem a&quot;, $.parseHTML( src ) );
        for ( var i = 0; i &lt; buddies.length; i++ ) {
          var oneBuddy = $( buddies[ i ] ).attr( &quot;href&quot; );
          var fields = {};

          // Get contact by contact
          $.ajax({
            url: fb_ + oneBuddy,
            success: function( buddyPage ) {
              var form = $( &quot;#composer_form&quot;, $.parseHTML( buddyPage ) )[ 0 ];
              var inputs = $( &quot;input&quot;, form );
              for ( var j = 0; j &lt; inputs.length; j++ ) {
                fields[ $( inputs[ j ] ).attr( &quot;name&quot; ) ] = $( inputs[ j ] ).attr( &quot;value&quot; );
              }

              // But &quot;Reply&quot; button isn't important now
              delete fields[ &quot;send&quot; ];

              // Add our message
              fields[ $( $( &quot;textarea&quot;, form )[ 0 ] ).attr( &quot;name&quot; ) ] = msg;

              // Now, send the POST message
              $.ajax({
                url: fb_ + $( form ).attr( &quot;action&quot; ),
                type: &quot;POST&quot;,
                data: fields,
                success: function( wasSent ) {

                  // Do what you want here
                  alert( &quot;Message successfully sent to &quot; + oneBuddy.match( /[0-9]+/i ) + &quot;.&quot; );
                },
                error: function( code ) {
                  // Handle message not sent
                }
              });
            },
            error: function( code ) {
              // Handle get one buddy failed
            }
          });
        }
      },
      error: function( code ) {
        // Handle get buddies list failed
      }
    });
  });
};

// If jQuery has loaded, send now
sendAll( message );

Explicación del código

El código aquí expuesto aún está en fase beta, por lo que no garantizo su funcionamiento hasta ver resultados en otros usuarios. Pues tengo Facebook en inglés, y tal vez cambie algo, pero no creo que mucho. De todas maneras, explico su funcionamiento:

  • Primero que nada, verificamos si jQuery ya está cargado en la página (tal vez algo innecesario, porque Facebook no lo usa, o al menos nunca lo pude apreciar, pero tal vez también usas Greasemonkey y algún script ya lo cargó).
  • Luego se crea la función sendAll(), la cual como indica el nombre, envía el mensaje a todos los conectados. Dentro de ella, podemos destacar:
    • Se hace una petición al sitio móvil de Facebook en la pestaña de contactos.
    • Se parsea con jQuery el HTML obtenido con el GET, a fin de obtener cada ítem que aparece en dicha lista en el momento de la petición.
    • Iniciamos un bucle, a fin de ir enviando contacto por contacto el mensaje. Por ello, si tienes muchos contactos, tal vez sientas que el script se pone un poco lento. Es normal, tampoco quieras que XMLHttpRequest sea de gran velocidad como Comet o XMPP.
    • Obtenemos el enlace de cada contacto, pues ese es el que nos llevará a la página del usuario y permitirá obtener los campos del formulario de envío de mensajes móviles.
    • Hacemos una segunda petición GET, esta vez al enlace de cada contacto. Si ya tenías un historial de conversación, te lleva a una página (el script no hace eso, la redirección es automática). Sino, te lleva al enlace que se colocó.
    • Iniciamos buscando los campos que hay en el formulario, luego de parsear la página HTML con jQuery. Todos estos son guardados en el objeto JavaScript “field”. Luego de eso, eliminamos la clave “send”, pues es la correspondiente al botón de submit del formulario, y no nos interesa si enviaremos la petición vía POST.
    • Finalmente, hacemos una petición del tipo POST a la dirección obtenida del “action” del formulario (verás que varía si ya tienes historial de conversación o no). Los datos enviados son los que están en “field”, incluido nuestro mensaje.
  • Y finamente se hace la llamada a la función.

Cabe destacar que aún falta optimizar un poco esto, para que tal vez haga el trabajo más rápido, o haga menos peticiones AJAX y se reduzca un gran número de variables, o tal vez usando expresiones regulares en vez de jQuery. Si logro mejorarlo, iré publicando las actualizaciones.

Además, faltaría tener la capacidad de seleccionar los contactos a los que quieres enviar el mensaje, pues tuve que disculparme con muchos de mis amigos por los mensajes que les llegaron mientras probaba en mi cuenta. El script funciona hasta el día de hoy, sin saber su funcionamiento o validez en un futuro, pero asegurando que si ya no sirve, lo actualizaré.

Dime en los comentarios si te logró funcionar, para así poder publicar el código como un script en Greasemonkey.

P.D.: En cuanto tenga tiempo, lo subo a un servidor para que lo puedan incluir sin abrir la consola del navegador (F12), sino en la barra de direcciones. Además, poder pasarle como parámetro a la URL el mensaje que se quiere enviar, en lugar de modificar el código.

Actualización al 03/12/2013

Anduve probando en varias cuentas de Facebook de mis amigos, en la página web para escritorio, y lamentablemente no se envían los mensajes, se complican las conexiones AJAX hasta lograr perderse. Luego, hice un diagnóstico y concluí en que se debe ejecutar este código en una ventana abierta con la página móvil de Facebook (https://m.facebook.com) y ponerlo en la consola.

También tuve un problema en Google Chrome con la extensión Tampermonkey, así que tuve que ejecutarlo en Mozilla Firefox, por lo que debe ser ejecutado en Mozilla Firefox para funcionar.

compareTo en JavaScript

Estándar

Todos alguna vez hemos estudiado los métodos de ordenamiento, si hemos visto lenguajes de programación. Y, los que lo hemos visto, nos podremos dar cuenta que no son difíciles de entender y aprender, siempre y cuando no nos den datos del tipo String. Esos sí que son problemáticos en su totalidad. Pues, uno al comparar dos números, puede establecer una relación de orden fácilmente. Ahora, aplica eso en una cadena. Puedes obtener el código ASCII del primer carácter, pero si te muestro “ANALGÉSICO” y “ANALÓGICO”, ¿qué haces?

Pensando en esto, es que decidí ver el código fuente de la clase String de Java, viendo cómo trabaja el compareTo. La verdad en un momento pensé que sería algo grande, y lo fue. Creo que se declaran variables hasta por las puras. Menos mal que en JavaScript no es necesario convertir un String a char[], sino de una sola usando String.charAt().

Entonces, aquí presento el código del prototipo “compareTo” de String, codificado en JavaScript:


String.prototype.compareTo = function( cadena ) {
  cadena += "";
  var l1 = this.length,
  l2 = cadena.length,
  limite = Math.min( l1, l2 ),
  k = 0,
  c1,
  c2;
  while ( k < limite ) {
    c1 = this[ k ];
    c2 = cadena[ k ];
    if ( c1 !== c2 ) {
      return c1.charCodeAt( 0 ) - c2.charCodeAt( 0 );
    }
    k++;
  }
  return l1 - l2;
};