我有一个函数,它应该与烧瓶服务器通信并获取gpio按钮的最新状态,以便按钮的颜色属性可以在所有客户端上同步 . 在桌面chrome上,该功能完美运行,但在raspberry pi chrome-browser上,该功能甚至没有被客户端调用 .
HTML代码:
<div id="centerArea">
<div id="temperatureBox">
<div id="temperature">
<div id="temperatureValue"></div>° <sup>C</sup>
</div>
<div id="humidity">
Humidity: <div id="humidityValue"></div>%
</div>
</div>
</div>
<div id="buttonsBar">
<div id="buttons">
<button type="submit" value="Button1" class="sync" id="B1" name="B1" onclick="b1(); return false;">Button1</button>
</div>
<div id="buttons">
<button type="submit" value="Button2" class="sync" id="B2" name="B2" onclick="b2(); return false;">Button2</button>
</div>
<div id="buttons">
<button type="submit" value="Button3" class="sync" id="B3" name="B3" onclick="b3(); return false;">Button3</button>
</div>
<div id="buttons">
<button type="submit" value="Button4" class="sync" id="B4" name="B4" onclick="b4(); return false;">Button4</button>
</div>
</div>
烧瓶代码:
@app.route('/dhtTemp', methods=['GET','POST'])
def readTemperature():
#sleep(3)
dht22.trigger()
temperature = str('%.2f' % (dht22.temperature()))
return (temperature)
@app.route('/dhtHum', methods=['GET','POST'])
def readHumidity():
#sleep(3)
dht22.trigger()
humidity = str('%.2f' % (dht22.humidity()))
return (humidity)
@app.route('/B1status', methods=['GET','POST'])
def readBStatus():
b1status = str(gpio.input(relayPins[0]))
#b3status = str(gpio.input(relayPins[2]))
#b4status = str(gpio.input(relayPins[3]))
return (b1status)
@app.route('/B2status', methods=['GET','POST'])
def readB2Status():
b2status = str(gpio.input(relayPins[1]))
return (b2status)
javascript代码:
function get_temps(){
$.getJSON("dhtTemp",
function(temperature){
$('#temperatureValue').text(temperature)
}
);
$.getJSON("dhtHum",
function(data){
$('#humidityValue').text(" " + data)
}
);
}
function get_Bstatus(){
function get_B1status(){
$.getJSON("B1status",
function(b1status){
if (b1status == "1"){
document.getElementById("B1").style.borderColor = "red";
}
else{
document.getElementById("B1").style.borderColor = "green";
}
}
);
}
function get_B2status(){
$.getJSON("B2status",
function(b2status){
if (b2status == "1"){
document.getElementById("B2").style.borderColor = "red";
}
else{
document.getElementById("B2").style.borderColor = "green";
}
}
);
}
}
setInterval('get_Bstatus()', 1000)
奇怪的是,即使它也使用相同的$ .get函数,检索温度和湿度的代码也能正常运行 . 但是服务器甚至没有从客户端获取加载函数get_Bstatus的任何请求
服务器 - 客户端交互的日志:
192.168.1.73 - - [18/Jul/2016 15:16:49] "GET /dhtTemp HTTP/1.1" 200 -
192.168.1.73 - - [18/Jul/2016 15:16:49] "GET /dhtHum HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:49] "GET /B1status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:49] "GET /B2status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:50] "GET /B1status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:50] "GET /B2status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:51] "GET /dhtTemp HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:51] "GET /B1status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:51] "GET /dhtHum HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:51] "GET /B2status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:52] "GET /B1status HTTP/1.1" 200 -
192.168.1.228 - - [18/Jul/2016 15:16:52] "GET /B2status HTTP/1.1" 200 -
192.168.1.73 - - [18/Jul/2016 15:16:53] "GET /dhtTemp HTTP/1.1" 200 -
192.168.1.73 - - [18/Jul/2016 15:16:53] "GET /dhtHum HTTP/1.1" 200 -
以73结尾的ip地址是在chrome-browser上的raspberry pi 3本身打开的客户端,以228结尾的客户端是在Windows笔记本电脑上以chrome打开的客户端 . 客户端在覆盆子pi上从不调用函数B1status和B2status,即使湿度和温度的函数调用没有任何问题 .
这正是为什么我根本无法弄清楚为什么只有这两个功能不起作用而另外两个功能正常工作的原因 .
任何一个客户端都没有控制台错误,当在覆盆子pi的客户端上单击按钮时,它会在Windows系统上的客户端上进行适当更新,因此代码在我能够分辨的情况下运行,而不是在铬上运行-browser .
谢谢
UPDATE
显然我只需要分别设置功能的间隔 . 如前面链接的javascript代码所示,函数get_b1status和get_b2status由父函数get_Bstatus调用 .
当我分离函数并单独调用它们时,代码开始在所有客户端上运行 . 所以更新代码看起来像这样:
counter1 = "";
counter2 = "";
counter3 = "";
counter4 = "";
function get_B1status(){
$.getJSON("B1status",
function(b1status){
if (counter1 != b1status){
if (b1status == "1"){
document.getElementById("B1").style.borderColor = "red";
counter1 = b1status;
}
else{
document.getElementById("B1").style.borderColor = "green";
counter1 = b1status;
}
}
}
);
}
function get_B2status(){
$.getJSON("B2status",
function(b2status){
if (counter2 != b2status){
if (b2status == "1"){
document.getElementById("B2").style.borderColor = "red";
counter2 = b2status;
}
else{
document.getElementById("B2").style.borderColor = "green";
counter2 = b2status;
}
}
}
);
}
function get_B3status(){
$.getJSON("B3status",
function(b3status){
if (counter3 != b3status){
if (b3status == "1"){
document.getElementById("B3").style.borderColor = "red";
counter3 = b3status;
}
else{
document.getElementById("B3").style.borderColor = "green";
counter3 = b3status;
}
}
}
);
}
function get_B4status(){
$.getJSON("B4status",
function(b4status){
if (counter4 != b4status){
if (b4status == "1"){
document.getElementById("B4").style.borderColor = "red";
counter4 = b4status;
}
else{
document.getElementById("B4").style.borderColor = "green";
counter4= b4status;
}
}
}
);
}
setInterval('get_B1status()', 1000)
setInterval('get_B2status()', 1000)
setInterval('get_B3status()', 1000)
setInterval('get_B4status()', 1000)
我甚至设法将按钮状态的值存储在一个变量中,如果在下一个时间间隔状态没有改变,那么该函数基本上不会从服务器节省一点处理要求 .
1 回答
只需尝试fetch()首先安装polyfills
npm i --save es6-promise isomorphic-fetch
然后: