Learn about how MQTT and WebSockets can drive dynamic, real-time HTML5 applications. The presentation dives into MQTT topic/payload details for 4 demos and gives tips for designing a scalable, location-based topic structure.
Introducing Microsoftâs new Enterprise Work Management (EWM) Solution
Â
Dynamic Apps with WebSockets and MQTT - IBM Impact 2014
1. Š 2014 IBM Corporation
Dynamic Mobile Apps
with WebSockets and MQTT
2. The Compelling Experience
What makes an application a delight to use?
-⯠Data arrives when you need it, not when you ask for it
-⯠The app provides a collaborative, social experience
-⯠Services are integrated seamlessly together
1
3. HTML5 WebSocket for Real-time
âA conversation on the webâ
" ⯠WebSocket is bidirectional
â˘âŻ HTTP is request/response, WebSocket is a conversation
" ⯠WebSocket is an HTML5 standard
â˘âŻ Cross-domain communication
â˘âŻ Supported by all major browsers
2
http://caniuse.com/websockets
4. MQTT for Mobile Messaging
" ⯠What is it?
â˘âŻ Publish/subscribe messaging protocol designed for mobile and
telemetry devices
â˘âŻ Open (royalty-free), simple, lightweight, easy to implement
â˘âŻ Allows for decoupled applications (âInternet of Thingsâ)
â˘âŻ Quality of service for assured message delivery
â˘âŻ MQTT clients connect to an MQTT broker
" ⯠Where is it?
â˘âŻ Connected vehicles (ex. Sprint Velocity)
â˘âŻ Connected cities (ex. NYPD ESU)
â˘âŻ Connected people (ex. Facebook Messenger)
â˘âŻ ...and everywhere else
3
5. Why MQTT?
" ⯠Publish/subscribe messaging
â˘âŻ Transmit information one to many
â˘âŻ Subscribe to interesting topics
â˘âŻ Distribute small data packets in huge volumes
" ⯠Quality of Service (QoS) for assured messaging
â˘âŻ âAt most onceâ, âAt least onceâ, âExactly onceâ
" ⯠Simple API
â˘âŻ 3 verbs: Connect, Publish, Subscribe (+ Receive)
â˘âŻ Useful features: Last Will and Testament, Retain
â˘âŻ Clients everywhere (40+)
â⯠JavaScript, C, C++, Python, Node.js, Java, Ruby, etc.
" ⯠Lightweight
â˘âŻ 2-byte header, low latency
â˘âŻ Mobile (LTE) = ~100ms, Browser (WiďŹ) = ~50ms (RTT)
4
9. RaceTracker
" ⯠Problem â Marathons are crowded
â˘âŻ Me: âMeet me at mile 17.3 with Gatorade around... 9:00-9:30â
â˘âŻ Wife: â...could you be more specific?â
" ⯠Solution â âRaceTrackerâ
1.⯠Publish location from iPhone
2.⯠Calculate speed/stats in real time
3.⯠Display runner info in a mobile app
4.⯠Live-tweet the race
" ⯠Challenges
â˘âŻ Network congestion (QoS!)
â˘âŻ Wiring applications (pub/sub!)
8
11. 10
OwnTracks (iOS / Android)
â˘âŻ Open-source "location diary"
â˘âŻ Publishes MQTT location data at interval
â˘âŻ http://owntracks.org
" ⯠Pubs
â˘âŻ Location Data (retained)
â⯠RaceTracker/<race>/Person/<runner>
â˘âŻ {
 "_type":"location","tst":"1392569738",
Â
"lat":"30.3019","lon":"-Ââ97.7278",
 "batt":"30","acc":"5"}
Â
" ⯠Subs
â˘âŻ [nothing]
Runner
12. 11
Node.js runtime in BlueMix
â˘âŻ Performs speed calculations on runner data, maintains course
state, outputs events ("runner X crossed mile 5")
" ⯠Pubs
â˘âŻ Course Data (retained)
â⯠RaceTracker/<race>/Marker/<type>
â˘âŻ {
 "id":"start",
 "lon":30.30214,
 "lat":-Ââ97.77801
 }
Â
â⯠RaceTracker/<race>/Marker/<type>/text
â˘âŻ {
 "text":"Crossed
 at
 7:38
 AM
 with
 a
 split
 of
 8:28"
 }
Â
â⯠RaceTracker/<race>/Course
â˘âŻ "-Ââ97.73911714,30.277803
 &
 -Ââ979780987,30.28985
 &
 <lon>,<lat>
 &"
Â
â˘âŻ Events (QoS 2)
â⯠RaceTracker/<race>/Person/<runner>/event
â˘âŻ {
 "type":"split",
 "splitTime":"10:42:13",
 "splitMarker":"mile
 2",
Â
"splitString":"9:45"
 }
Â
â˘âŻ {
 "type":"finish",
 "time":"11:43:13",
 "totalTime":"4:15:13"
 }
Â
Analytics
13. Analytics
12
" ⯠Pubs (cont.)
â˘âŻ Live Analytics (retained)
â⯠RaceTracker/<race>/Person/<runner>/text
â˘âŻ {
 "text":
 "Pace:
 (about)
 9:18
 min/mile"
 }
Â
" ⯠Subs
â˘âŻ Location Data
â⯠RaceTracker/<race>/Person/+
â˘âŻ {
 "_type":"location","tst":"1392569738",
Â
"lat":"30.3019","lon":"-Ââ97.7278",
 "batt":"30","acc":"5"}
Â
Analytics
14. 13
HTML5 Map UI
â˘âŻ Course data, analytics, and runners are displayed on a map
and updated in real-time through MQTT over WebSockets
â˘âŻ Uses OpenLayers JavaScript library with ESRI imagery
" ⯠Pubs
Â
â˘âŻ [Nothing]
" ⯠Subs
â˘âŻ Location Data
â⯠RaceTracker/<race>/Person/+
â˘âŻ Live Analytics
â⯠RaceTracker/<race>/Person/+/text
â⯠RaceTracker/<race>/Marker/+/text
â˘âŻ Course Data
â⯠RaceTracker/<race>/Marker/+ RaceTracker/<race>/Course
Viewer
16. What else is possible?
" ⯠This is a simple messaging model (flows 1 direction)
â˘âŻ âBut WebSocket is bidirectional!â
" ⯠Future Ideas:
â˘âŻ Voice chat to runner
â⯠Audio encouragement
â˘âŻ Augment runner app with live leaderboard
â⯠Google Glass = augmented reality race
â⯠âArnaud Mathieu is 0.23 miles ahead of you!â
" ⯠A decoupled application with MQTT allows for easy extension
and integration of new features
" ⯠What else is possible?
15
18. Chatterbox
" ⯠Problem
â˘âŻ Need scalable chat that works anywhere you are.
â⯠2G in the country, LTE in the city, WiďŹ at Impact!
â⯠Reliability is key
â˘âŻ Need scalable chat that works on any device
â⯠Think desktop, mobile... wearable, etc.
" ⯠Solution â âChatterboxâ
â˘âŻ MQTT HTML5 ĂďĂ ď MQTT native iOS
â˘âŻ Assured messaging with QoS
â˘âŻ Text, picture, audio, video chat
" ⯠Challenges
â˘âŻ Cross-platform messaging (MQTT Paho clients!)
â˘âŻ Constrained networks (MQTT durable subscriber!)
17
20. 19
Web App / Native App (iOS)
â˘âŻ All clients use same "Chatterbox" JSON API
" ⯠Pubs
â˘âŻ Room Data (retained)
â⯠chatterbox/Room/<room_id>
â˘âŻ {
 "id":"IBMIMP5116",
 "name":"IBM
 Impact",
 "password":""
 }
Â
â˘âŻ Presence (retained)
â⯠chatterbox/Room/<room_id>/User/<uuid>
â˘âŻ {
 "displayName":"Bryan
 Boyd",
 "color":"green",
 "uuid":<uuid>
 }
â˘âŻ Chat Data
â⯠chatterbox/Room/<room_id>/Chat
â˘âŻ {
 "name":"Bryan
 Boyd",
 "uuid":<uuid>,
 "format":"text",
Â
"data":"Hello
 world!",
 "index":0,
 "max":1,
 "id":"b4ps8fjqgg",
Â
"timestamp":1398875852255
 }
Chatterbox
21. 20
" ⯠Subs
â˘âŻ Room Data (retained)
â⯠chatterbox/Room/+
â˘âŻ Presence (retained)
â⯠chatterbox/Room/<room_id>/User/+
â˘âŻ Chat Data
â⯠chatterbox/Room/<room_id>/Chat
Image / Audio / Video
â˘âŻ Split, send as QoS 1, reconstruct message at subscribers
Â
Â
 {
 "name":"Bryan
 Boyd",
 "uuid":<uuid>,
 "id":"b4ps8fjqgg",
 "timestamp":
 ...
Â
Â
Â
Â
Â
 "format":"data:audio/wav;base64",
 "index":1,"max":6,
 "data":"UklGriDAAQZa...
Â
Â
Â
Â
 "format":"data:image/png;base64",
 "index":7,"max":17,
 "data":"whW+fd+JsGg...
Â
Â
Â
Â
 "format":"data:video/mp4;base64",
 "index":9,"max":31,
 "data":"8F/yzUBAQY...
Â
Chatterbox
22. Play time
[see Arnaud for free tablets]
or
bit.ly/ibmchatterbox
(use Chrome, accept camera/microphone prompts)
21
23. What else is possible?
" ⯠Even more collaboration
â˘âŻ Broadcast streaming audio, video
â˘âŻ Screen share, drawing
â˘âŻ Record MQTT messages to âarchiveâ a collaboration and play
back in real time
" ⯠Integrate social media
â˘âŻ Link twitter account
â˘âŻ Type â:tweet: <chat>â to publish a tweet
" ⯠What else is possible?
22
25. Starfighter
" ⯠Problem
â˘âŻ Quickly build a massively multiplayer game
â˘âŻ Need low latency from client to client
â˘âŻ To scale, we need to intelligently deliver the right data to the
right place at the right time
" ⯠Solution â âStarfighterâ
â˘âŻ MMOG, IoT-style...
â˘âŻ Every ship is a MQTT client
â⯠Humans: HTML5, Bots: Node.js
â˘âŻ Every action is a message
â⯠Shoot / Move / Hit
â˘âŻ Client-to-Broker-to-Client for low latency
" ⯠Challenges
â˘âŻ Data management (dynamic subscriptions!)
24
27. Mobile-ready App (HTML5)
26
" ⯠Pubs
â˘âŻ "Telemetry" â 16 msg/sec
â⯠starfighter/players/ship/<z>/<x>/<y>/<uuid>
{
 "uuid":"gqds2na46a","time":1398962284414,
Â
Â
 "name":"@bryanboyd","type":"ship",
Â
Â
 "worldPos":
 {"x":"10022.6","y":"2698.2"},
Â
Â
 "velocity":
 {"x":"0.1","y":"185.8"},
 "angle":"8.9",
Â
Â
 "shield":"1.0000",
 "status":"NORMAL",
 "score":0
Â
Â
 "lastHitTime":1398962247380,
 "lastUpdate":1398962261510
 }
Â
â˘âŻ Gunfire
â⯠starfighter/players/bullet/<z>/<x>/<y>/<uuid>
â˘âŻ {
 "uuid":"gqds2na46a",
 "action":"shoot",
 "bullets":3
 }
â˘âŻ Events
â⯠starfighter/players/event/<z>/<x>/<y>/<uuid>
â˘âŻ {
 "uuid":"gqds2na46a",
 "name":"@bryanboyd",
 action:"hit",
Â
"damage":0.03,
 "by":"u6xnd"
 }
Â
â˘âŻ {
 "uuid":"gqds2na46a",
 "name":"@bryanboyd",
 action:"destroyed",
Â
"bonus":500,
 "by":"u6xnd"
 }
28. Mobile-ready App (HTML5)
27
" ⯠Subs
â˘âŻ "Telemetry"
â⯠starfighter/players/ship/<z>/<x>/<y>/+
â˘âŻ Gunfire
â⯠starfighter/players/bullet/<z>/<x>/<y>/+
â˘âŻ Events
â⯠starfighter/players/event/<z>/<x>/<y>/+
How does this scale? Not well.
-⯠10 players x 16 msgs/sec telemetry is okay
-⯠100 players x 16 msgs/sec telemetry is not
-⯠10000 players x 16 msgs/sec...
29. 28
" ⯠Idea:
â˘âŻ Map ship x,y coord to a map region
â˘âŻ Include region in the topic
â˘âŻ Publish multiple feeds at different rates:
â⯠z = 0, 1 msg/sec
â⯠z = N, 2n msg/sec
...
â⯠z = 4, 16 msg/sec
â⯠Total = (2z_max â 1)
â˘âŻ As your ship changes regions, change
the publishing topic
Location Topics
3210
1
2
3
0 1
0
1
0
0
z = 0
z = 1
z = 2
30. 29
" ⯠Idea
â˘âŻ Which feeds do I need? (find z)
â⯠smallest map region that encompasses viewport
â˘âŻ Where am I? (find x, y)
â˘âŻ Subscribe to z/x/y and the
neighboring regions
â˘âŻ As your ship changes regions,
subscribe to the new topics and
unsubscribe from the old
" ⯠Benefits
â˘âŻ Viewer just subscribes to z = 0, gets N msgs/sec
â˘âŻ Player gets fine-grained data about neighboring players to draw
smoothly... no more "lag kills"
Dynamic Subscriptions
31. Hackathon-ready
" ⯠To build an AI...
â˘âŻ Pick a random position and vector
â˘âŻ Publish telemetry, update position over time, and ďŹre away
â˘âŻ Subscribe to topics for local region
â˘âŻ If a player gets within X dist, update vector to intercept
" Node.js bots in BlueMix
30
BlueMix
32. Play time
31
[see Arnaud for free tablets]
or
bit.ly/playstarďŹghter
optimized for Google Chrome
33. What else is possible?
" ⯠Other scenarios:
â˘âŻ Fleet management
â⯠Track vehicle movements and inventory in real time
â⯠Provide feeds of diďŹerent granularity based on map region
â˘âŻ Online gaming â poker, horse betting
â⯠Pub/sub is good for a gaming table, real-time race tracking,
assured messaging for placing bets
â˘âŻ Collaboration
â⯠Many users can control and aďŹect the same virtual space
" ⯠What else is possible?
32
35. Takeaways
" ⯠WebSockets â extending real-time communication to browsers
" ⯠MQTT â scalable, reliable, fast messaging everywhere
â˘âŻ Scalable â pub/sub, tiny headers
â˘âŻ Reliable â quality of service for assured messaging
â˘âŻ Fast â with the right broker, low latency at scale
â˘âŻ Everywhere â Eclipse Paho clients
A great protocol needs a great broker...
34
36. IBM MessageSight
" ⯠Secure messaging for Mobile and Internet of Things
â˘âŻ MQTT Broker (TCP + WebSocket), JMS
" ⯠Mobile engineered â very fast, reliable messaging
" ⯠Massive scale â a million connections, millions of msgs/sec
" ⯠Simple conďŹguration â secure messaging topics and
endpoints with policies
35
37. Scaling with IBM MessageSight
" ⯠1 million concurrent connections, millions of msgs/sec
" ⯠What we can do:
â˘âŻ RaceTracker
â⯠Track the Boston, NYC, and Chicago marathons at the same time
â˘âŻ Chatterbox
â⯠Run low-latency, secure, on-premise chat for your entire enterprise
â˘âŻ StarďŹghter
â⯠Thousands of players can collaborate simultaneously
â⯠Monitor and control tens of thousands of sensors
36
38. In conclusion...
37
" ⯠WebSocket for bidirectional communication
" ⯠MQTT for eďŹcient mobile-to-mobile publish/subscribe
" ⯠IBM MessageSight for scalability, security, and simplicity
With real-time, scalable mobile messaging...
what kind of compelling experiences can you create?
42. We Value Your Feedback
" ⯠Donât forget to submit your Impact session and speaker
feedback! Your feedback is very important to us â we use it to
continually improve the conference.
" ⯠Use the Conference Mobile App or the online Agenda Builder to
quickly submit your survey
â˘âŻ Navigate to âSurveysâ to see a view of surveys for sessions
youâve attended
41
44. Legal Disclaimer
â˘âŻ Š IBM Corporation 2014. All Rights Reserved.
â˘âŻ The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in
this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBMâs current product plans and strategy, which are subject
to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing
contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and
conditions of the applicable license agreement governing the use of IBM software.
â˘âŻ References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or
capabilities referenced in this presentation may change at any time at IBMâs sole discretion based on market opportunities or other factors, and are not intended to be a commitment to
future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you
will result in any specific sales, revenue growth or other results.
â˘âŻ If the text contains performance statistics or references to benchmarks, insert the following language; otherwise delete:
Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will
experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage
configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.
â˘âŻ If the text includes any customer examples, please confirm we have prior written approval from such customer and insert the following language; otherwise delete:
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs
and performance characteristics may vary by customer.
â˘âŻ Please review text for proper trademark attribution of IBM products. At first use, each product name must be the full name and include appropriate trademark symbols (e.g., IBM LotusÂŽ
SametimeÂŽ Unyteâ˘). Subsequent references can drop âIBMâ but should include the proper branding (e.g., Lotus Sametime Gateway, or WebSphere Application Server). Please refer
to http://www.ibm.com/legal/copytrade.shtml for guidance on which trademarks require the Ž or ⢠symbol. Do not use abbreviations for IBM product names in your presentation. All
product names must be used as adjectives rather than nouns. Please list all of the trademarks that you use in your presentation as follows; delete any not included in your presentation.
IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines
Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both.
â˘âŻ If you reference AdobeÂŽ in the text, please mark the first use and include the following; otherwise delete:
Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries.
â˘âŻ If you reference Java⢠in the text, please mark the first use and include the following; otherwise delete:
Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.
â˘âŻ If you reference MicrosoftÂŽ and/or WindowsÂŽ in the text, please mark the first use and include the following, as applicable; otherwise delete:
Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both.
â˘âŻ If you reference IntelÂŽ and/or any of the following Intel products in the text, please mark the first use and include those that you use as follows; otherwise delete:
Intel, Intel Centrino, Celeron, Intel Xeon, Intel SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and
other countries.
â˘âŻ If you reference UNIXÂŽ in the text, please mark the first use and include the following; otherwise delete:
UNIX is a registered trademark of The Open Group in the United States and other countries.
â˘âŻ If you reference LinuxÂŽ in your presentation, please mark the first use and include the following; otherwise delete:
Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others.
â˘âŻ If the text/graphics include screenshots, no actual IBM employee names may be used (even your own), if your screenshots include fictitious company names (e.g., Renovations, Zeta
Bank, Acme) please update and insert the following; otherwise delete: All references to [insert fictitious company name] refer to a fictitious company and are used for illustration
purposes only.