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.
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 (Wifi) = ~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
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, Wifi 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
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
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 fire 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
33. What else is possible?
" Other scenarios:
• Fleet management
– Track vehicle movements and inventory in real time
– Provide feeds of different 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 affect 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 configuration – 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
• Starfighter
– 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 efficient 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