Skip to content

Commit a4c6b78

Browse files
stevetreasestevetrease
committed
MQTT and MQTT stats now inserted in alpha order
1 parent 5865082 commit a4c6b78

File tree

5 files changed

+111
-13
lines changed

5 files changed

+111
-13
lines changed

‎mqtt/app.css‎

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

1111
table, th, td {
1212
border: 1px solid #CABFAF;
13+
border-spacing: 3px;
1314
border-collapse: collapse;
1415
vertical-align: top;
16+
table-layout: fixed;
1517
}
1618

1719

‎mqtt/mqtt.html‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
<link type="text/css" rel="stylesheet" href="/app.css" media="all">
88
</head>
99
<body>
10-
<table id="messagetable"></table>
10+
<table id="messagetable">
11+
<tr><th>Topic</th><th>Value</th></tr>
12+
</table>
1113
<P>
1214
<div id="time" style="font-size:x-small"></div>
1315
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
@@ -25,7 +27,21 @@
2527
if (!ElementExists (data.topic)) {
2628
// console.log("Creating target " + data.topic);
2729
var table=document.getElementById("messagetable");
28-
var row=table.insertRow(0);
30+
31+
// itertate through table to find out where to insert row in alpha order
32+
var count = 1;
33+
if (document.getElementById("messagetable").rows.length != 1) {
34+
for (i = 1; i < document.getElementById("messagetable").rows.length; i++) {
35+
var row = table.rows[i];
36+
var col = row.cells[0];
37+
if (col.firstChild.nodeValue < data.topic) {
38+
count++;
39+
}
40+
}
41+
}
42+
43+
44+
var row=table.insertRow(count);
2945
var cell=row.insertCell(0);
3046
cell.id = data.topic;
3147
var cell=row.insertCell(0);

‎mqtt/mqttstats.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>
5+
MQTT Server Stats
6+
</title>
7+
<link type="text/css" rel="stylesheet" href="/app.css" media="all">
8+
</head>
9+
<body>
10+
<table id="messagetable"><tr><th>Topic</th><th>Value</th></tr></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/mqttstats");
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+
29+
// itertate through table to find out where to insert row in alpha order
30+
var count = 1;
31+
if (document.getElementById("messagetable").rows.length != 1) {
32+
for (i = 1; i < document.getElementById("messagetable").rows.length; i++) {
33+
var row = table.rows[i];
34+
var col = row.cells[0];
35+
if (col.firstChild.nodeValue < data.topic) {
36+
count++;
37+
}
38+
}
39+
}
40+
41+
var row=table.insertRow(count);
42+
var cell=row.insertCell(0);
43+
cell.id = data.topic;
44+
var cell=row.insertCell(0);
45+
cell.id = data.topic + "name";
46+
document.getElementById(data.topic).style.textAlign="right"
47+
document.getElementById(data.topic + "name").innerHTML= data.topic;
48+
}
49+
// new we know there is a target, update it
50+
// console.log("Setting target " + data.topic + " to " + data.value);
51+
document.getElementById(data.topic).innerHTML= data.value;
52+
53+
// print the time the refresh happened
54+
var dt = new Date();
55+
document.getElementById("time").innerHTML= dt.toLocaleTimeString();
56+
});
57+
</script>
58+
</body>
59+
</html>
60+

‎mqtt/sensors.html‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,9 @@
1717
<P>
1818
<canvas id="mycanvas" width="500" height="150"></canvas>
1919
<P>
20-
<table>
21-
<tr>
22-
<td><table id="myTablePower"><tr>
23-
</tr>
24-
</table>
25-
</td>
26-
<td>
20+
<table id="myTablePower"></table>
2721
<table id="myTableTemp"></table>
28-
</td>
29-
<td>
3022
<table id="myTableHumidity"></table>
31-
</td>
32-
</tr></table>
3323
<table id="myTableNO2"></table>
3424
<table id="myTablePressure"></table>
3525
<table id="myTableCO"></table>

‎mqtt/server.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,18 @@ app.get('/mqtt', function(req, res) {
4242
res.end(data);
4343
});
4444
});
45+
app.get('/mqttstats', function(req, res) {
46+
console.log('connection %j %s %s', req.connection.remoteAddress, req.method, req.url);
47+
fs.readFile(__dirname + '/mqttstats.html',
48+
function (err, data) {
49+
if (err) {
50+
res.writeHead(500);
51+
return res.end('Error loading mqttstats.html');
52+
}
53+
res.writeHead(200);
54+
res.end(data);
55+
});
56+
});
4557

4658

4759

@@ -86,3 +98,21 @@ io.of('/mqtt').on('connection', function (socket) {
8698
});
8799
});
88100
});
101+
102+
io.of('/mqttstats').on('connection', function (socket) {
103+
// subscribe to MQTT
104+
var mqtt = require('mqtt');
105+
var mqttclient = mqtt.createClient(1883, config.mqtt.host, function(err, client) {
106+
keepalive: 1000
107+
});
108+
109+
mqttclient.on('connect', function() {
110+
mqttclient.subscribe('$SYS/#');
111+
// console.log('subscribing to everything on ' + config.mqtt.host + '(' + config.mqtt.port + ')');
112+
113+
mqttclient.on('message', function(topic, message) {
114+
// console.log('emitting topic: ' + topic + ' payload: ' + message);
115+
socket.emit('data', { topic: topic, value: message });
116+
});
117+
});
118+
});

0 commit comments

Comments
 (0)