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
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
390
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
670
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
VS Code Update for GitHub Copilot
74th
1
560
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
270
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
460
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
620
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
290
童醫院敏捷轉型的實踐經驗
cclai999
0
210
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
A Modern Web Designer's Workflow
chriscoyier
694
190k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Building Adaptive Systems
keathley
43
2.6k
Agile that works and the tools we love
rasmusluckow
329
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
A Tale of Four Properties
chriscoyier
160
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Navigating Team Friction
lara
187
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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