JavaScript Web Workers: Motörmouth is a Twitter Client

About a month ago, I released jQuery.Hive/Pollen, a plugin + library for developing jQuery applications that use Web Workers. And as per usual, the number one question is “what can I do with workers?”.

With that in mind, I decided that at least every month (and hopefully even more frequently then that) I would produce and publish a basic application that made use of jQuery.Hive and jQuery.Hive.Pollen.

Aside from that requisite, I set another rule – each application that I create should be something that traditionally would cripple the browser.

Motörmouth

Motörmouth is currently an ugly bastard that simply cranks out a live Twitter stream based on a user specified search term. Go ahead, type “http”, or “omg” or “lol” into the form… you’ll see how the app got named. But what just happened?

To start it off, I obnoxiously listen to keyup events on the input field, each time firing a message to worker thread telling it to start querying Twitter’s search API. Unfortunately, it’s not that straight forward: Workers can’t create anything in the DOM so there is currently no easy way of making JSONP style requests (coming soon!), so another level of latency is added when we have to call proxy.php first. Proxy.php makes a request to Twitter for our term and returns the results to the worker, which then iterates the results, sending one at a time back to the rendering process – we dont want to bog the client down with a huge data set.

All the client has to do now is add one post at a time, keeping it responsive. Meanwhile in the worker process, it fires one AJAX request after another, checking for new tweets based on your search term.

Then what? Repeat!

Unlike the Twitter home timeline that will update you with a little notice that says “5 new tweets…”, Motormouth is capable of just showing them to you. Want to see more in your timeline? Adjust the slider to show up to 100 posts (this could be way more, but 100 seemed to be a good place to cap it)

The Timeline slider also acts as a cleanup crew – Motörmouth will only maintain the number of elements set with the slider. If you set it to ten, then only ten elements will exist in the timeline, older items are removed.

So let’s get to it then…

Motörmouth (might exceed twitter whitelist allocation – if so, it will not work properly

For those interested, here’s what the Worker script file, using jquery.hive.pollen.js looks like:

motormouth-worker.js

importScripts('jquery.hive.pollen.js');

$(function (data) {
  // message received from rendering process

  $.ajax.get({
    url:      'proxy.php',
    data:     $.param(data),
    dataType: 'json',
    success: function(jsonObj) {

      $.each(jsonObj.results, function (i, result) {
        // send each result alone
        $.send(result);
      });
    }
  });

});