Making Simple Things

Transcript

1. Hello
2. I'm Ben
4. Frontend Web Developer
5. Frontend Web Developer + Backend + Hardware + Other stuff
6. Oxford
7. Oxford, UK
11. Evening meet-ups Hack days
12. Last month with Oxford Python, OxRUG, Codebar, DotNetOxford, DevOpsOxford, Drupal & WPOx
13. The Oxford Mega Super Meetup Meetup
15. HTTP
16. HTTP kind of sucks
17. HTTP kind of sucks (sometimes)
18. Problem 1. HTTP was designed with wires in mind wireless/flaky networks can be challenging
19. Problem 2. HTTP resources need to be constantly online can be a issue for low-power devices
20. Problem 3. HTTP responses need a request getting content to a client can be tricky
21. The problems: 1. Wireless 2. Low energy devices 3. P2P data flow
22. this sounds a bit like the Internet of Things
23. 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
24. Part 1. A deep dive into IoT networking, and it can fit with WordPress
25. An example network of Things
27. 1. a thing you can press down
29. 2. some things that light up
30. target outcome: When I press this thing, these things should turn red (wherever they are)
31. 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"}
32. Handling HTTP —Opening ports —Responding to requests —Parsing request & headers —Understanding http codes & header fields —Chunked encoding —Persistent connections —IP address changes
33. (JSON is pretty challenging too)
34. Small devices —variable network —sketchy network —low processing power —power consumption requirements
35. MQTT
36. MQTT Message Queue*
37. MQTT Telemetry Transport
39. Broker Client
40. publish subscribe topics messages
41. MQTT Broker —Could be a satellite —Could be a hub in a home —Could be a box sitting in a field
42. MQTT Connection —Satellite radio —mesh network —bluetooth LE
43. MQTT Connection —Stateful —Message based —Binary
44. Message structure +----------------------+ | fixed header | |----------------------| | variable header | |----------------------| | payload | +----------------------+
45. Message Types CONNECT, CONNACK, PUBLISH, PUBACK, PUBREC, PUBREL, PUBCOMP, SUBSCRIBE, SUBACK, UNSUBSCRIBE, UNSUBACK, PINGREQ, PINGRESP & DISCONNECT
46. Connecting to a broker ie. making initial contact CONNECT & CONNACK
47. Client Broker ------- CONNECT -------> <------ CONNACK --------
48. 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
49. CONNECT variable header —protocol number —whether username & password are supplied
50. CONNECT payload —the actual username & password (if required)
51. 'fourteen bytes' to connect —2 bytes - fixed header —12 bytes - variable header —0-n bytes - flag values
52. Publishing Messages eg. on button press PUBLISH
53. 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
54. PUBLISH variable header 7 6 5 4 3 2 1 0 TOPIC LENGTH / T O P I C 3 4 5 . . . . T
55. PUBLISH payload —the content of your message (optional) publish /button/push 'count: 5'
56. ⨽⨽⨽⨽/button/push
57. ⨽⨽⨽⨽/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"}
58. 16 bytes
59. 16 bytes POST /btn HTT
60. Receiving Messages eg. some lights SUBSCRIBE
61. 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
62. SUBSCRIBE variable header —Message identifier
63. SUBSCRIBE payload —a list of topic names
64. Receiving messages
65. Receiving messages (we already know this!) Client Broker <------ PUBLISH --------
66. Job Done We can publish & subscribe to a network of things
67. $socket = fsockopen('mqtt-host.com', 1883); $connect = constructConnectMessage(); fwrite($socket, $connect, strlen($connect)); $publish = constructPublishMessage('/hello', 'world!'); fwrite($socket, $publish, strlen($connect));
68. One other thing: QoS For when you're not sure if your satellite is even there
69. 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
70. QoS 0 Fire and Forget Client Broker Client ---- PUBLISH ----> [delete] ---- PUBLISH ---->
71. QoS 1 At least once delivery Client Broker Client ---- PUBLISH ----> [store] ---- PUBLISH ----> [delete] <------ PUBACK --- [delete]
72. QoS 2 "Exactly once" Client Broker Client ----- PUBLISH ----> [store] ---- PUBLISH ----> <------ PUBACK ---- ------- PUBREL ---> [delete] <------ PUBCOMP --- [delete]
73. Embraces flakey networks
74. MQTT …that's about it (security/encryption, client IDs, last will, persistence, ping/pong)
75. Demo Let's hook these lights together
76. /Demo
77. Bringing WordPress onto the network
78. 1/ Subscribe to MQTT topics 2/ Publish messages to MQTT
79. 1/ Subscribe to MQTT topics Create an mqtt-wp bridge (A script that forwards on messages) github/benfoxall/mqtt-wp
80. 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')
81. 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) })
82. Publishing messages
83. Option 1: Via WP-MQTT ➡ Nice and easy Option 2: Via Webhooks ➡ Better fit for a wp-bridge model
84. WP-MQTT settings
85. MQTT Broker WordPress wp-mqtt plugin mqtt-wp bridge
86. Demo Let's bring WordPress on to the network
87. ~
88. More useful things with this —Displaying sensor content —weather sensors —door opening counters —whatever you can build
89. More useful things with this —A device registry —Smart home —Sensors in the field
90. ~
91. Doing this at home MQTT brokers
96. Doing this at home Electronics
98. Espruino
99. ESP8266
100. Pi Zero W
101. ~
102. Part 2. How can we take inspiration from the way we build Things.
103. A Thing
104. A Thing Is more than the stuff it's made from
105. A wooden table A table
106. We build applications from source code print '<b>hello <i>world</B></i>';
107. Working out what you're trying to build
110. Try and work out what your thing does
111. A Thing
112. A Thing Is a point of interaction
113. Someone needs to understand
120. When you build something Make sure it's a thing
121. A Thing
122. A Thing Doesn't have to be simple (but it can be)
128. The SR-71 is still just a thing
129. A thing that flies very fast & very high up
133. Keep is Simple Stupid
134. Keep is Simple, Stupid
135. Have a clear idea of what your thing is Build that thing as simply as you can
136. For way more about this, see Skunk Works by Nickolas Means
138. Part 3. How we can make our phones into things
139. 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)
140. bit.ly/ADORB
141. Browsers can do more than displaying documents
142. Power navigator.getBattery() .then(({value, charging}) => {})
143. Location navigator.geolocation.getCurrentPosition( ({coords}) => {} )
144. Orientation & movement document.addEventListener('deviceorientation', ({alpha, beta, gamma}) => {} ) document.addEventListener('devicemotion', ({acceleration}) => {} )
145. Ambient Light window.addEventListener('devicelight', ({value}) => {} )
146. Proximity window.addEventListener('userproximity', ({near}) => {} )
147. Audio/Video feed navigator.mediaDevices.getUserMedia({ audio: true, video: true }) .then(stream => {})
148. Movement navigator.vibrate(100)
149. Sounds var ctx = new AudioContext() var osc = ctx.createOscillator() osc.connect(ctx.destination) osc.frequency.value = 300 osc.start()
150. Other features
151. Service workers navigator.serviceWorker.register('/sw-test/sw.js')
152. Web Bluetooth navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'], }] }).then(device => device.gatt.connect())
153. Our web pages are becoming Things
155. Part 4. How to build things that make a difference
156. We're building things
157. The usefulness of a thing can be assessed
161. When you're building something
162. make a difference for someone
163. Thank you for listening @benjaminbenben
164. —github.com/benfoxall/mqtt-wp —github.com/benfoxall/ador-puck-demo —github.com/benfoxall/puck-mqtt