Arduino and the real time web
Linux Conf AU – Arduino Miniconf16 January, 2012
@ajfisher
Slides, notes & code...
@ajfisherslideshare.net/andrewjfishergithub.com/ajfisher
Arduino❤
Web
Arduino networkingintroduction
Photo (CC): Flickr rfranklinaz
Arduino networking resources
Arduino IDEExamples/Ethernet/Web Client & Web Server
Arduino documentationarduino.cc/it/Reference/Ethernet
@ajfisher @superhighfives
Sensor serving doesn't have to be plain
Simple web serving
Arduino web server examplesExamples/Ethernet/Web Server
ArduServerwww.arduserver.com
Web interaction using an arduino
ReSTduinogithub.com/jjg/RESTduino
webduinogithub.com/sirleech/Webduino
duino.jsgithub.com/ecto/duino
Generic network pulsergist.github.com/1290670
Why is real time webinteraction important for an arduino?
World dominationby arduino
Photo (CC): Flickr marcus ramberg
@kevinrohling 's web sockets controlled robot
Difficult?
Photo (CC): Flickr Vrogy
Photo (CC): Flickr InertiaCreeps
Web sockets resources
W3C web sockets specdev.w3.org/html5/websockets/
Wikipediaen.wikipedia.org/wiki/WebSocket
Socket.IO (JS Library)github.com/LearnBoost/socket.io-spec
Django Socket.IO (Django app)github.com/stephenmcd/django-socketio
Real time architecture
WebSocketsServer
Web serverfrom django_socketio import events, broadcast, broadcast_channel
@events.on_subscribe(channel="channel-name")def channel_subscription(request, socket, context, channel): #do some stuff related to a subscription
@events.on_message(channel="^channel-name")def message_processor(request, socket, context, message): message = message[0] foo = message["foo"] bar = message["bar"] #do some processing
socket.send({"value":some_value}) socket.broadcast({"foo": foo, "value": some_value})
Web browser clientvar room = 'channel-name';var socket;
$(function() { socket = new io.Socket(); socket.connect(); socket.on('connect', function() { socket.subscribe(room); }); socket.on('message', function(data) { console.log(data.value); }); socket.send({room: room, foo: foo, bar: bar}); });
Arduino client
#include <WebSocketClient.h>// defsWebSocketClient client(server, "/socket.io/websocket/", 80);
void setup() { Ethernet.begin(mac, ip); delay(1000); if(client.connect()) { client.setDataArrivedDelegate(dataArrived); client.subscribe("channel-name"); delay(1000); } else { while(1) {} }}
void dataArrived(WebSocketClient client, String data) { Serial.println("Data Arrived: " + data);}
Arduino client
void loop() { client.monitor(); // send a message String message = "{\"room\":\"channel-name\",
"\"foo\": bar }";
client.send(message); delay(1000);}
Example – real time sensor data display
Stream live temperature data from two distinct sensors on the network to a web based display that overlays the data
Full code available at https://github.com/ajfisher/realtime-temperature
Arduino sensor
void loop() { char _s[8]; String message = "{\"room\":\"tempsensor\", "; message += "\"sensor\":"; message += sensor_id; message += ", \"value\":"; message += dtostrf(get_temp(0), 8, 3, _s); message += "}";
client.send(message); delay(100);}
Web server
from django_socketio import events, broadcast_channel
#other views @events.on_message(channel="^tempsensor")def get_temperature(request, socket, context, message): message = message[0] value = message["value"] sensor_id = message["sensor"] socket.broadcast_channel( {"sensor": sensor_id, "value":value}, channel="tempvalues" )
Discussion
$(function() { socket = new io.Socket(); socket.connect(); socket.on('connect', function() { socket.subscribe('tempvalues');
CreateTimeline(); }); socket.on('message', function(data) { tempdata[data.sensor].append( new Date().getTime(), data.value ); });});
Static view of data that was presented locally live
Other applications
Scale out sensor network
Web controlled installations
M2M
Things to try out
Pusherpusher.com
Socket IOsocket.io
Arduino Web Sockets Clientsgithub.com/krohling/ArduinoWebsocketClientgithub.com/krohling/ArduinoPusherClient
Arduino and the real time web
@ajfisherslideshare.net/andrewjfishergithub.com/ajfisher