jQuery .trigger(' change')触发了jQuery-knob release-function

时间:2017-08-10 17:28:56

标签: javascript jquery node.js socket.io jquery-knob

我在运行NodeJS的Raspberry Pi 3上创建了一个Web界面。我的问题是,当第二个客户端连接我的服务器端socket.on volumeCheck将音量值广播到触发客户端socket.on volumeCheck的所有客户端,它触发jQuery-knob的释放功能,该函数将卷发送到服务器,最终以无尽的循环。

任何人都可以帮我解决这个问题吗?

server.js

var express     = require('express'),
        path        = require('path'),
        bodyParser  = require('body-parser'),
        jquery      = require('jquery'),
        YamahaAPI   = require("yamaha-nodejs"),
        exec        = require('child_process').exec,    
        app         = express(),
        server      = require('http').Server(app);
        io          = require('socket.io')(server);

    var yamaha = new YamahaAPI("192.168.0.32");
    var child;
    var currentVolume;

    app.use(bodyParser.json()); // support json encoded bodies
    app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
    app.use(express.static('public'));

    io.sockets.on('connection', function (socket) {

        //******************************************    
        //      Yamaha RX-V 575 Control
        //******************************************    

        //volume
        yamaha.getBasicInfo(0).done(function(basicInfo){
            var volume = basicInfo.getVolume(); 
            socket.emit('volumeCheck', volume  );
        });
        socket.on('volumeCheck', function (vol) {
            console.log( "[Yamaha RX-575]: volume set to " + vol/10 + " dB" );  
            socket.broadcast.emit('volumeCheck', vol );
            yamaha.setVolumeTo(vol, 0);
        });

        //bass volume
        yamaha.getBasicInfo(0).done(function(basicInfo){
            var data = basicInfo.getBass(); 
            socket.emit('bassCheck', data  );
        });
        socket.on('bassCheck', function (data) {
            console.log( "[Yamaha RX-575]: bass set to " + data );  
            socket.broadcast.emit('bassCheck', data );
            yamaha.setBassTo(data);
        });

        //treble volume
        yamaha.getBasicInfo(0).done(function(basicInfo){
            var data = basicInfo.getTreble(); 
            socket.emit('trebleCheck', data  );
        });
        socket.on('trebleCheck', function (data) {
            console.log( "[Yamaha RX-575]: treble set to " + data );    
            socket.broadcast.emit('trebleCheck', data );
            yamaha.setTrebleTo(data);
        });

        //mute on\off
        yamaha.getBasicInfo(0).done(function(basicInfo){
            var data = basicInfo.isMuted(); 
            if (data == true) {
                socket.emit('muteCheck', 1 );
            } else {
                socket.emit('muteCheck', 0 );
            }
        });
        socket.on('muteCheck', function (data) {
            if (data == 1) {
                console.log( "[Yamaha RX-575]: unmuted.");  
                socket.broadcast.emit('muteCheck', 0 );
                yamaha.muteOff(0);
            } else { 
                console.log( "[Yamaha RX-575]: muted.");    
                socket.broadcast.emit('muteCheck', 1 );
                yamaha.muteOn(0); 
            }
        });


        //******************************************    
        //      Socket Control
        //******************************************    


        function powerSwitchServer(stdNr) {
            socket.on(stdNr, function (state) {
                socket.broadcast.emit(stdNr, state );
                if ( state == 1 ) {
                    console.log('Steckdose ' + stdNr + ' ausgeschaltet');
                    child = exec("/scripts/" + stdNr + " 1", function (error, stdout, stderr) {
                        if (error !== null) { console.log('exec error: ' + error); }
                    });         
                } else {
                    console.log('Steckdose ' + stdNr + ' eingeschaltet');
                    child = exec("/scripts/" + stdNr + " 0", function (error, stdout, stderr) {

                        if (error !== null) { console.log('exec error: ' + error); }    
                    }); 
                }   
            });
        }

        yamaha.getBasicInfo(0).done(function(basicInfo){
            var state = basicInfo.isOn();
            if ( state == true ) {
                    socket.emit('std01', 1 );
            } else {
                    socket.emit('std01', 2 );
            }       

        });

        powerSwitchServer("std01");
        powerSwitchServer("std02");





    });


    server.listen(80);

client.html

<html>
<head>
    <link rel="stylesheet" href="/css/stylesheet.css">
    <link rel="stylesheet" href="/css/jquery-ui.css">

    <script src="/js/jquery-3.2.1.min.js"></script> 
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/jquery.knob.min.js"></script>  
    <script src="/socket.io/socket.io.js"></script>
<script>

 var socket = io.connect('http://192.168.188.32');

 function powerSwitchClient(name, socket) {

    var nameid = $( "#" + name );
    socket.on(name, function (data) {
        if ( data == 1 ) {
            nameid.prop("checked", true);
        } else {
            nameid.prop("checked", false);
        }
    }); 
    nameid.click(function() {
        if (nameid.is(':checked')) {
            socket.emit( name, "1" );
        } else {
            socket.emit( name, "2" );
        }
    });
 }

 $( function() {     

    socket.on('volumeCheck', function (data) {
        $('.volumeDial').val(data/10).trigger("change");;
    });

    socket.on('bassCheck', function (data) {
        $('.bassDial').val(data/10).trigger("change");;
    });

    socket.on('trebleCheck', function (data) {
        $('.trebleDial').val(data/10).trigger("change");;

    });


    $(".volumeDial").knob({
            'min':-70,
            'max':-15,
            'step':0.5,
            'thickness':0.1,
            'fgColor':'#8dffab',
            'release' : function (v) {
                socket.emit('volumeCheck', v*10);},

            'format' : function (value) {
                return value + ' dB';},
    });


    $(".bassDial").knob({
            'min':-6,
            'max':6,
            'step':0.5,
            'width':100,
            'height':100,
            'thickness':0.1,
            'fgColor':'#8dffab',
            'displayInput': false,
            'release' : function (v) {
                socket.emit('bassCheck', v*10);},

        });


    $(".trebleDial").knob({
            'min':-6,
            'max':6,
            'step':0.5,
            'width':100,
            'height':100,
            'thickness':0.1,
            'fgColor':'#8dffab',
            'displayInput': false,
            'release' : function (v) {
                socket.emit('trebleCheck', v*10);},

        });




    $( ".yamahaInputSel" ).checkboxradio({
      icon: false
    });


powerSwitchClient("std01", socket);
powerSwitchClient("std02", socket);


});

</script>
</head>
<body>

<form action="">
    <label class="switch">
    <input type="checkbox" id="std01">
    <span class="slider" ></span>
    </label>
</form>

<form action="">
    <label class="switch">
        <input type="checkbox" id="std02">
        <span class="slider" ></span>
    </label>
</form>

<div id="main Controls">

<input type="text" class="volumeDial">
<div id="dialDiv">
<input type="text" class="bassDial"><p>Bass</p>

<input type="text" class="trebleDial"><p>Höhen</p>
</div>

<br><br>

  <fieldset id="yamahaInputSel">
    <legend></legend>
    <label for="radio-1" >HDMI 1</label>
    <label for="radio-2" >HDMI 2</label> 
    <label for="radio-3" >HDMI 3</label>    
    <label for="radio-4" >HDMI 4</label>
    <label for="radio-5" >HDMI 5</label>
    <input type="radio" name="radio-1" id="radio-1" class="yamahaInputSel">
    <input type="radio" name="radio-1" id="radio-2" class="yamahaInputSel">
    <input type="radio" name="radio-1" id="radio-3" class="yamahaInputSel">

    <input type="radio" name="radio-1" id="radio-4" class="yamahaInputSel">
    <input type="radio" name="radio-1" id="radio-5" class="yamahaInputSel">
  </fieldset>

</div>


</body>
</html>

0 个答案:

没有答案