Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Simple Things

Making Simple Things

D5f36cb3a2b97a68cc812d985726b5dd?s=128

Ben Foxall

March 09, 2017
Tweet

Transcript

  1. Hello

  2. I'm Ben

  3. None
  4. Frontend Web Developer

  5. Frontend Web Developer + Backend + Hardware + Other stuff

  6. Oxford

  7. Oxford, UK

  8. None
  9. None
  10. None
  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

  14. None
  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

  26. None
  27. 1. a thing you can press down

  28. None
  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

  38. None
  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

  92. None
  93. None
  94. None
  95. None
  96. Doing this at home Electronics

  97. None
  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

  108. None
  109. None
  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

  114. None
  115. None
  116. None
  117. None
  118. None
  119. None
  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)
  123. None
  124. None
  125. None
  126. None
  127. None
  128. The SR-71 is still just a thing

  129. A thing that flies very fast & very high up

  130. None
  131. None
  132. None
  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
  137. None
  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

  154. None
  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

  158. None
  159. None
  160. None
  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