个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 01:24:35 24 4
gpt4 key购买 nike

我正在尝试将按钮的当前背景颜色发送到服务器，该服务器将根据按钮的颜色更改 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>

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

最佳答案

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

您的服务器代码当前设置为监听任何“颜色”消息，即:

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

但是，您的客户端代码不会在该消息“ channel ”上发送颜色数据。您应该会发现，将 '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( .. ) 方法使您的代码对不规则的情况敏感放置空白等。

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

关于javascript - 如何使用套接字将按钮的背景颜色数据发送到服务器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51609051/

24 4 0
文章推荐： javascript - 链接对象的构造函数属性在重新分配原型(prototype)时不会被覆盖
文章推荐： javascript - URL 在 gMail 中被强制重定向
文章推荐： JavaScript 抛出新错误无法按要求工作
文章推荐： javascript - onClick 不适用于
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com