如何使用ON / OFF按钮控制socket.io [英] how to control socket.io with ON/OFF button
问题描述
我真的希望有人能在这里帮助我。
我有这个非常简单的应用程序（网站）有四个盒子，所以当每个盒子是点击它将其背景颜色更改为红色，还有一个重置按钮，将框重置为白色背景。
现在，一切都发生在socket.io上所以我能够在不同的浏览器（镜像）中独立地看到每个变化（背景颜色），它们完美无缺。
理想情况下，我想实现一个On / Off按钮，因此当它处于ON状态时，每个浏览器都会发生更改（镜像），但是当它关闭时，框的更改仅在我与之交互的浏览器中发生。我真的不知道如何实现这样的解决方案，能够控制ON / OFF。
我真正需要的是打开2个浏览器，当你单击#onOff第二个浏览器不应该接收套接字，但第一个浏览器仍然应该能够更改div颜色。
这是我的代码如下：
html
< div < span class =code-attribute> class = box id = 一个 > < / div >
< div class = 框 ID <跨度class =code-keyword> = 两个 > < / div >
< div 类 = 框 id = three > < / div < span class =code-keyword>>
< div class = 框 id = 四 > < / div >
< div id = 重置 > 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，' 公共'）））;
// 仅限开发
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'）听（服务器）。
io.sockets.on（' connection'， function （socket）{
socket.on（' 点击'，功能（数据）{
io.sockets.emit（' changeColor'，data）;
}）;
socket.on（' click2'， function （data）{
io.sockets .emit（' resetColor'，data）;
}）;
}）;
server.listen（app.get（' port'）， function （）{
console .log（' 快速服务器侦听端口' + app.get（' port'））;
}）;
remote.js
$（ document ）。ready（ function （）{
var socket = io.connect（）;
$（' .box'）。click（ function （）{
var selectedID = $（ this ）.attr（ id ）;
socket.emit（' 点击'，selectedID）;
}）;
socket.on（' changeColor'， function （selectedID）{
$（ ＃ + selectedID）.css（{ background-color： red}）;
}）;
function resetColor（）{
$（' .box'）。css（{ background-color： white}）;
}
$（' ＃reset'）。点击（ function （）{
socket.emit（' click2'， ）;
}）;
socket.on（' resetColor'， function （）{
resetColor（）;
}）;
}）;
感谢您的帮助。
（ document ）。ready（ function （）{
var socket = io.connect（）;
（' .box'）。click（ function （）{
var selectedID =
（ this ）。attr（ id）;
socket.emit（' < span class =code-string> click'，selectedID）;
}）;
socket.on（' changeColor'， function （selectedID）{
'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.
(document).ready(function() { var socket = io.connect();
('.box').click(function() { var selectedID =
(this).attr("id"); socket.emit('click', selectedID); }); socket.on('changeColor', function(selectedID) {
这篇关于如何使用ON / OFF按钮控制socket.io的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
