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
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
420
Deep Dive into ~/.claude/projects
hiragram
12
2.4k
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
600
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
技術同人誌をMCP Serverにしてみた
74th
1
630
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
330
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
760
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
2.2k
CursorはMCPを使った方が良いぞ
taigakono
1
240
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
290
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
740
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
A Tale of Four Properties
chriscoyier
160
23k
Rails Girls Zürich Keynote
gr2m
94
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Cult of Friendly URLs
andyhume
79
6.5k
Code Review Best Practice
trishagee
69
18k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Fireside Chat
paigeccino
37
3.5k
Docker and Python
trallard
44
3.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
4 Signs Your Business is Dying
shpigford
184
22k
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