1. Arduino and the real time web
Linux Conf AU – Arduino Miniconf
16 January, 2012
@ajfisher

2. Slides, notes & code...
@ajfisher
slideshare.net/andrewjfisher
github.com/ajfisher

3. Arduino
❤
Web

4. Arduino networking
introduction
Photo (CC): Flickr rfranklinaz

5. Arduino networking resources
Arduino IDE
Examples/Ethernet/Web Client & Web Server
Arduino documentation
arduino.cc/it/Reference/Ethernet

6. Sensor serving doesn't
have to be plain @ajfisher @superhighfives

7. Simple web serving
Arduino web server examples
Examples/Ethernet/Web Server
ArduServer
www.arduserver.com

8. Web interaction using an arduino
ReSTduino
github.com/jjg/RESTduino
webduino
github.com/sirleech/Webduino
duino.js
github.com/ecto/duino
Generic network pulser
gist.github.com/1290670

9. Why is real time web
interaction important
for an arduino?

10. World domination
by arduino
Photo (CC): Flickr marcus ramberg

11. @kevinrohling 's web sockets controlled robot

12. Difficult?
Photo (CC): Flickr Vrogy

13. Photo (CC): Flickr InertiaCreeps

14. Web sockets resources
W3C web sockets spec
dev.w3.org/html5/websockets/
Wikipedia
en.wikipedia.org/wiki/WebSocket
Socket.IO (JS Library)
github.com/LearnBoost/socket.io-spec
Django Socket.IO (Django app)
github.com/stephenmcd/django-socketio

15. Real time architecture
Web
Sockets
Server

16. Web server
from 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})

17. Web browser client
var 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});
});

18. Arduino client
#include <WebSocketClient.h>
// defs
WebSocketClient 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);
}

19. Arduino client
void loop() {
client.monitor();
// send a message
String message = "{"room":"channel-name",
""foo": bar }";
client.send(message);
delay(1000);
}

20. 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

21. 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);
}

22. 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"
)

23. 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 );
});
});

24. Static view of data that was presented locally live

25. Other applications
Scale out sensor network
Web controlled installations
M2M

26. Things to try out
Pusher
pusher.com
Socket IO
socket.io
Arduino Web Sockets Clients
github.com/krohling/ArduinoWebsocketClient
github.com/krohling/ArduinoPusherClient

27. Arduino and the real time web
@ajfisher
slideshare.net/andrewjfisher
github.com/ajfisher