Interaction patterns and protocols:
Request/Response
Outline
Request-Response
HTTP Polling
Example
Continuous HTTP Polling
Example
Shortcomings of Request-Response
Physical/Virtual Mashups
Example: Yahoo Weather service, HTML, JavaScript, [Link]
2
An example of HTTP Polling
[Link]
Temperature
URL to request the server Sensor
response
Your HTTP Client Raspberry PI
Application
[Link] Light
Sensor
[Link]
Server
(implemented using [Link])
3
Code is available as [Link]
Code Walkthrough
var http = require("http"); Creating an HTTP
var port = 8686;
server using [Link]
function randomInt (low, high) { is easy
return [Link]([Link]() * (high - low) + low);
}
[Link](function(req , res){
[Link]('New incoming client request for ' + [Link]);
[Link](200, {'Content-Type': 'application/json'});
switch([Link]) {
case '/temperature': Returning data in JSON format
[Link]('{"temperature" :' + randomInt(1, 40) + '}');
break;
case '/light':
[Link]('{"light" :' + randomInt(1, 100) + '}');
break;
default :
[Link]('{"Temperature Sensor" : "/temperature"}');
[Link]('{"Light Sensor" : "/light" }');
break;
}
[Link]();
}).listen(8686);
[Link]('Server listening on [Link] + port);
4
Code is available as [Link]
Code Walkthrough
var http = require("http");
var port = 8686;
function randomInt (low, high) {
return [Link]([Link]() * (high - low) + low);
}
[Link](function(req , res){
[Link]('New incoming client request for ' + [Link]);
[Link](200, {'Content-Type': 'application/json'});
switch([Link]) {
case '/temperature':
[Link]('{"temperature" :' + randomInt(1, 40) + '}');
break; Accessing temperature
value from URL
case '/light': [Link]
[Link]('{"light" :' + randomInt(1, 100) + '}');
break;
default :
[Link]('{"Temperature Sensor" : "/temperature"}');
Wrapping data into JSON and
[Link]('{"Light Sensor" : "/light" }'); sending response back
break;
}
[Link]();
}).listen(8686);
[Link]('Server listening on [Link] + port);
Architecture : Polling sever continuously &
displaying readings on browser
[Link]
Polling the
server with URL
Response as JSON Temperature
Sensor
Your HTTP Client Raspberry PI
Application [Link]
Server
(implemented using [Link])
6
Code is available as [Link]
Code walkthrough : Server
var http = require('http'); var fs = require('fs'); var port = 8686;
function randomInt(low, high) {
return [Link]([Link]() * (high - low) + low);
}
function send404Response(response){
[Link](404,{"Content-Type": "text/plain" }); Return the Error response
[Link]("Error 404: Page not found"); in case of invalid request
[Link]();
}
[Link](function(req, res) {
[Link]('New incoming client request for ' + [Link]);
[Link](200, { 'Content-Type' : 'application/json'});
switch ([Link]) {
case '/temperature':
[Link]('{"value" :' + randomInt(1, 40) + '}');
[Link](); break;
default: Client request for data
send404Response(res); would server here
}
}).listen(port); [Link]('Server listening on [Link] + port);
7
Code is available as [Link]
Code walkthrough: client Google Library for Line chart
$(document).ready(function () {
var maxDataPoints = 10;
var chart = new [Link]($('#chart')[0]);
var data = [Link]([
['Time', 'Temperature'],
[getTime(), 0]
]);
var options = {
title: 'Temperature',
hAxis: {title: 'Time', titleTextStyle: {color: '#333'}},
vAxis: {title: 'TempValue', minValue: 0, titleTextStyle: {color: '#333'}},
};
function addDataPoint(dataPoint) {
… … …
[Link](data, options);
}
function getTime() { … }}
function doPoll() {
$.getJSON('[Link]
function (result) {
addDataPoint(result);
setTimeout(doPoll, 1000);
}); }
doPoll();
});
8 Polling to server every 1 second
Basic Polling
Client Raspberry PI Sensor
Request
Response
Event
Delay
Request
Response
Request
Response
9
Shortcomings with HTTP Polling
The problems are associated with:
Scale: The polling generates a great number of HTTP calls and
a great part of these calls are void. Since reducing the number
of HTTP calls are void. Since the reducing the number of HTTP
calls to the minimum is key in scaling the web applications, this
model does not scale well when the number of clients
increases.
Battery: A large amount of HTTP calls is a problem for a
battery-powered devices, where only the strict data should be
sent.
10
How about the server inform a client whenever
there is a change?
11
Physical-virtual Mashup
Mashup is an application that gets data from various
sources, processes it and combines it to create a new application.
Our demo example demonstrates the following:
• Take local temperature data from Yahoo! Weather Server.
• Fetch temperature data from simulated temperature sensor.
• Compare the both temperature and publish the result to the LCD screen
attached to PI that has been exposed as web service.
12
Code is available as [Link], [Link]
Architecture
1
Yahoo Weather
Service
Request to local 2
temperature sensor
3 [Link]
JSON response
Your HTTP Client Temperature
Raspberry PI Sensor
Application
Send the temperature difference to an
4 LCD screen
5 [Link]
LCD
13 [Link]
Camera
Code is available as [Link], [Link]
Code walkthrough
$(document).ready(function () {
var rootUrl = '[Link]
function mashup(name, location) {//#A
$.getJSON(prepareYahooWeatherUrl(location), function (yahooResult) {
1
var localTemp = [Link];
[Link]('Local @ ' + location + ': ' + localTemp);
$.getJSON('[Link] function (piResult) {
2 var piTemp = [Link];
[Link]('Pi @ London: ' + piTemp);
publishMessage(prepareMessage(name, location, localTemp, piTemp));
});
});
}
function prepareYahooWeatherUrl(location) { 1
return "[Link] item from
[Link] where woeid in (select woeid from [Link](1) where text='" + location +
"') and u='c'&format=json";
}
mashup(‘IoTCouse', ‘Tokyo, Japan');
14
});
Code is available as [Link], [Link]
Code walkthrough
$(document).ready(function () {
var rootUrl = '[Link]
function mashup(name, location)
publishMessage(prepareMessage(name, location, localTemp, piTemp));
});
});
}
function prepareMessage(name, location, localTemp, piTemp) {
var diff = localTemp - piTemp;
var qualifier = ' > '; 3
if (diff < 0) {
qualifier = ' < ';
}
var result = name + '@' + location + qualifier + [Link](diff);
return result;
}
mashup(‘IoT Course', ‘Tokyo, Japan');
});
15
Code is available as [Link], [Link]
Code walkthrough
$(document).ready(function () {
var rootUrl = '[Link]
function publishMessage(message) {
var payload = {"value": message};
$.ajax(rootUrl + '/pi/actuators/display/content', {
data: [Link](payload),
contentType: 'application/json',
type: 'POST', 4
success: function (data) {
$('#message').html('Published: ' + message);
[Link]('Will take a picture in ' + ++[Link] + ' seconds...');
setTimeout(function () {takePicture();
}, [Link] * 1000); }
});
}
function takePicture() {
$.ajax({
type: 'GET',
url: rootUrl + '/camera/sensors/picture/',
dataType: 'json',
success: function (data) { 5
[Link](data);
$('#camImg').attr('src', [Link]);
},
error: function (err) {
[Link](err);
}
});
}
16
mashup(‘IoT Course', ‘Tokyo, Japan');
});
Questions??
17 Image credit to slide : Internet of Things, we are social
