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
240
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
160
Using Browsers to Visualise Data
benfoxall
0
79
Serving Data From Browsers
benfoxall
0
62
Building multi-device interfaces with the web
benfoxall
1
170
Other Decks in Programming
See All in Programming
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
Deep Dive into ~/.claude/projects
hiragram
14
14k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.5k
20250708_JAWS_opscdk
takuyay0ne
2
130
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Making Projects Easy
brettharned
116
6.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Statistics for Hackers
jakevdp
799
220k
Being A Developer After 40
akosma
90
590k
Site-Speed That Sticks
csswizardry
10
700
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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