Skip to content

Commit 5865082

Browse files
stevetreasestevetrease
committed
Using socket.io namespace to allow different data to be pushed to different URLs
1 parent de9d57e commit 5865082

File tree

4 files changed

+188
-12
lines changed

4 files changed

+188
-12
lines changed

‎mqtt/app.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ p {
1010

1111
table, th, td {
1212
border: 1px solid #CABFAF;
13+
border-collapse: collapse;
14+
vertical-align: top;
1315
}
1416

1517

‎mqtt/mqtt.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>
5+
MQTT
6+
</title>
7+
<link type="text/css" rel="stylesheet" href="/app.css" media="all">
8+
</head>
9+
<body>
10+
<table id="messagetable"></table>
11+
<P>
12+
<div id="time" style="font-size:x-small"></div>
13+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
14+
<script src="http://www.trease.eu:8500/socket.io/socket.io.js"></script>
15+
<script>
16+
ElementExists = function(id) {
17+
return !!document.getElementById(id);
18+
};
19+
20+
var socket = io.connect("http://192.168.1.103:8500/mqtt");
21+
socket.on('data', function(data) {
22+
// console.log("Message received " + data.topic + " of " + data.value);
23+
24+
// check the target topic exisits & if not create a target table entry
25+
if (!ElementExists (data.topic)) {
26+
// console.log("Creating target " + data.topic);
27+
var table=document.getElementById("messagetable");
28+
var row=table.insertRow(0);
29+
var cell=row.insertCell(0);
30+
cell.id = data.topic;
31+
var cell=row.insertCell(0);
32+
cell.id = data.topic + "name";
33+
document.getElementById(data.topic).style.textAlign="right"
34+
document.getElementById(data.topic + "name").innerHTML= data.topic;
35+
}
36+
// new we know there is a target, update it
37+
// console.log("Setting target " + data.topic + " to " + data.value);
38+
document.getElementById(data.topic).innerHTML= data.value;
39+
40+
// print the time the refresh happened
41+
var dt = new Date();
42+
document.getElementById("time").innerHTML= dt.toLocaleTimeString();
43+
});
44+
</script>
45+
</body>
46+
</html>
47+

‎mqtt/sensors.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>
5+
Charlestown Power
6+
</title>
7+
<link type="text/css" rel="stylesheet" href="/app.css" media="all">
8+
</head>
9+
<body>
10+
<big><big><big>
11+
<span id="sensors/power/0"> </span>W
12+
</big></big></big>
13+
<P>
14+
<span id="sensors/power/0powercumulativeToday"></span> KWh used today
15+
<br>
16+
<span id="sensors/power/0powercumulativeHour"></span> KWh this hour
17+
<P>
18+
<canvas id="mycanvas" width="500" height="150"></canvas>
19+
<P>
20+
<table>
21+
<tr>
22+
<td><table id="myTablePower"><tr>
23+
</tr>
24+
</table>
25+
</td>
26+
<td>
27+
<table id="myTableTemp"></table>
28+
</td>
29+
<td>
30+
<table id="myTableHumidity"></table>
31+
</td>
32+
</tr></table>
33+
<table id="myTableNO2"></table>
34+
<table id="myTablePressure"></table>
35+
<table id="myTableCO"></table>
36+
<P>
37+
<div id="time" style="font-size:x-small"></div>
38+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
39+
<script src="http://www.trease.eu:8500/socket.io/socket.io.js"></script>
40+
<script type="text/javascript" src="http://github.com/joewalnes/smoothie/raw/master/smoothie.js"></script>
41+
<script>
42+
ElementExists = function(id) {
43+
return !!document.getElementById(id);
44+
};
45+
BeginsWith = function(needle, haystack){
46+
return (haystack.substr(0, needle.length) == needle);
47+
}
48+
49+
50+
var smoothie = new SmoothieChart({millisPerPixel:1000,timestampFormatter:SmoothieChart.timeFormatter,minValue:0});
51+
var line1 = new TimeSeries();
52+
smoothie.streamTo(document.getElementById("mycanvas"));
53+
smoothie.addTimeSeries(line1);
54+
55+
var socket = io.connect("http://192.168.1.103:8500/sensors");
56+
socket.on('data', function(data) {
57+
// console.log("Message received " + data.topic + " of " + data.value);
58+
59+
// check the target topic exisits & if not create a target table entry
60+
if (!ElementExists (data.topic)) {
61+
// console.log("Creating target " + data.topic);
62+
var topictag = "sensors/power/";
63+
if (data.topic.substring(0,topictag.length) == topictag) {
64+
var table=document.getElementById("myTablePower");
65+
}
66+
var topictag = "sensors/temperature/";
67+
if (data.topic.substring(0,topictag.length) == topictag) {
68+
var table=document.getElementById("myTableTemp");
69+
}
70+
var topictag = "sensors/humidity/";
71+
if (data.topic.substring(0,topictag.length) == topictag) {
72+
var table=document.getElementById("myTableHumidity");
73+
}
74+
var topictag = "sensors/co/";
75+
if (data.topic.substring(0,topictag.length) == topictag) {
76+
var table=document.getElementById("myTableCO");
77+
}
78+
var topictag = "sensors/no2/";
79+
if (data.topic.substring(0,topictag.length) == topictag) {
80+
var table=document.getElementById("myTableNO2");
81+
}
82+
var topictag = "sensors/pressure/";
83+
if (data.topic.substring(0,topictag.length) == topictag) {
84+
var table=document.getElementById("myTablePressure");
85+
}
86+
87+
88+
var row=table.insertRow(0);
89+
var cell=row.insertCell(0);
90+
cell.id = data.topic;
91+
var cell=row.insertCell(0);
92+
cell.id = data.topic + "name";
93+
document.getElementById(data.topic).style.textAlign="right"
94+
document.getElementById(data.topic + "name").innerHTML= data.topic.slice(data.topic.lastIndexOf('/')+1);
95+
}
96+
// new we know there is a target, update it
97+
// console.log("Setting target " + data.topic + " to " + data.value);
98+
document.getElementById(data.topic).innerHTML= data.value;
99+
100+
// if data topic is 0 it is the overall power consumption, so update the graph
101+
if (data.topic == "sensors/power/0") {
102+
line1.append (new Date().getTime(), data.value);
103+
}
104+
105+
// print the time the refresh happened
106+
var dt = new Date();
107+
document.getElementById("time").innerHTML= dt.toLocaleTimeString();
108+
});
109+
</script>
110+
</body>
111+
</html>
112+

‎mqtt/server.js‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,13 @@ var express = require('express');
22
var app = express()
33
, http = require('http')
44
, server = http.createServer(app)
5-
, io = require('socket.io').listen(server, {'log level': 1});
5+
, io = require('socket.io').listen(server, {'log level': 2});
66
var fs = require('fs');
77

88
// service settings file
99
var config = require('./config.json');
1010

1111

12-
1312
app.get('/app.css', function (req, res) {
1413
console.log('connection %j %s %s', req.connection.remoteAddress, req.method, req.url);
1514
res.sendfile(__dirname + '/app.css');
@@ -19,42 +18,40 @@ app.get('/stats', function(req, res){
1918
console.log('This process is pid ' + process.pid + " with an uptime of " + process.uptime());
2019
console.log('Running on ' + process.platform + ' (' + process.arch + ')');
2120
});
22-
app.get('/power', function(req, res) {
21+
app.get('/sensors', function(req, res) {
2322
console.log('connection %j %s %s', req.connection.remoteAddress, req.method, req.url);
24-
fs.readFile(__dirname + '/power.html',
23+
fs.readFile(__dirname + '/sensors.html',
2524
function (err, data) {
2625
if (err) {
2726
res.writeHead(500);
28-
return res.end('Error loading power.html');
27+
return res.end('Error loading sensors.html');
2928
}
3029
res.writeHead(200);
3130
res.end(data);
3231
});
33-
3432
});
35-
app.get('/', function(req, res) {
33+
app.get('/mqtt', function(req, res) {
3634
console.log('connection %j %s %s', req.connection.remoteAddress, req.method, req.url);
37-
fs.readFile(__dirname + '/index.html',
35+
fs.readFile(__dirname + '/mqtt.html',
3836
function (err, data) {
3937
if (err) {
4038
res.writeHead(500);
41-
return res.end('Error loading index.html');
39+
return res.end('Error loading mqtt.html');
4240
}
4341
res.writeHead(200);
4442
res.end(data);
4543
});
46-
4744
});
4845

4946

5047

51-
// start the server
5248
server.listen(8500);
5349
console.log('listening on port 8500');
5450

5551

5652

57-
io.sockets.on('connection', function (socket) {
53+
54+
io.of('/sensors').on('connection', function (socket) {
5855
// subscribe to MQTT
5956
var mqtt = require('mqtt');
6057
var mqttclient = mqtt.createClient(1883, config.mqtt.host, function(err, client) {
@@ -71,3 +68,21 @@ io.sockets.on('connection', function (socket) {
7168
});
7269
});
7370
});
71+
72+
io.of('/mqtt').on('connection', function (socket) {
73+
// subscribe to MQTT
74+
var mqtt = require('mqtt');
75+
var mqttclient = mqtt.createClient(1883, config.mqtt.host, function(err, client) {
76+
keepalive: 1000
77+
});
78+
79+
mqttclient.on('connect', function() {
80+
mqttclient.subscribe('#');
81+
// console.log('subscribing to everything on ' + config.mqtt.host + '(' + config.mqtt.port + ')');
82+
83+
mqttclient.on('message', function(topic, message) {
84+
// console.log('emitting topic: ' + topic + ' payload: ' + message);
85+
socket.emit('data', { topic: topic, value: message });
86+
});
87+
});
88+
});

0 commit comments

Comments
 (0)