Socket.io 向所有客户端发出按钮按下答案

【问题标题】：Socket.io emit button press to all clientsSocket.io 向所有客户端发出按钮按下
【发布时间】：2017-02-28 05:51:12
【问题描述】：

我在向连接到我的服务器的所有客户端发送按钮状态时遇到了一些问题。我正在尝试使用 express 和 socket.io 打开树莓派托管服务器的灯。

我首先从客户端单击按钮，它将按钮的状态发送到我的服务器，然后将其发送给单击所有客户端页面上的按钮的所有客户端，但随后按钮陷入无限循环并继续点击。

我正在做的过程是否正确？我可以找到很多向所有客户端发出的示例，但我找不到任何发出按钮状态的示例。我也尝试过 emit.broadcast 但两个客户端轮流无休止地发送按钮状态。

有人对解决这个问题有什么建议吗？谢谢！

服务器端代码：

var express = require('express');  
var app = express();  
var server = require('http').createServer(app);  
var io = require('socket.io')(server);

var onoff = require('onoff'); 
var Gpio = onoff.Gpio;
var light = new Gpio(13, 'out');


app.use(express.static(__dirname + '/'));  
app.get('/', function(req, res,next) {  
res.sendFile(__dirname + '/brew.html');
 });

console.log('Starting Server...');

  var io = require('socket.io').listen(server);
  io.sockets.on('connection', function (client) {

  client.on('lightOn',function(on){
    light.writeSync(1);
    io.emit('lightOn');
  });
  client.on('lightOff',function(off){
    light.writeSync(0);
    io.emit('lightOff');
   });
  });

 server.listen(3000);

 function lightOn(){
 light.writeSync(1);
 }
   function lightOff(){
   light.writeSync(0);
  }

客户代码：

  <h3 id="h3Brew">Light</h3>
  <input type="checkbox" data-toggle="toggle" data-on="Off" data-off="On" id="toggle">

  <script>
  var socket = io.connect();
  $(function() {
  $('#toggle').bootstrapToggle({
      on: 'ON',
      off: 'OFF'
    });
  })
        $("#toggle").change(function(){
          if($("#toggle").prop("checked") == true){
           socket.emit('lightOn', 'on\n');
          }else{
           socket.emit('lightOff', 'off\n');}
         });

        socket.on('lightOn', function() {
          $('#toggle').bootstrapToggle('on');
        });
         socket.on('lightOff', function() {
          $('#toggle').bootstrapToggle('off');
        });

    </script>

【问题讨论】：

我认为$('#toggle').bootstrapToggle('on'); 触发了#toggle change 事件，所以你基本上有一个无限循环
感谢您的回复。我现在肯定看到了问题。您知道向所有客户端发出按钮按下的正确方法吗？

标签： jquery node.js express socket.io

【解决方案1】：

使用全局变量来区分由 socked 触发的更改事件和由用户触发的更改事件

你可以试试这样的

var websocket = false;
$("#toggle").change(function(){
      if(!websocket) {
          if($("#toggle").prop("checked") == true){
           socket.emit('lightOn', 'on\n');
          }else{
           socket.emit('lightOff', 'off\n');}
      } else {websocket = false;}
         });

        socket.on('lightOn', function() {
          websocket = true;
          $('#toggle').bootstrapToggle('on');
        });
         socket.on('lightOff', function() {
          websocket = true;
          $('#toggle').bootstrapToggle('off');

        });

【讨论】：