Mobile and Web Messaging

Chapter 7. Web Messaging with MQTT

In this chapter, we will write a web application that sends and receives messages using the MQTT protocol over HTML5 Web Sockets (Figure 7-1).

Figure 7-1. Diagram of the Motions web application that displays data for two devices

Note

Throughout the chapter, we will show all the code required to run the application. The whole application code can be retrieved from the GitHub repository in the mqtt/web/ directory.

Eclipse Paho JavaScript Client

Earlier, we mentioned that iot.eclipse.org provides a public MQTT broker that we use for our MQTT applications. Eclipse also provides a variety of MQTT clients for different languages and platforms.  In particular, it has a JavaScript client for web browsers, which uses HTML5 Web Sockets.

The source code of the project is hosted in this Git repository.

Bootstrap the Motions Web Application

As we explained in “Motions Application Using MQTT”, this web application will display on a web page the motion data sent by the devices using the Motions iOS application written in . Additionally, the web application will also be able to send alert messages to the devices.

It will be a very simple one-page web application that can be run from a web server serving static pages. It does not require any server-side runtime as all the code will be executed inside the web browser using JavaScript.

The device motions data ...