Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Making Simple Things
Search
Ben Foxall
March 09, 2017
Programming
2
250
Making Simple Things
Ben Foxall
March 09, 2017
Tweet
Share
More Decks by Ben Foxall
See All by Ben Foxall
Web Sites & Fairy Lights
benfoxall
0
120
Simpler Things
benfoxall
0
1.7k
Collaborative JS
benfoxall
1
170
Using Browsers to Visualise Data
benfoxall
0
81
Serving Data From Browsers
benfoxall
0
65
Building multi-device interfaces with the web
benfoxall
1
170
Other Decks in Programming
See All in Programming
AIでLINEスタンプを作ってみた
eycjur
1
220
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
AIコーディングAgentとの向き合い方
eycjur
0
260
MLH State of the League: 2026 Season
theycallmeswift
0
220
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
310
1から理解するWeb Push
dora1998
7
1.7k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
540
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
240
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
2
1.3k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
260
為你自己學 Python - 冷知識篇
eddie
1
340
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
140
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
Visualization
eitanlees
148
16k
Statistics for Hackers
jakevdp
799
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Scaling GitHub
holman
463
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Fireside Chat
paigeccino
39
3.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Transcript
Hello
I'm Ben
None
Frontend Web Developer
Frontend Web Developer + Backend + Hardware + Other stuff
Oxford
Oxford, UK
None
None
None
Evening meet-ups Hack days
Last month with Oxford Python, OxRUG, Codebar, DotNetOxford, DevOpsOxford, Drupal
& WPOx
The Oxford Mega Super Meetup Meetup
None
HTTP
HTTP kind of sucks
HTTP kind of sucks (sometimes)
Problem 1. HTTP was designed with wires in mind wireless/flaky
networks can be challenging
Problem 2. HTTP resources need to be constantly online can
be a issue for low-power devices
Problem 3. HTTP responses need a request getting content to
a client can be tricky
The problems: 1. Wireless 2. Low energy devices 3. P2P
data flow
this sounds a bit like the Internet of Things
1. Many small (movable) devices - wires become an issue
2. Batteries - constrains compute resource 3. Things need to be able to talk to each other
Part 1. A deep dive into IoT networking, and it
can fit with WordPress
An example network of Things
None
1. a thing you can press down
None
2. some things that light up
target outcome: When I press this thing, these things should
turn red (wherever they are)
Sending a post request to our LED strip? POST /led-strip
HTTP/1.1 Host: benjaminbenben.com User-Agent: curl/7.51.0 content-type: application/json Accept: */* Cache-Control: no-cache Content-Length: 15 {"color":"red"}
Handling HTTP —Opening ports —Responding to requests —Parsing request &
headers —Understanding http codes & header fields —Chunked encoding —Persistent connections —IP address changes
(JSON is pretty challenging too)
Small devices —variable network —sketchy network —low processing power —power
consumption requirements
MQTT
MQTT Message Queue*
MQTT Telemetry Transport
None
Broker Client
publish subscribe topics messages
MQTT Broker —Could be a satellite —Could be a hub
in a home —Could be a box sitting in a field
MQTT Connection —Satellite radio —mesh network —bluetooth LE
MQTT Connection —Stateful —Message based —Binary
Message structure +----------------------+ | fixed header | |----------------------| | variable
header | |----------------------| | payload | +----------------------+
Message Types CONNECT, CONNACK, PUBLISH, PUBACK, PUBREC, PUBREL, PUBCOMP, SUBSCRIBE,
SUBACK, UNSUBSCRIBE, UNSUBACK, PINGREQ, PINGRESP & DISCONNECT
Connecting to a broker ie. making initial contact CONNECT &
CONNACK
Client Broker ------- CONNECT -------> <------ CONNACK --------
CONNECT fixed header 7 6 5 4 3 2 1
0 f i x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS
CONNECT variable header —protocol number —whether username & password are
supplied
CONNECT payload —the actual username & password (if required)
'fourteen bytes' to connect —2 bytes - fixed header —12
bytes - variable header —0-n bytes - flag values
Publishing Messages eg. on button press PUBLISH
PUBLISH fixed header 7 6 5 4 3 2 1
0 f i x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS
PUBLISH variable header 7 6 5 4 3 2 1
0 TOPIC LENGTH / T O P I C 3 4 5 . . . . T
PUBLISH payload —the content of your message (optional) publish /button/push
'count: 5'
⨽⨽⨽⨽/button/push
⨽⨽⨽⨽/button/push vs POST /button HTTP/1.1 Host: benjaminbenben.com User-Agent: curl/7.51.0 content-type:
application/json Accept: */* Cache-Control: no-cache Content-Length: 15 {"action":"push"}
16 bytes
16 bytes POST /btn HTT
Receiving Messages eg. some lights SUBSCRIBE
SUBSCRIBE fixed header 7 6 5 4 3 2 1
0 f i x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS
SUBSCRIBE variable header —Message identifier
SUBSCRIBE payload —a list of topic names
Receiving messages
Receiving messages (we already know this!) Client Broker <------ PUBLISH
--------
Job Done We can publish & subscribe to a network
of things
$socket = fsockopen('mqtt-host.com', 1883); $connect = constructConnectMessage(); fwrite($socket, $connect, strlen($connect));
$publish = constructPublishMessage('/hello', 'world!'); fwrite($socket, $publish, strlen($connect));
One other thing: QoS For when you're not sure if
your satellite is even there
7 6 5 4 3 2 1 0 f i
x e d h e a d e r MESSAGE TYPE 1 2 REMAINING LENGTH DUP RET QOS
QoS 0 Fire and Forget Client Broker Client ---- PUBLISH
----> [delete] ---- PUBLISH ---->
QoS 1 At least once delivery Client Broker Client ----
PUBLISH ----> [store] ---- PUBLISH ----> [delete] <------ PUBACK --- [delete]
QoS 2 "Exactly once" Client Broker Client ----- PUBLISH ---->
[store] ---- PUBLISH ----> <------ PUBACK ---- ------- PUBREL ---> [delete] <------ PUBCOMP --- [delete]
Embraces flakey networks
MQTT …that's about it (security/encryption, client IDs, last will, persistence,
ping/pong)
Demo Let's hook these lights together
/Demo
Bringing WordPress onto the network
1/ Subscribe to MQTT topics 2/ Publish messages to MQTT
1/ Subscribe to MQTT topics Create an mqtt-wp bridge (A
script that forwards on messages) github/benfoxall/mqtt-wp
const WPAPI = require('wpapi') const wp = new WPAPI(config.wp) const
update = (slug, content) => wp.pages().slug(slug) .update({content}) // update('my-thing', 'Sensor value: 4')
const mqtt = require('mqtt') const client = mqtt.connect(config.mqtt_host) client.subscribe('my/sensor') client.on('message',
(topic, buffer) => { const content = escape(buffer.toString()) update('my-sensor', content) })
Publishing messages
Option 1: Via WP-MQTT ➡ Nice and easy Option 2:
Via Webhooks ➡ Better fit for a wp-bridge model
WP-MQTT settings
MQTT Broker WordPress wp-mqtt plugin mqtt-wp bridge
Demo Let's bring WordPress on to the network
~
More useful things with this —Displaying sensor content —weather sensors
—door opening counters —whatever you can build
More useful things with this —A device registry —Smart home
—Sensors in the field
~
Doing this at home MQTT brokers
None
None
None
None
Doing this at home Electronics
None
Espruino
ESP8266
Pi Zero W
~
Part 2. How can we take inspiration from the way
we build Things.
A Thing
A Thing Is more than the stuff it's made from
A wooden table A table
We build applications from source code print '<b>hello <i>world</B></i>';
Working out what you're trying to build
None
None
Try and work out what your thing does
A Thing
A Thing Is a point of interaction
Someone needs to understand
None
None
None
None
None
None
When you build something Make sure it's a thing
A Thing
A Thing Doesn't have to be simple (but it can
be)
None
None
None
None
None
The SR-71 is still just a thing
A thing that flies very fast & very high up
None
None
None
Keep is Simple Stupid
Keep is Simple, Stupid
Have a clear idea of what your thing is Build
that thing as simply as you can
For way more about this, see Skunk Works by Nickolas
Means
None
Part 3. How we can make our phones into things
MQTT over WebSockets Our device becomes another thing on the
network const mqt = new MQT('test.mosquitto.org:8080') mqt.subscribe('/sensor/value' (value) => document.querySelector('#sensor').textContent = value ) mqt.publish('/phone/visit', document.location.pathname)
bit.ly/ADORB
Browsers can do more than displaying documents
Power navigator.getBattery() .then(({value, charging}) => {})
Location navigator.geolocation.getCurrentPosition( ({coords}) => {} )
Orientation & movement document.addEventListener('deviceorientation', ({alpha, beta, gamma}) => {} )
document.addEventListener('devicemotion', ({acceleration}) => {} )
Ambient Light window.addEventListener('devicelight', ({value}) => {} )
Proximity window.addEventListener('userproximity', ({near}) => {} )
Audio/Video feed navigator.mediaDevices.getUserMedia({ audio: true, video: true }) .then(stream =>
{})
Movement navigator.vibrate(100)
Sounds var ctx = new AudioContext() var osc = ctx.createOscillator()
osc.connect(ctx.destination) osc.frequency.value = 300 osc.start()
Other features
Service workers navigator.serviceWorker.register('/sw-test/sw.js')
Web Bluetooth navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'], }] }).then(device =>
device.gatt.connect())
Our web pages are becoming Things
None
Part 4. How to build things that make a difference
We're building things
The usefulness of a thing can be assessed
None
None
None
When you're building something
make a difference for someone
Thank you for listening @benjaminbenben
—github.com/benfoxall/mqtt-wp —github.com/benfoxall/ador-puck-demo —github.com/benfoxall/puck-mqtt