如何用开/关button来控制socket.io
我真的希望有人能够帮助我在这里。
我有这个非常简单的应用程序（网站）有四个框，以便每个框被点击时，它的背景颜色更改为红色，还有一个重置button，将框重置为白色背景。
现在，一切都发生在socket.io上，所以我能够在不同的浏览器（镜像）中独立地看到每个更改（背景颜色），这完全可以工作。
理想情况下，我想实现一个开/关button，所以当它打开时，每个浏览器都会发生更改（镜像），但是当它处于closures状态时，只会在与我交互的浏览器中进行更改。 我真的不知道如何实现这样的解决scheme，以控制开/关。
我真正需要的是打开2个浏览器，当你点击“#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')); });
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(); }); });
我感谢您的帮助。
这应该做到这一点：
$(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'); } }); });