Facebook is now using MQTT

Recently I discovered Facebook is now using MQTT, the IoT protocol in its Messenger and Instagram app in an effort to lower battery usage.

From IBM (https://www.ibm.com/developerworks/community/blogs/mobileblog/entry/why_facebook_is_using_mqtt_on_mobile?lang=en)

Why Facebook is using MQTT on mobile

We can all relate to the concept of protocols, sensors and meters that are used to measure and analyze data. But what does Facebook have to do with that? If you are curious, keep reading this blog post to learn more how Facebook took a huge advantage by using Message Queue Telemetry Transport (MQTT).

image

 

A little history on MQTT

Back in time when Roy Fielding came out with his dissertation introducing the Representational State Transfer (REST) concept, people paid attention mainly because (a) it showed a different and simpler way of having websites, databases and other systems interact and (b) it came from one of the HTTP specification authors.
In 1999, Andy Stanford-Clark of IBM collaborated with Arlen Nipper of Eurotech to create a specification for a new messaging protocol, MQTT. Being dissatisfied with the current technologies, both were working on projects to help get remote data onto disparate devices. They were seeking to leverage communications among devices using reduced network bandwidth and providing assured message delivery in a very constrained environment with (a) high latency, (b) devices that were limited in capacity and power and (c) expensive and even unreliable networks. Think of it as a messaging protocol to be used for sensors, meters, actuators and so on. MQTT is all about machine to machine, or M2M, since it is a specification to cover device communications.

That said, both Roy Fielding and Andy and Arlen were searching for something simpler than what was out there. And don’t get me wrong—I am not comparing REST and MQTT as specifications or by their applicability; I just mean to highlight ideas that made communications simpler.

image

MQTT and the Internet of Things

MQTT, specifically, was a great fit for the new buzzword Internet of Things, which brings all sorts of devices onto the same network. For example let’s think of the hundreds of sensors inside a car, or as part of oil and gas plant, or even temperature meters, satellites and so on—all of them collecting and pushing data outside. Using MQTT, these devices (or sensors, if you prefer) can now be smart enough to share their data in the network, making it possible to have smart systems taking actions based on the data shared by these constrained devices.

A nice case study on this is shown by Red Funnel, a UK Ferry Service that tweets its passengers about their ferry’s arrival and departure based on information gathered from sensors and processed by data analytics systems.

With the popularity of smartphones, a new applicability was envisioned for these sorts of devices. MQTT.org presents a list of articles covering MQTT on the Android platform.

MQTT for Facebook’s messaging app

An amazing new MQTT use case came out in 2012, when the Facebook software engineer Lucy Zhang announced through the Facebook blogsome details of the new Facebook Messenger app that was available for smartphones, including both Android and iOS devices.

Lucy said Facebook had to rebuild a new messaging mechanism for their app, this time using MQTT to have assured and faster message delivery. Not only that, but as for any smartphone app, bandwidth usage and battery life are real concerns that had to be overcome as they started to use MQTT as their messaging protocol.

Another highlight of the Facebook Messenger app was the possibility to have individual chat sessions between two people or a group chat, thanks to the publisher-subscriber nature of MQTT.
image

Using MQTT, Facebook brought to the game a fast and reliable messenger application—small and lightweight, a battery and cost saver—that would function well even with the varying Internet connections available across the world.

Under the hood: how your friends might have updated their status via “mobile devices”

Recently I noticed a friend keeps on updating his status which appears to be coming from the most trendy mobile devices on the market right now.

Shiny stuff

He could have borrowed his friend’s devices though, but since he is watching the World Cup alone I guessed there was something abnormal about it, so I decided to look for some sort of application that allow you to change your status with those neat little “via Facebook for iPhone”, “via Facebook for Blackberry” etc.

I found this

Status update service

It worked and I was able to get those appealing statuses, but what bothered me is, this seems all too simple, it seems to utilize some sort of Facebook API but previously, when I referenced the Facebook wiki for Stream writing and link posting, I found no parameters that would allow you to edit the “via…”. And the site above didn’t show how it did that, so I decided to dig in. Time for Ctrl+U (view source).

A bunch of Iframes (notice the capitalization, it's not iFrame :p)

That seemed simple, it’s just a bunch of iframes referencing to some sort of Facebook’s live-chat like service. It does say “event” so I tried to create an event but found no options to create such a widget. I tried to search for Facebook connect instead and found this post.

Step 1 – Create the App in Facebook

First things first. Go here to create the App in Facebook: http://www.facebook.com/developers/createapp.php. Give it a name:

fbc_cclive2

Then, add all the necessary info that you can, including logos, icons, user-facing URLs, etc on the “Basic” tab:

fbc_cclive3-620x440-Cropped

You technically don’t have to fill out really anything except this next part.

Go to the “Connect” Tab on the left and fill out this important information there:

fbc_cclive4

Make sure you get this right!

And that’s it! Make sure you write down (or copy) your Application ID, as you’ll need that next:

fbc_cclive6

Step 2 – Create the iFrame, Style, and Finish!

fbc_cclive_styleHonestly, most of the hard work is done already!

All you have to do is copy some iFrame code into your template or website with the Application ID, adjust some of the width/height to fit correctly, and you’re done!

As you can see, I’m adding the code to the bottom of the page, just above the Footer. I’ve added a “fbc” <div> class to styling to make sure it’s centered correctly, etc.

You don’t have to do any of this, of course, and most people won’t have to do anything with CSS styling.

fbc_cclive_codeAnd here’s what the code looks like in my footer.php file (I’m using WordPress to power this site).

As you can see, I’ve adjusted the width to be 983 pixels wide (matching my div class) and the height is 500 pixels.

You can, of course, change all of this to whatever you’d like! The only important part for you to change is the “app_id” value, which is currently set to 94203137849, which is my application ID.

You don’t need the <div> like that post instructed, it’s just for styling, what you really need is the url inside the <iframe>.

It involves creating a Facebook application, which has evolved since the last time I touched it (to create a voting application). It doesn’t even require you to write a single line of FBML like before, but just point-and-click. The trick leverages the fact that the Facebook applications for devices utilize the same framework, and hence by making your own application, you con edit its name to modify the “via…” part to anything you’d like. Here, I made an application with the name “iPhone 4”. Click here to try it.

Now you know what to do when iPhone 5 prototypes leak out ;))

Buying an iPad is not the only way to impress your folks ;))

Facebook block workaround (and no, it doesn’t involve DNS)

image1

The reason [Source]

It has been a bit hard to reach facebook lately. For some ISP like Viettel and FPT, a DNS change is all it takes to resolve facebook’s IP and restore access to the site. For some other, like EVN and VNPT, here’s what you got

image2

Changing DNS won’t work, which means the rats must have bitten something else. You are forced to use slower methods to overcome this, which could heavily impact your ability to play happy farm 🙁

That’s until I read that facebook still work with SSL (e.g when you replaces http in the address with https you are able to login), but it reverts to http the next time you click a link and you’ll have to do it again. This is especially annoying with games, which uses a lot of redirects to show their ads and stuff (damn, they are greedy).

And so I made something to do the hard work for me, so that I won’t miss the daily login bonuses :p. It’s utterly simple and a bit hard to use  but it does the job.

The code

Make a form that looks like this

image3

Write these to the form’s code

public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        /// <summary>
        /// Executes when a request is made, it will fix the protocol or anything in
        /// the address if the first check box is checked
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void webBrowser1_Navigating(object sender, WebBrowserNavigatingEventArgs e)
        {
            string Address = e.Url.ToString();
            // Facebook uses some complicated redirection method so we'lll have to ignore this
            if (Address.Contains("redirectiframe.html"))
                return;
            // If it's not from facebook or facebook's cache, just ignore it
            if (!Address.Contains("facebook") && !Address.Contains("fbcdn"))
                e.Cancel = true;
            else
                if (checkBox1.Checked && Address.Contains(textBox1.Text))
                {
                    e.Cancel = true;
                    webBrowser1.Navigate(Address.Replace(textBox1.Text, textBox2.Text));
                }
        }

        /// <summary>
        /// Load facebook on start
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Form1_Load(object sender, EventArgs e)
        {
            webBrowser1.Navigate("http://www.facebook.com");
        }

        /// <summary>
        /// Fixes link after the document is loaded, may break some pages
        /// and creates an endless loop on login so it's not enabled by default
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void webBrowser1_Navigated(object sender, WebBrowserNavigatedEventArgs e)
        {
            if (checkBox2.Checked)
                webBrowser1.DocumentText = webBrowser1.DocumentText.Replace(textBox3.Text, textBox4.Text);
            toolStripTextBox1.Text = webBrowser1.Url.ToString();
        }

        /// <summary>
        /// The go button
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void toolStripButton1_Click(object sender, EventArgs e)
        {
            webBrowser1.Navigate(toolStripTextBox1.Text);
        }

        /// <summary>
        /// Show/hide options
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void toolStripButton2_Click(object sender, EventArgs e)
        {
            groupBox1.Visible = !groupBox1.Visible;
        }

        /// <summary>
        /// Update load progress
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void webBrowser1_ProgressChanged(object sender, WebBrowserProgressChangedEventArgs e)
        {
            toolStripProgressBar1.Maximum = (int)e.MaximumProgress;
            toolStripProgressBar1.Value = (int)e.CurrentProgress;
        }
    }

Usage

Open options, check the first check box and you’ll be able to login, open applications and view photos. Should something breaks, try uncheck the check box and press Go to reload the page.

Choose no when IE asks you this, as images are loaded with http

image4

The second check box corrects the links and images on the page to https, only use this when images are not loading

Alternatively, you con use this to access facebook with its ip address. Try navigate to 69.63.184.143 and have it replace http://www.63.184.143 with https://69.63.184.143 (facebook removes the leftmost part before the first . and replaces it with www when you login)

Here’s the executable