pusher.js
var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var redis = require('redis');
var mqtt = require('mqtt');
var client = mqtt.connect('mqtt://localhost');
server.listen(8080);
io.on("connection", function (socket) {
console.log("new client connected");
// socket connection indicates what mqtt topic to subscribe to in data.topic
socket.on('subscribe', function (data) {
console.log('Subscribing to '+data.topic);
socket.join(data.topic);
client.subscribe(data.topic);
});
// when socket connection publishes a message, forward that message
// the the mqtt broker
socket.on('publish', function (data) {
console.log('Publishing to '+data.topic);
client.publish(data.topic,data.payload);
});
});
// listen to messages coming from the mqtt broker
client.on('message', function (topic, payload, packet) {
console.log(topic+'='+payload);
io.sockets.emit('mqtt',{'topic':String(topic),
'payload':String(payload)});
});
receiver.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<h1>Real Time</h1>
<style>
body {
background-color: #666;
margin: 10px;
}
/*! Light */
#light {
background-color: #000;
box-shadow: 0 0 5px rgba(0,0,0, .8);
overflow: hidden;
padding: 0 0 4px;
width: 40px;
}
#light span {
border-radius: 50px;
display: block;
height: 30px;
margin: 4px auto 0;
opacity: .5;
width: 30px;
}
/*! Light colours */
#red { background-color: red; }
#orange { background-color: orange; }
#green { background-color: green; }
/*! Active states */
#light span.active { opacity: 1; }
#light #red.active { box-shadow: 0 0 10px red; }
#light #orange.active { box-shadow: 0 0 10px orange; }
#light #green.active { box-shadow: 0 0 10px green; }
#bulb { background-color: red; }
/*! Active states */
#light span.On { opacity: 1; }
#light #bulb.On { box-shadow: 0 0 10px red; }
/*! Toggle button */
button {
margin-top: 10px;
}
</style>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var id_sl;
$('#btn_sl').on('click', function() {
var self_sl = $('.active');
//Check if another element exists after the currently active one otherwise
//find the parent and start again
if (self_sl.next().length) {
id_sl = self_sl.next().attr('id');
} else {
id_sl = self_sl.parent().find('span:first').attr('id');
}
socket.emit('publish', {topic:"led",payload:id_sl});
});
$('#btn_chng').on('click', function() {
var state = $(this).val();
socket.emit('publish', {topic:"state",payload:state});
});
});
</script>
<script>
var socket = io.connect('http://localhost:8080');
socket.on('connect', function () {
socket.on('mqtt', function (msg) {
console.log(msg.topic+' '+msg.payload);
if(msg.topic == 'led'){
var self = $('.active');
self.removeClass('active');
$('#'+msg.payload).addClass('active');
}
if(msg.topic == 'state'){
if(msg.payload == 'On'){
$('#bulb').removeClass('On');
$('#btn_chng').val('Off');
} else if(msg.payload == 'Off'){
$('#bulb').addClass('On');
$('#btn_chng').val('On');
}
}
});
socket.emit('subscribe',{topic:'led'});
socket.emit('subscribe',{topic:'state'});
});
</script>
</head>
<body>
<div class='table'>
<div id="light">
<span class="active" id="red"></span>
<span id="orange"></span>
<span id="green"></span>
</div>
<button id="btn_sl">Switch Light</button>
</div>
<div class='table'>
<div id="light">
<span class="On" id="bulb"></span>
</div>
<button id="btn_chng" value="On">Change State</button>
</div>
</body>
</html>
var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var redis = require('redis');
var mqtt = require('mqtt');
var client = mqtt.connect('mqtt://localhost');
server.listen(8080);
io.on("connection", function (socket) {
console.log("new client connected");
// socket connection indicates what mqtt topic to subscribe to in data.topic
socket.on('subscribe', function (data) {
console.log('Subscribing to '+data.topic);
socket.join(data.topic);
client.subscribe(data.topic);
});
// when socket connection publishes a message, forward that message
// the the mqtt broker
socket.on('publish', function (data) {
console.log('Publishing to '+data.topic);
client.publish(data.topic,data.payload);
});
});
// listen to messages coming from the mqtt broker
client.on('message', function (topic, payload, packet) {
console.log(topic+'='+payload);
io.sockets.emit('mqtt',{'topic':String(topic),
'payload':String(payload)});
});
receiver.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<h1>Real Time</h1>
<style>
body {
background-color: #666;
margin: 10px;
}
/*! Light */
#light {
background-color: #000;
box-shadow: 0 0 5px rgba(0,0,0, .8);
overflow: hidden;
padding: 0 0 4px;
width: 40px;
}
#light span {
border-radius: 50px;
display: block;
height: 30px;
margin: 4px auto 0;
opacity: .5;
width: 30px;
}
/*! Light colours */
#red { background-color: red; }
#orange { background-color: orange; }
#green { background-color: green; }
/*! Active states */
#light span.active { opacity: 1; }
#light #red.active { box-shadow: 0 0 10px red; }
#light #orange.active { box-shadow: 0 0 10px orange; }
#light #green.active { box-shadow: 0 0 10px green; }
#bulb { background-color: red; }
/*! Active states */
#light span.On { opacity: 1; }
#light #bulb.On { box-shadow: 0 0 10px red; }
/*! Toggle button */
button {
margin-top: 10px;
}
</style>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var id_sl;
$('#btn_sl').on('click', function() {
var self_sl = $('.active');
//Check if another element exists after the currently active one otherwise
//find the parent and start again
if (self_sl.next().length) {
id_sl = self_sl.next().attr('id');
} else {
id_sl = self_sl.parent().find('span:first').attr('id');
}
socket.emit('publish', {topic:"led",payload:id_sl});
});
$('#btn_chng').on('click', function() {
var state = $(this).val();
socket.emit('publish', {topic:"state",payload:state});
});
});
</script>
<script>
var socket = io.connect('http://localhost:8080');
socket.on('connect', function () {
socket.on('mqtt', function (msg) {
console.log(msg.topic+' '+msg.payload);
if(msg.topic == 'led'){
var self = $('.active');
self.removeClass('active');
$('#'+msg.payload).addClass('active');
}
if(msg.topic == 'state'){
if(msg.payload == 'On'){
$('#bulb').removeClass('On');
$('#btn_chng').val('Off');
} else if(msg.payload == 'Off'){
$('#bulb').addClass('On');
$('#btn_chng').val('On');
}
}
});
socket.emit('subscribe',{topic:'led'});
socket.emit('subscribe',{topic:'state'});
});
</script>
</head>
<body>
<div class='table'>
<div id="light">
<span class="active" id="red"></span>
<span id="orange"></span>
<span id="green"></span>
</div>
<button id="btn_sl">Switch Light</button>
</div>
<div class='table'>
<div id="light">
<span class="On" id="bulb"></span>
</div>
<button id="btn_chng" value="On">Change State</button>
</div>
</body>
</html>
No comments:
Post a Comment