1

I'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();

// 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

$(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.

medzi
  • 407
  • 1
  • 8
  • 20

1 Answers1

2

This should do it:

$(document).ready(function () {

    var socket = io.connect();
    $('.switch').addClass('on');

    $('.box').click(function () {
        var selectedID = $(this).attr("id");
        socket.emit('click', selectedID);

    });

    //etc..

    $('.switch').click(function () {
        var _socket = socket.socket;
        if ($(this).hasClass('on')) {
            _socket.disconnect();
            $(this).toggleClass('on')
        } else {
            _socket.buffer = []; // clear buffer
            _socket.connect();
            $(this).toggleClass('on');
        }
    });

});
levi
  • 23,693
  • 18
  • 59
  • 73
  • Thanks @levi, but it is not working properly. When I click the switch it actually does disconnect but you cannot interact with it anymore and when I click second time the switch i get this error: Uncaught TypeError: Object # has no method 'connect'. Ideally what I need to achieve is that when you click "off" button you should still be able to change the color in that particular browser but the second browser should not receive anything (basically disconnect the second browser.) and when click "On" connect the second browser back. – medzi Nov 19 '13 at 15:55
  • cool, connect/disconnect now works fine!! but it is the other way round:) when I disconnect i cannot change the color in the browser #1 but I can in the browser #2. This should be the other way round. so when you disconnect in #1 keep making changes in there but not in #2. :( – medzi Nov 19 '13 at 16:27
  • There no need to use sockets to make changes to self. Instead you should call the methods immediately after emiting the event, and from the server, you use `socket.broadcast.emit` to emit the event to all sockets, except the sender. – levi Nov 19 '13 at 17:44
  • eg: `$('#reset').click(function() { socket.emit('click2', ""); resetColor(); });` – levi Nov 19 '13 at 17:45
  • See - http://stackoverflow.com/questions/10058226/send-response-to-all-clients-except-sender-socket-io – levi Nov 19 '13 at 17:46
  • thanks for the link. although I still cannot make changes to myself. If I use "socket.broadcast.emit" I cannot see the changes myself but I can see the changes on the receiver side. I "the sender" need to be able to see the changes not the receiver and be able to then turn it ON when I want the receiver the see the changes. How do I do that? :(( I'm happy to share all my code! – medzi Nov 19 '13 at 18:58
  • 1
    Change your `remote.js` to this http://pastebin.com/bEFmRaXy. This way it works whether socket is on or off. – levi Nov 19 '13 at 19:06
  • I see, you have created a function that gets executed even though the sockets are switched off. Nice. Thanks so much!!! :) – medzi Nov 19 '13 at 19:18
  • 1
    Yes. Even if socket is on, its better to do it this way, as there is less delay. – levi Nov 19 '13 at 19:19
  • Fantastic. I'm assuming you can create any functions for interaction with the sender and if you want you can switch it off to not to send the sockets to the receiver. – medzi Nov 19 '13 at 19:23