Slide 1

Slide 1 text

Hello

Slide 2

Slide 2 text

I'm Ben

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Frontend Web Developer

Slide 5

Slide 5 text

Frontend Web Developer + Backend + Hardware + Other stuff

Slide 6

Slide 6 text

Oxford

Slide 7

Slide 7 text

Oxford, UK

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Evening meet-ups Hack days

Slide 12

Slide 12 text

Last month with Oxford Python, OxRUG, Codebar, DotNetOxford, DevOpsOxford, Drupal & WPOx

Slide 13

Slide 13 text

The Oxford Mega Super Meetup Meetup

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

HTTP

Slide 16

Slide 16 text

HTTP kind of sucks

Slide 17

Slide 17 text

HTTP kind of sucks (sometimes)

Slide 18

Slide 18 text

Problem 1. HTTP was designed with wires in mind wireless/flaky networks can be challenging

Slide 19

Slide 19 text

Problem 2. HTTP resources need to be constantly online can be a issue for low-power devices

Slide 20

Slide 20 text

Problem 3. HTTP responses need a request getting content to a client can be tricky

Slide 21

Slide 21 text

The problems: 1. Wireless 2. Low energy devices 3. P2P data flow

Slide 22

Slide 22 text

this sounds a bit like the Internet of Things

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Part 1. A deep dive into IoT networking, and it can fit with WordPress

Slide 25

Slide 25 text

An example network of Things

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

1. a thing you can press down

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

2. some things that light up

Slide 30

Slide 30 text

target outcome: When I press this thing, these things should turn red (wherever they are)

Slide 31

Slide 31 text

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"}

Slide 32

Slide 32 text

Handling HTTP —Opening ports —Responding to requests —Parsing request & headers —Understanding http codes & header fields —Chunked encoding —Persistent connections —IP address changes

Slide 33

Slide 33 text

(JSON is pretty challenging too)

Slide 34

Slide 34 text

Small devices —variable network —sketchy network —low processing power —power consumption requirements

Slide 35

Slide 35 text

MQTT

Slide 36

Slide 36 text

MQTT Message Queue*

Slide 37

Slide 37 text

MQTT Telemetry Transport

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Broker Client

Slide 40

Slide 40 text

publish subscribe topics messages

Slide 41

Slide 41 text

MQTT Broker —Could be a satellite —Could be a hub in a home —Could be a box sitting in a field

Slide 42

Slide 42 text

MQTT Connection —Satellite radio —mesh network —bluetooth LE

Slide 43

Slide 43 text

MQTT Connection —Stateful —Message based —Binary

Slide 44

Slide 44 text

Message structure +----------------------+ | fixed header | |----------------------| | variable header | |----------------------| | payload | +----------------------+

Slide 45

Slide 45 text

Message Types CONNECT, CONNACK, PUBLISH, PUBACK, PUBREC, PUBREL, PUBCOMP, SUBSCRIBE, SUBACK, UNSUBSCRIBE, UNSUBACK, PINGREQ, PINGRESP & DISCONNECT

Slide 46

Slide 46 text

Connecting to a broker ie. making initial contact CONNECT & CONNACK

Slide 47

Slide 47 text

Client Broker ------- CONNECT -------> <------ CONNACK --------

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

CONNECT variable header —protocol number —whether username & password are supplied

Slide 50

Slide 50 text

CONNECT payload —the actual username & password (if required)

Slide 51

Slide 51 text

'fourteen bytes' to connect —2 bytes - fixed header —12 bytes - variable header —0-n bytes - flag values

Slide 52

Slide 52 text

Publishing Messages eg. on button press PUBLISH

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

PUBLISH variable header 7 6 5 4 3 2 1 0 TOPIC LENGTH / T O P I C 3 4 5 . . . . T

Slide 55

Slide 55 text

PUBLISH payload —the content of your message (optional) publish /button/push 'count: 5'

Slide 56

Slide 56 text

⨽⨽⨽⨽/button/push

Slide 57

Slide 57 text

⨽⨽⨽⨽/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"}

Slide 58

Slide 58 text

16 bytes

Slide 59

Slide 59 text

16 bytes POST /btn HTT

Slide 60

Slide 60 text

Receiving Messages eg. some lights SUBSCRIBE

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

SUBSCRIBE variable header —Message identifier

Slide 63

Slide 63 text

SUBSCRIBE payload —a list of topic names

Slide 64

Slide 64 text

Receiving messages

Slide 65

Slide 65 text

Receiving messages (we already know this!) Client Broker <------ PUBLISH --------

Slide 66

Slide 66 text

Job Done We can publish & subscribe to a network of things

Slide 67

Slide 67 text

$socket = fsockopen('mqtt-host.com', 1883); $connect = constructConnectMessage(); fwrite($socket, $connect, strlen($connect)); $publish = constructPublishMessage('/hello', 'world!'); fwrite($socket, $publish, strlen($connect));

Slide 68

Slide 68 text

One other thing: QoS For when you're not sure if your satellite is even there

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

QoS 0 Fire and Forget Client Broker Client ---- PUBLISH ----> [delete] ---- PUBLISH ---->

Slide 71

Slide 71 text

QoS 1 At least once delivery Client Broker Client ---- PUBLISH ----> [store] ---- PUBLISH ----> [delete] <------ PUBACK --- [delete]

Slide 72

Slide 72 text

QoS 2 "Exactly once" Client Broker Client ----- PUBLISH ----> [store] ---- PUBLISH ----> <------ PUBACK ---- ------- PUBREL ---> [delete] <------ PUBCOMP --- [delete]

Slide 73

Slide 73 text

Embraces flakey networks

Slide 74

Slide 74 text

MQTT …that's about it (security/encryption, client IDs, last will, persistence, ping/pong)

Slide 75

Slide 75 text

Demo Let's hook these lights together

Slide 76

Slide 76 text

/Demo

Slide 77

Slide 77 text

Bringing WordPress onto the network

Slide 78

Slide 78 text

1/ Subscribe to MQTT topics 2/ Publish messages to MQTT

Slide 79

Slide 79 text

1/ Subscribe to MQTT topics Create an mqtt-wp bridge (A script that forwards on messages) github/benfoxall/mqtt-wp

Slide 80

Slide 80 text

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')

Slide 81

Slide 81 text

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) })

Slide 82

Slide 82 text

Publishing messages

Slide 83

Slide 83 text

Option 1: Via WP-MQTT ➡ Nice and easy Option 2: Via Webhooks ➡ Better fit for a wp-bridge model

Slide 84

Slide 84 text

WP-MQTT settings

Slide 85

Slide 85 text

MQTT Broker WordPress wp-mqtt plugin mqtt-wp bridge

Slide 86

Slide 86 text

Demo Let's bring WordPress on to the network

Slide 87

Slide 87 text

~

Slide 88

Slide 88 text

More useful things with this —Displaying sensor content —weather sensors —door opening counters —whatever you can build

Slide 89

Slide 89 text

More useful things with this —A device registry —Smart home —Sensors in the field

Slide 90

Slide 90 text

~

Slide 91

Slide 91 text

Doing this at home MQTT brokers

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

Doing this at home Electronics

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

Espruino

Slide 99

Slide 99 text

ESP8266

Slide 100

Slide 100 text

Pi Zero W

Slide 101

Slide 101 text

~

Slide 102

Slide 102 text

Part 2. How can we take inspiration from the way we build Things.

Slide 103

Slide 103 text

A Thing

Slide 104

Slide 104 text

A Thing Is more than the stuff it's made from

Slide 105

Slide 105 text

A wooden table A table

Slide 106

Slide 106 text

We build applications from source code print 'hello world';

Slide 107

Slide 107 text

Working out what you're trying to build

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

Try and work out what your thing does

Slide 111

Slide 111 text

A Thing

Slide 112

Slide 112 text

A Thing Is a point of interaction

Slide 113

Slide 113 text

Someone needs to understand

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

When you build something Make sure it's a thing

Slide 121

Slide 121 text

A Thing

Slide 122

Slide 122 text

A Thing Doesn't have to be simple (but it can be)

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

No content

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

The SR-71 is still just a thing

Slide 129

Slide 129 text

A thing that flies very fast & very high up

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

No content

Slide 132

Slide 132 text

No content

Slide 133

Slide 133 text

Keep is Simple Stupid

Slide 134

Slide 134 text

Keep is Simple, Stupid

Slide 135

Slide 135 text

Have a clear idea of what your thing is Build that thing as simply as you can

Slide 136

Slide 136 text

For way more about this, see Skunk Works by Nickolas Means

Slide 137

Slide 137 text

No content

Slide 138

Slide 138 text

Part 3. How we can make our phones into things

Slide 139

Slide 139 text

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)

Slide 140

Slide 140 text

bit.ly/ADORB

Slide 141

Slide 141 text

Browsers can do more than displaying documents

Slide 142

Slide 142 text

Power navigator.getBattery() .then(({value, charging}) => {})

Slide 143

Slide 143 text

Location navigator.geolocation.getCurrentPosition( ({coords}) => {} )

Slide 144

Slide 144 text

Orientation & movement document.addEventListener('deviceorientation', ({alpha, beta, gamma}) => {} ) document.addEventListener('devicemotion', ({acceleration}) => {} )

Slide 145

Slide 145 text

Ambient Light window.addEventListener('devicelight', ({value}) => {} )

Slide 146

Slide 146 text

Proximity window.addEventListener('userproximity', ({near}) => {} )

Slide 147

Slide 147 text

Audio/Video feed navigator.mediaDevices.getUserMedia({ audio: true, video: true }) .then(stream => {})

Slide 148

Slide 148 text

Movement navigator.vibrate(100)

Slide 149

Slide 149 text

Sounds var ctx = new AudioContext() var osc = ctx.createOscillator() osc.connect(ctx.destination) osc.frequency.value = 300 osc.start()

Slide 150

Slide 150 text

Other features

Slide 151

Slide 151 text

Service workers navigator.serviceWorker.register('/sw-test/sw.js')

Slide 152

Slide 152 text

Web Bluetooth navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'], }] }).then(device => device.gatt.connect())

Slide 153

Slide 153 text

Our web pages are becoming Things

Slide 154

Slide 154 text

No content

Slide 155

Slide 155 text

Part 4. How to build things that make a difference

Slide 156

Slide 156 text

We're building things

Slide 157

Slide 157 text

The usefulness of a thing can be assessed

Slide 158

Slide 158 text

No content

Slide 159

Slide 159 text

No content

Slide 160

Slide 160 text

No content

Slide 161

Slide 161 text

When you're building something

Slide 162

Slide 162 text

make a difference for someone

Slide 163

Slide 163 text

Thank you for listening @benjaminbenben

Slide 164

Slide 164 text

—github.com/benfoxall/mqtt-wp —github.com/benfoxall/ador-puck-demo —github.com/benfoxall/puck-mqtt