Question

我正在尝试将按钮的当前背景色发送到服务器，服务器将根据按钮的颜色更改LED的状态，但是服务器未接收到任何数据。

var app = require('http').createServer(handler), 
    io = require('/home/pi/node_modules/socket.io').listen(app), 
    fs = require('fs'),
    firmata = require('/home/pi/node_modules/firmata'),
    board = new firmata.Board('/dev/ttyACM0', arduinoReady);
 
var ledPin = 13;
 
function arduinoReady(err) {
    if (err) {
        console.log(err);
        return;
    }
    console.log('Firmware: ' + board.firmware.name 
      + '-' + board.firmware.version.major 
      + '.' + board.firmware.version.minor);
 
    var ledOn = true;
    board.pinMode(ledPin, board.MODES.OUTPUT);
}
 
app.listen(8080);
console.log("Listening on http://raspberrypi:8080...");
 
// directs page requests to html files
 
function handler (req, res) {
  fs.readFile(__dirname + '/jie.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading jie.html');
    }
 
    res.writeHead(200);
    res.end(data);
  });
}
 
// this handles socket.io comm from html files
 
io.sockets.on('connection', function(socket) {
    socket.emit('connected...');
 
    socket.on('color', function(data) {
        if (data == 'rgb(255, 0, 0)'){
            console.log('+');
            board.digitalWrite(ledPin, board.HIGH);
            socket.broadcast.send("let there be light!");
		}
        
        if (data == 'rgb(0, 0, 0)' {
            console.log('-');
            board.digitalWrite(ledPin, board.LOW);
            socket.broadcast.send("who turned out the light?");
        }
        return;
    });
 
    socket.on('disconnect', function() {
        socket.send('disconnected...');
    });
});

<!DOCTYPE html>
    <head>
	<style>
#switchButton{
	background-color: rgb(0, 0, 0);
}
	
	</style>
        <title>example</title>
    </head>
    <body>
        <div>
            <p>
                <button id="switchButton" class="button">turn on</button>
               
            </p>
        </div>    
        <div>
            <ul id="messages">
            </ul>
        </div>
        <script src="/home/pi/node_modules/socket.io-client/dist/socket.io.js"></script>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script src="/home/pi/onjie/ion.js"></script>
        
        <script>
		window.addEventListener("beforeunload", function (e) {
    var confirmationMessage = 'It looks like you have been editing something. '
                            + 'If you leave before saving, your changes will be lost.';

    (e || window.event).returnValue = confirmationMessage; 

    return confirmationMessage; 
});
			
            $(function(){
				
			
                var socket = io.connect('http://raspberrypi:8080');
                
                socket.on('connect', function() {
                    $('#messages').append('<li>Connected to the server.</li>');            
                });
                
                socket.on('message', function(color) {    
                    $('#messages').append('<li>' + color + '</li>');
                });
                
                socket.on('disconnect', function() {
                    $('#messages').append('<li>Disconnected from the server.</li>');            
                });
                
                $('#switchButton').bind('click', function() {
                    var color = $("#switchButton").css("background-color");
                    socket.send(color);
                    $('#color').append('<li>me: ' + color + '</li>');

                    if (color == 'rgb(0, 0, 0)')
                        $("#switchButton").css("background-color", "rgb(255, 0, 0)");
                    else 
                        $("#switchButton").css("background-color", "rgb(0, 0, 0)");
                        console.log(color);
                });   
                 
            });
        </script>
    </body>
</html>

发送或接收数据的方式有问题吗？我尝试使用相同的方法，但是使用了按钮文本，但仍然有效，但是这种方法没有运气。

Answer 1

您是客户/浏览器代码，需要发送带有“事件名称”的颜色数据-在您的情况下，将是“颜色”。

您的服务器代码当前已设置为侦听任何“彩色”消息，即：

socket.on('color', function(data) {
    /* 
    Server side logic to handle "color" messages
    */
});

但是，您的客户代码未在该消息“通道”上发送颜色数据。您应该发现将'color'作为第一个参数添加到.send()将解决此问题，如下所示：

$('#switchButton').bind('click', function() {  

   var color = $("#switchButton").css("background-color");
   socket.send('color', color); /* <-- include 'color' to send "color message" 
                                       with color data  */

   /* Remaining click code for #switchButton here */
})

关于将实际颜色数据发送到服务器的方式，这应该没问题，但是您可能会发现rgb( .. )方法使您的代码对不规则放置的空格等敏感。< / p>

作为防止此类问题的建议，请考虑将客户端和服务器代码更新为使用red而不是rgb(255, 0, 0)，使用black而不是rgb(0, 0, 0)（请注意， CSS也支持）

如何使用套接字将按钮的背景色数据发送到服务器

1 个答案: