Sunday, 16 March 2014

My code - Facebook notification when friend is online, a Javascript solution

Suppose that due to personal reasons, you want to maintain contact with a certain girl friend of yours (a friend who is a girl but is not your girlfriend (yet) and never will be). Suppose also that this girl doesn't have a Skype account, and the only way you can chat with her is through Facebook's chat. Suppose that she doesn't access her Facebook often.

Faced with this hypothetical situation, you meet despair by having to babysit your Facebook sidebar waiting for your friend to be online.

However, suppose you are a programmer. What do you do? Why, of course you reverse-engineer Facebook's HTML to make a Javascript contraption to check status changes every 10 seconds and then alert you when she finally does enter.

I could have written "suppose you are me", for I had this problem and I solved it in this exact way. But then you would have to suppose you are a depressive and lonely medical student, and this would make you sad. I don't want the 20 or so people who read this to be sad.

Back to my code. The source file (status.js) is here. To use it, follow the instructions:

  1. Execute the code contained in the source file in your Facebook tab
  2. Open the developers' console of your browser (Ctrl-Shift-K for Firefox, Ctrl-Shift-J for Chrome)
  3. From the console, call a function called "WatchFriend" with your friend's name (e.g. WatchFriend("John Doe");). You can call this function more than once, to watch multiple friends. This name must be exactly as it appears on the sidebar listing.
  4. When your friend e.g. John Doe accesses his Facebook account, your Facebook page will play an air raid siren sound and show an "alert" box telling you who's online.
The first point might require some explanation. How to execute the code contained in the source file? I don't know if there's another way to do this, perhaps there is, even a more practical one. Maybe integrating my code with a Chrome/Firefox plugin/addon/extension, whose APIs I haven't researched yet. But usually I open the file, select everything, copy and paste on the web console and hit enter.

Then there's the question, "How does it work?". I'll explain. My solution is quite heavy on the workarounds.

1.To retrieve someone's status
When one of your friends is online on Facebook, his name will appear on the sidebar list to the right of the screen together with a green circle after it. My code crawls through this list looking for your friend's name. Then it does some DOM (Document Object Model) magic to see if the green circle is there. This DOM magic I engineered from Facebook's HTML, it uses tag class names to find the things it's looking for. Yes, this is horribly ugly.

2.To check for status changes
After WatchFriend is called the names will be stored on a global array called friendsList and their stati on another global array called friendsStatorum (status is a latin word of the second declension, therefore the plural for the nominative case ends with "-i" and the plural for the genitive case with "-orum" in the same fashion as the singular nominative ends with "-u", I am a language conscientious programmer). The first time WatchFriend is called it sets a timeout to check every 10 seconds whether those stati have changed. If they have a function is called accordingly to notify the user of the change. Currently only offline-online transitions are handled, however modifications of this behavior would be trivial.

3.To notify the user
The notification occurs not only through a boring and tasteless alert box. Full exploration of audiovisual resources is important in contemporary programming. It also makes use of the HTML5 Audio API to play this lovely air raid siren sound. You can then say to your friend that his presence really touched you, as if you were sleeping profoundly in 1941's London, the lovely summer night suddenly broken by the Luftwaffe dropping a few bombs right on your head.

This entire solution will bring pain to the eyes of the most sensible developers. I wish I could offer it in a more accessible way, maybe a Chrome/Firefox extension/plugin/addon or even a Facebook app. I will consider studying Chrome's or Facebook's API to see what I can do, however my time is scarce. If any motivated fellow programmer wishes to build upon my effort, I'd love to hear from him. My code's shared through the Creative Commons Attribution-ShareAlike 3.0 Unported License.


Feel free to comment on any suggestions, insights or similar projects you may have.