Demo - You're looking at it!
To demonstrate the flexibility and creativity of Meteor, we've hooked it into this website. The stars you can see appearing at the top of your browser are requests to our site, including your own requests. Each star represents one visitor, and the brightness of the star, the time since their last request (bright stars are the most recent requests). Red stars represent errors, eg. the user has requested a page that doesn't exist, so our server has sent back a 404.
Very cool. How does it work?
The server running meteorserver.org has two IP addresses, and has Apache listening on one of them, and Meteor on the other (both on port 80). Apache's IP is listed in DNS as the A record for meteorserver.org, while Meteor's IP is the A record for data.meteorserver.org.
There is a daemon running on the server which uses the unix utility tail to monitor the access log, like this:
It also has a persistent local connection to Meteor's controller interface, which is listening on port 12345. Any entries that are made by Apache in the log file are picked up by the daemon and reformatted into JSON as follows:
Finally the daemon injects the message into Meteor on a channel called demo, by sending the following command over its connection to Meteor's controller interface:
On the client side, each webpage you load on meteorserver.org includes the Meteor JS client, and a fairly straightforward lump of code for invoking it and subscribing to the demo channel. We're only dealing with one channel and one type of message here so we just need to get Meteor to execute a function whenever a message arrives.
Since the message that we're sending is in JSON (though it's important to stress that it doesn't have to be) it can be reconstructed into a data structure by evaling it. We then have a javascript data object that contains all the parameters of the message, and then we can present the data however we want.
My God, it's full of stars
Which brings us to the starscape you can see above. Though completely unrelated to Meteor, you may also be interested to know how the starscape is made. The challenges were to get the stars to plot randomly within a non-rectangular area (also avoiding the shooting star), to convince certain browsers to display a content element small enough to look like a star, and to make the stars fade in and out appropriately.
The first challenge is solved by dividing the top area of the page into a grid of 15x15px squares. Assuming 60 squares per row, we can number the squares such that a single index number is all that is needed to determine an x and y position. By creating a list of valid squares, leaving out those that correspond with positions where we don't want to plot any stars, an irregularly shaped plot area can be formed. Then it's simply a case of choosing a random square from the list of valid squares, converting the index into an x and y offset, and then adding a random number of pixels between 0 and 15 to each dimension to position the star at a random location within the chosen square.
On the second point, Firefox has no problems at all displaying a 1x1px div, but IE tends to moan about it, so each star is actually three nested block elements. The outermost one is also slightly bigger to give us a decent sized target for mouseovers.
Fading is a bit of a pain given that it requires iterative code and timing, so rather than reinventing the wheel we're using the excellent Jquery library, which makes it ridiculously easy to fade pretty much any DOM element.
Every so often we run an update process over the array of stars and cull off any that haven't made any requests for a while. The expired stars fade to black and are then removed from the DOM. Enjoy!
"Test" stars
We realise that most of the time there won't be hundreds of people actively navigating the site, so just to make sure that there are some stars (other than the one that represents you), our access log monitor also rendomly injects phantom requests from IPs in the range 10.0.0.1 - 10.0.0.10. Just so you know we're not cheating!