Dashboard
Last updated
Last updated
root@openstackme:~# pip install tornadoroot@openstackme:~# cd /var/www/html/iot101inc
root@openstackme:/var/www/html/iot101inc# rm index.html
root@openstackme:/var/www/html/iot101inc#Extremely simple example of websocket using Python/Perl (server-side) and Javascript (client-side)
root@openstackme:/var/www/html/iot101inc# git clone https://github.com/albertobeta/UberSimpleWebsockets.git
Cloning into 'UberSimpleWebsockets'...
remote: Counting objects: 24, done.
remote: Total 24 (delta 0), reused 0 (delta 0), pack-reused 24
Unpacking objects: 100% (24/24), done.
Checking connectivity... done.
root@openstackme:/var/www/html/iot101inc#root@openstackme:/var/www/html/iot101inc/UberSimpleWebsockets# ls
client-Chart.html client-JustLog.html LICENSE README.md send.pl send.py
root@openstackme:/var/www/html/iot101inc/UberSimpleWebsockets#
root@openstackme:/var/www/html/iot101inc/UberSimpleWebsockets# cd ..
root@openstackme:/var/www/html/iot101inc#root@openstackme:/var/www/html/iot101inc# nano index.html<html>
<head>
<title>Uber Simple Websockets - IoT 101 Inc</title>
<!-- Websocket -->
<script type="text/javascript">
var port = 9000;
var host = "ws://104.236.227.50:"+port;
var socket;
var explodedValues = [0];
function init() {
try {
socket = new WebSocket(host);
console.log('WebSocket status '+socket.readyState);
socket.onopen = function(msg) {
console.log("Welcome - status "+this.readyState);
};
socket.onmessage = function(msg) {
console.log("Message Received: "+msg.data);
explodedValues = msg.data.split(';');
for(var i=0; i<explodedValues.length; i++) { explodedValues[i] = +explodedValues[i]; }
drawVisualization();
};
socket.onclose = function(msg) {
console.log("Disconnected - status "+this.readyState);
};
}
catch(ex){
console.log(ex);
}
}
function quit(){
if (socket != null) {
console.log("Close Socket");
socket.close();
socket=null;
}
}
function reconnect() {
quit();
init();
}
</script>
<!-- Google Chart -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Tracker', '1'],
['Sensor', explodedValues[0]],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function () {return 0;}
}]);
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
var options = {
title:"End to End Industrial Automation System",
width: 600,
height: 400,
bar: { groupWidth: "95%" },
legend: { position: "none" },
animation: {
duration: 800
},
hAxis: {
minValue: 0,
maxValue: 10
}
};
var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
google.visualization.events.removeListener(runOnce);
chart.draw(data, options);
});
chart.draw(view, options);
$(window).resize(function() {
chart.draw(data, options);
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});
</script>
</head>
<body onload="init()">
<h3>Uber Simple Websockets - IoT 101 Inc</h3>
<div id="visualization"></div>
<button onclick="reconnect()">Reconnect</button>
</body>
</html>root@openstackme:/var/www/html/iot101inc# nano gateway.pyimport tornado.httpserver
import tornado.websocket
import tornado.ioloop
from tornado.ioloop import PeriodicCallback
import tornado.web
from random import randint
from datetime import date
port = 9000
timeInterval= 2000
value = 0
class WSHandler(tornado.websocket.WebSocketHandler):
def check_origin(self, origin):
return True
def open(self):
self.callback = PeriodicCallback(self.send_values, timeInterval)
self.callback.start()
def send_values(self):
global value
self.write_message(str(value))
def on_message(self, message):
pass
def on_close(self):
self.callback.stop()
class SensorHandler(tornado.web.RequestHandler):
def get(self):
global value
value = self.get_argument("value", "0")
response = { 'version': '0.1',
'timestamp': date.today().isoformat(),
'path': self.request.path,
'sensor value': value }
self.write(response)
application = tornado.web.Application([
(r'/', WSHandler),
(r"/sensor", SensorHandler),
])
if __name__ == "__main__":
http_server = tornado.httpserver.HTTPServer(application)
http_server.listen(port)
tornado.ioloop.IOLoop.instance().start()root@openstackme:/var/www/html/iot101inc# python gateway.py