'm really hoping someone will able to help me in here.
I have this very simple application (website) with four boxes so that when each box is clicked it changes its background color to red, and there is also a reset button that resets the box to white background.
Now, everything is happening over the socket.io so I'm able to see every changes (background-color) independently in different browsers (mirroring) which works perfectly.
Ideally, I would like to implement a On/Off button, so that when it is ON the changes (mirroring) are happening in every browser but when it is OFF the changes to the boxes are happening only in the browser that I interact with. I really don't know how to implement such a solution to be able to control ON/OFF.
What I really need is to have opened 2 browsers and when you click "#onOff" the second browser should not be receiving sockets but the first browsers still should be able to change the div color.
here's my code below:
html
<div class="box" id="one"></div>
<div class="box" id="two"></div>
<div class="box" id="three"></div>
<div class="box" id="four"></div>
<div id="reset">RESET</div>
app.js
var express = require('express')
, jsondata = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.cookieParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', function (req, res) {
res.sendfile('views/index.html');
});
var server = http.createServer(app);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket){
socket.on('click', function(data){
io.sockets.emit('changeColor',data);
});
socket.on('click2', function(data){
io.sockets.emit('resetColor',data);
});
});
server.listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
remote.js
$(document).ready(function() {
var socket = io.connect();
$('.box').click(function() {
var selectedID = $(this).attr("id");
socket.emit('click', selectedID);
});
socket.on('changeColor', function(selectedID) {
$("#"+selectedID).css({"background-color":"red"});
});
function resetColor(){
$('.box').css({"background-color":"white"});
}
$('#reset').click(function() {
socket.emit('click2', "");
});
socket.on('resetColor', function() {
resetColor();
});
});
I appreciate your help.