Connecting Java Devices and

online dashboards with MQTT

Bringing M2M to the web with Paho
Connecting Java Devices and
online dashboards with MQTT
Your presenters
Dominik Obermaier
@dobermai
Christian Gtz
@goetzchr
Agenda
!
Introduction & Setup
!
What is M2M, IoT and MQTT?
!
Build a device simulator with Eclipse Paho in Java
!
MQTT in the web browser
!
Build a web dashboard with Paho JS
!
Summary and outlook
!
M2M & MQTT
!
Using MQTT in Java applications with Eclipse Paho
!
Using MQTT in the browser with websockets
!
Building Web Dashboards with real-time push capabilities
with MQTT
What you will learn today
Use case
!
Device with sensors in your garden or balcony
!
Frequent live updates on web dashboard
!
The device should be controlled from a web dashboard
!
Unreliable (cellular) network
Big Picture
!
HiveMQ MQTT Broker
!
Modern web browser
!
Eclipse Kepler Java EE - Edition *
Required Software
* Or any other Java Eclipse with WTP installed
!
https://github.com/dc-square/mqtt-with-paho-eclipsecon2013
Source Code
!
Download Kepler for your OS
http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/keplersr1
!
Import the source code for the simulator & web dashboard
!
File | Import | Existing Projects into workspace
Installation Eclipse
!
Download our prepared archive (includes websockets conguration and
MQTT Message Log plugin)
!
http://www.dc-square.de/hivemq-eclipsecon.zip
!
Windows:
!
Double click on bin/run.bat in the extracted folder
!
Linux/BSD/MacOSX:
!
Open Terminal and change to the extracted folder
!
chmod 755 bin/run.sh
!
./bin/run.sh
Installation HiveMQ
2013-10-26 22:12:54,311 INFO - Activating $SYS topics with an interval of 60 seconds
2013-10-26 22:12:54,469 INFO - Starting on all interfaces and port 1883
2013-10-26 22:12:54,482 INFO - Starting with Websockets support on all interfaces and port 8000
2013-10-26 22:12:54,484 INFO - Loaded Plugin HiveMQ MQTT Message Log Plugin - v1.0.0
2013-10-26 22:12:54,488 INFO - Started HiveMQ 1.4.1 in 3075ms
Verify HiveMQ Installation
MQTT in M2M & IoT
Technology that
supports wired or
wireless
communication of
devices
M2M
M2M & IoT
M2M
Internet of Things
RFID
Bluetooth
Barcode
Non-IP
Why care about M2M/IoT?
0 billion
12.5 billion
25 billion
37.5 billion
50 billion
2003 2010 2015 2020
Devices
per person:
0,08 1,8 3,4 6,5
Source: http://www.cisco.com/web/about/ac79/docs/innov/IoT_IBSG_0411FINAL.pdf
World Population Connected Devices
!
Not optimized for mobile
!
Only point-to-point communication
!
(partly) too complex for simple data
!
Too verbose
!
No reliable exchange (without retry logic)
!
No Push Capabilities
Disadvantages of HTTP
MQTT
1999 2010 2013 2014
Arlen Nipper &
Andy Stanford-Clark
invent MQTT
royalty free
OASIS TC
formed
MQTT becomes
Standard
History
!
Simple
!
Quality of Service
!
Lightweight & bandwidth efcient
!
Data-agnostic
!
Continuous session aware
Goals
Features
!
Last Will and Testament
!
Retained Messages
!
Persistent Sessions
!
Quality of Service
!
0: At most once
!
1: At least once
!
2: Exactly once
!
Different implementations are available
http://mqtt.org/wiki/doku.php/brokers
!
H
!
High performance MQTT broker
!
Open Source Plugin System
!
Native Websockets Support
!
Cluster functionality
!
Embeddable
MQTT Broker
Prominent Examples
IN ACTION
Oil pipeline
http://www.eurotech.com/en/press+room/news/?506
Facebook Messenger
https://www.facebook.com/notes/facebook-engineering/building-facebook-messenger/10150259350998920
!
Protocol implementations for M2M & IoT
!
Focus on MQTT
!
C, C++, Java, JavaScript, Lua, Python
!
Eclipse Incubator Project
Paho Project
11/2011 03/2012 04/2013 11/2012 08/2013
contribution of IBM
is announced at
EclipseCon Europe
rst version
in GIT
Release
v0.1
History - Paho Java
Release
v0.2
Release
v0.4.0
Part 1: Simulator
Focus
!
Report Status of Device
!
Send Data to MQTT Broker periodically
!
Temperature
!
Weather
!
Glaze Warning
!
Change interval if requested by MQTT message
Features
Under the Hood
Exercise I
MqttClient client = new MqttClient(BROKER_URL, CLIENT_ID);
client.connect();
client.publish(TOPIC, MESSAGE, QoS, true);
client.setCallback(new SubscribeCallback(this, TOPIC));
client.subscribe(TOPIC, QoS);
Paho API
Connect
client = new MqttClient(BROKER_URL, CLIENT_ID, new MemoryPersistence());
client.connect();
!
Broker URL e.g. tcp://localhost
!
Unique ClientID
!
Persistence Provider
Extended Connect
client = new MqttClient(...);
final MqttConnectOptions mqttConnectOptions = new MqttConnectOptions();
mqttConnectOptions.setWill(TOPIC, "message".getBytes(), 2, true);
client.connect(mqttConnectOptions);
!
ConnectionOptions
!
setWill
!
Topic
!
Message
!
Quality of Service Retained Flag
Publish
client.publish(TOPIC, "message".getBytes(), 2, true);
!
Topic
!
Message
!
QoS
!
Retained Flag
Subscribe
class SubscribeCallback implements MqttCallback {
@Override
public void connectionLost(Throwable cause) {
}
@Override
public void messageArrived(String topic, MqttMessage message)
throws Exception {
System.out.println(topic);
System.out.println(new String(message.getPayload(), "UTF-8"));
}
@Override
public void deliveryComplete(IMqttDeliveryToken token) {
}
}
client.setCallback(new SubscribeCallback());
client.subscribe(TOPIC, 2);
!
Connect to your local HiveMQ broker
!
Choose unique client id
!
Broker URL tcp://localhost
!
Use simple connect (without LWT)
!
Connect
Do it Yourself !
Start at S1_Start
!
Set Last Will and Testament
!
Topic: eclipsecon/status
!
Message: ofine
!
Publish message on eclipsecon/status after connect
!
Use retained message
Add Status of Device
Start at S2_Publish_Status_Messages
!
Use Random Temperature Generator
!
Query for new value every 5 sec
!
Publish to eclipsecon/temperature
Publish Temperature
Start at S3_Publish_Temperatur_Periodically
!
Subscribe to eclipsecon/interval
!
Implement callback to change the interval on new
message arrival
!
Use interval in temperature publish routine
Adjust Interval
Start at S4_Subscribe_to_Interval_Update
!
Use RandomGenerator
!
Publish to eclipsecon/weather
Weather Status
Start at S5_Add_Publish_Weather
!
Use RandomGenerator
!
Publish to eclipsecon/glaze
Glaze Warning
Start at S6_Add_Publish_Glazed_Warning
Simulator completed!
complete simulator located in S7_Complete_Solution
Part II: Web Dashboard
Focus
Websockets
!
Full duplex communication over a single TCP connection
!
Implemented in most modern web browsers
!
Websockets over TLS (secure websockets) possible
!
Allows sub protocols
Advantages Websockets
!
Real Push to the browser
!
No Request / Response (like classic HTTP)
!
Server can actively work with the connection
!
Minimum overhead
MQTT over Websockets
!
Every browser can be a MQTT device
!
Queuing of messages with QoS > 0
!
Retained messages
!
LWT
!
Persistent Sessions
How does it work?
* Nowadays Javascript can also run on the server with node.js.
Javascript Basics I
!
Dynamically typed
!
Runs in the browser *
!
Interpreted language
!
Multi-paradigmal
!
Powerful function concept
Javascript Basics II
var myObject = {
sayHi : function() {
console.log('hi');
},
myName : 'EclipseCon'
};
myObject.sayHi();
Javascript Basics III
var greet = function(person, greeting) {
var text = greeting + ', ' + person;
return text;
};
console.log(greet('EclipseCon','Hi'));
Paho.JS
!
MQTT Javascript implementation
!
Designed for usage in browsers
!
Contributed by IBM in 2013
!
Very well structured and documented source
The Dashboard
Technologies & Libraries
!
HTML
!
Javascript
!
CSS
!
JQuery
!
Eclipse Paho.js
!
Twitter Bootstrap
!
JustGage
!
WeatherIcons
Project Structure
Part 1 - Do it yourself!
!
Add a Gauge for the temperature
!
Add a placeholder weather icon
!
Add a control panel section
!
Client online/ofine status display
!
Simulator interval reconguration form
Start at Eclipse Project W1_Start
Part I - Gauge
Part I - Gauge
<div id="gauge"
class="gauge"></div>
Part I - Weather Icon
Part I - Weather Icon
<i id="weathericon"
class="wi-cloud-refresh
weather-icon"></i>
Part I - Control Center
Part I - Control Center
<div id="client_connected"
class="alert alert-success hide">
</div>
<div id="client_disconnected"
class="alert alert-danger hide">
</div>
Part I - Control Center II
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group" style="width: 150px">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
<input id="intervalinput" type="text"
class="form-control" placeholder="seconds">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" onclick=
s "publishInterval($('#intervalinput').val())">
Update Interval
</button>
</div>
</form>
Part II - Do it yourself!
!
Add the Paho.js library
!
Implement a basic subscriber
!
Connect to local broker
!
Subscribe to eclipsecon/status
!
Alert on message arrival topic + payload
!
Alert on connection failure
Start at Eclipse Project W2_Widgets
Part II - Paho.js API I
var client = new Messaging.Client(
"hostname", 8000, clientId");
Create a MQTT Client Object
Connect to the MQTT broker
client.connect(options);
Part II - Paho.js API II
Subscribe to a topic
client.subscribe("#",options);
client.onMessageArrived = function (message) {
var topic = message.destinationName;
var message = message.payloadString;
};
Get message contents
Part III - Do it yourself!
!
Subscribe to eclipsecon/temperature
!
Write a function to refresh the gauge
!
Refresh the gauge when a temperature message arrives
Start at Eclipse Project W3_Using Paho
Part III - Gauge Refresh
gauge.refresh(20.3);
Refresh the Gauge
Convert String to Float
parseFloat("20.3");
Part IV - Do it yourself!
!
Subscribe to eclipsecon/weather
!
Write a function to set the weather icon
!
Possible Payloads: STORM, SNOW, RAIN, CLOUD, SUN
Start at Eclipse Project W4_Temperature_Widget
Part V - Do it yourself!
!
Subscribe to eclipsecon/status
!
Write a function to set connected / disconnected state in
the UI
!
Write a function to publish to eclipsecon/interval
!
Call this publish function when clicking the Update
Interval button.
Start at Eclipse Project W5_Weather_Widget
Part V - Paho.js API
Publish to a topic
var message = new Messaging.Message(interval);
message.destinationName = "topic";
message.qos = 2;
client.send(message);
Part V - Show and Hide Elements
Show Element
Hide Element
$("#element_id").html('My text!').
removeClass("hide").hide().fadeIn("slow");
$("#element_id").addClass("hide").hide();
Part VI - Do it yourself!
!
Subscribe to eclipsecon/glaze
!
Add glaze alert to UI if there is a glaze warning
!
Remove glaze alert from UI if there is no glaze alert
Start at Eclipse Project W6_Control_Center_Widget
Dashboard completed!
complete dashboard located in W7_Glaze_Warning
Outlook:
Real world applications
Limitations of the current implementation
!
At this point there is no real data backend
!
Only live data
!
No historical data can be shown easily (e.g. charts)
!
No authentication & authorization
!
Secure Transport (TLS)
Potential Improvements
!
Data persistence HiveMQ plugins
!
SQL
!
NoSQL
!
ESB
!
Authentication and Authorization HiveMQ plugins
!
Integrate into existing applications & infrastructure
Q & A
Thanks!