Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
'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
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
JavaScript
var express = require('express')
  , jsondata = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

// all environments
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')));

// development only
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
JavaScript
$(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.
Posted
Comments
Sergey Alexandrovich Kryukov 19-Nov-13 11:53am    
What makes you using client side for socket-based communication? It cannot be done safely. Don't you have access to some server-side technology?
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900