node.js - 如何使用 ON/OFF 按钮控制 socket.io

Question

我真的希望有人能够帮助我。

我有一个非常简单的应用程序(网站)，有四个框，因此当单击每个框时，它会将其背景颜色更改为红色，并且还有一个重置按钮，可将框重置为白色背景。

现在，一切都在 socket.io 上发生，因此我能够在不同的浏览器(镜像)中独立地看到每个更改(背景颜色)，效果完美。

理想情况下，我想实现一个开/关按钮，这样当它打开时，每个浏览器中都会发生更改(镜像)，但当它关闭时，对框的更改仅发生在我的浏览器中与。。。相互作用。我真的不知道如何实现这样一个能够控制ON/OFF的解决方案。

我真正需要的是打开两个浏览器，当您单击“#onOff”时，第二个浏览器不应该接收套接字，但第一个浏览器仍然应该能够更改 div 颜色。

下面是我的代码:

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'));
});

远程.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();                   
    });

});

感谢您的帮助。

Answer 1

这应该可以做到:

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

});