MQTT and Sockets.io example, pushing CurrentCost consumption via Mosquitto

stevetrease · stevetrease · commit 5ff675ce7785 · 2013-05-03T10:42:55.000+01:00
diff --git a/mqtt/app.js b/mqtt/app.js
@@ -1,9 +1,13 @@
-var app = require('http').createServer(handler),
-   io = require('socket.io').listen(app),
-   fs = require('fs')
+var app = require('http').createServer(handler);
+var io = require('socket.io').listen(app, {
+	'log level': 1
+});
+var fs = require('fs');
 
 app.listen(8500);
 
+
+// server web pages
 function handler (req, res) {
 	console.log('Connection from %j', req.connection.remoteAddress);
 	fs.readFile(__dirname + '/index.html',
@@ -18,19 +22,22 @@ function handler (req, res) {
 }
 
 
+// for each client connection, subscribe to mqtt and push updates
 io.sockets.on('connection', function (socket) {
+
 	var mqtt = require('mqtt');
 	var client = mqtt.createClient(1883, 'localhost', function(err, client) {
   		keepalive: 10000
 	});
 
 	client.on('connect', function() {
-  		client.subscribe('sensors/power/0');
+  		client.subscribe('sensors/power/+');
 
 	  	client.on('message', function(topic, message) {
     			console.log('topic: ' + topic + ' payload: ' + message);
-  			socket.emit('data', { channel: 0, value: message });
+  			socket.emit('data', { topic: topic, value: message });
   		});
 	});
+
 });
 
diff --git a/mqtt/index.html b/mqtt/index.html
@@ -1,21 +1,39 @@
 <html>
 <head>
 <title>
-Power used today
+Charlestown Power
 </title>
 </head>
 <body style="font-family:Verdana;">
 
+<div id=time></div>
 <div id=power></div>
 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 <script src="http://www.trease.eu:8500/socket.io/socket.io.js"></script>
 <script>
+	ElementExists = function(id) {
+    		return !!document.getElementById(id);
+	};
+	
+
 	var socket = io.connect("http://192.168.1.103:8500");
 	socket.on('data', function(data){ 
-       		console.log("channel : %s, value : %s", data.channel, data.value);
-		document.getElementById("power").innerHTML= data.value;
+       		console.log("topic : %s, value : %s", data.topic, data.value);
+
+		// check if the element exists, if not create it and then set value
+		if (!ElementExists ("power" + data.topic)) {
+			var ni = document.getElementById('power');
+			var newdiv = document.createElement('div');
+			newdiv.setAttribute('id',"power" + data.topic);
+			ni.appendChild(newdiv);
+		}
+		document.getElementById("power" + data.topic).innerHTML= data.value;
+
+			var dt = new Date(); 
+		document.getElementById("time").innerHTML= dt.toLocaleTimeString();
 	});
 </script>
 </body>
 </html>
+
