Display the Arduino Data on a mobile web page is a real Challange

Sending the data from Arduino is easy, showing it on the mobile phone web page is not.

I beautify my temperature-humidity reader this week and add a QR code to it, So my phone could easily open the webpage by scanning it(also fit the phone screen size).

In this example, all the data come from the serial port and push to the website by a web socket. This brings me a problem when the phone opens the web page, the data does not company with the page.

Another problem is this webserver now is running in a local networking environment. If I want to share my warming room temperature with my friend by the QR code, that is impossible.

Put it online become important.

HTTP

First, came to my mind is the HTTP server, I do some research about how to build a web server that can receive and send HTTP data. Express and socket.io seem is to be a good choice and I start a glitch server with express support. There are still some technical issues that have not been resolved.

MQTT

After the failure of the HTTP, I put my eyes on MQTT. Which is a lightweight protocol for the devices to communicate through the network. I build a broker on my old Raspberry pi 2, Using the mosquitto MQTT service.

sudo apt-get update
sudo apt-get install mosquitto

And I use the code written by Don Coleman, to send Arduino data to the raspberry pi 2. But the device shows that fails to send out the data.

Connected to WiFi
IP Address: 10.0.0.246
Connecting MQTT broker 10.0.0.231
Connection error -2
Waiting 5 seconds before retrying

Still working pass the data to the MQTT broker.