Обновление данных на веб странице

[Tirarex]

И так, имею веб страницу на esp8266
На странице пара переключателей управляющих светодиодами,
а так же пара текстовых полей, в которые выводятся данные с датчиков

Вопрос- как не обновляя страницу, обновлять поля с данными, а так же получать состояние gpio (при его изменении) и ставить переключатели в соответствующее положение ?

Работаю в arduino ide

 

[lsm]

Два подхода:

1. Вставить в HTML страницу Javascript фрагмент который будет делать RESTful запрос на обновление данных, и при получении ответа обновлять соответствующие поля.
2. В прошивку вставить обработчик RESTful запроса который читает состояние ESP8266 и посылает ответ.

Как вариант, RESTful можно заменить на WebSocket. Плюс: сервер (то есть ESP8266) сможет сам инициировать отсыл данных - например если состояние изменилось. Минус: WebSocket это постоянно висящее соединение, то есть довольно ресурсоемко. Много клиентов может не потянуть.

 

[tka4ev_s]

Добрый день!
Стакнулся с проблемой работы javascript в esp8266 . Использую веб сервер без файловой системы.
при добавлении кода перестает отвечать на запросы браузера. Также заметил что периодически меняется количество строк javascript при котором работает веб сервер.
<script>\
function fun1() {\
var rng=document.getElementById('r1'); \
var i1=document.getElementById('i1'); \
i1.value=rng.value; \
}\
function fun2() {\
var rng=document.getElementById('i1');\
var r1=document.getElementById('r1'); \
r1.value=rng.value; \
}\
var xmlHttp=createXmlHttpObject();\
function createXmlHttpObject(){\
if(window.XMLHttpRequest){\
xmlHttp=new XMLHttpRequest();\
}else{\
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');\
}\
return xmlHttp;\
}\
function process(){\
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){\
xmlHttp.open('PUT','xml',true);\
xmlHttp.onreadystatechange=handleServerResponse;\
xmlHttp.send(null);\
}\
setTimeout('process()',1000);\
}\
function handleServerResponse(){\
if(xmlHttp.readyState==4 && xmlHttp.status==200)\
{\
xmlResponse=xmlHttp.responseXML;\
xmldoc = xmlResponse.getElementsByTagName('response');\
message = xmldoc[0].firstChild.nodeValue;\
document.getElementById('t2').innerHTML='Уровень сигнала Wi-Fi:'+ message+'dB';\
xmldoc = xmlResponse.getElementsByTagName('flag1');\
message = xmldoc[0].firstChild.nodeValue;\
xmldoc = xmlResponse.getElementsByTagName('num1');\
num1 = xmldoc[0].firstChild.nodeValue;\
if(message==0 && num1>=1){\
document.getElementById('f1').style.background = 'red';\
}\
if(message==1 && num1>=1){\
document.getElementById('f1').style.background = 'yellow';\
}\
if(message==2 && num1>=1){\
document.getElementById('f1').style.background = 'green';\
}\
}\
}\
</script>\

 

[lsm]

Вы это в код вшиваете?

 

[CodeNameHawk]

Я переделал из "SMART_ROOM_AJAX" (сайт http://esp8266-arduinoide.ru/ajax/ правда не работает)

var xmlHttp=createXmlHttpObject();
function createXmlHttpObject(){
if(window.XMLHttpRequest){
    xmlHttp=new XMLHttpRequest();
}else{
    xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
   xmlHttp.open('PUT','xml',true);
   xmlHttp.onreadystatechange=handleServerResponse;
   xmlHttp.send(null);
}
setTimeout('process()',1000);
}
function handleServerResponse(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
   xmlResponse=xmlHttp.responseXML;
  
   xmldoc = xmlResponse.getElementsByTagName('response');
   message = xmldoc[0].firstChild.nodeValue;
   document.getElementById('runtime').value=message;
  
   xmldoc = xmlResponse.getElementsByTagName('alert_time');
   message = xmldoc[0].firstChild.nodeValue;
   document.getElementById('ALERTTIME').value=message;
       
   xmldoc = xmlResponse.getElementsByTagName('time');
   message = xmldoc[0].firstChild.nodeValue;
   document.getElementById('TIME').value=message;
  
  }
}

Работает стабильно.

 

[tka4ev_s]

Я переделал из "SMART_ROOM_AJAX" (сайт http://esp8266-arduinoide.ru/ajax/ правда не работает)

var xmlHttp=createXmlHttpObject();
function createXmlHttpObject(){
if(window.XMLHttpRequest){
    xmlHttp=new XMLHttpRequest();
}else{
    xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
   xmlHttp.open('PUT','xml',true);
   xmlHttp.onreadystatechange=handleServerResponse;
   xmlHttp.send(null);
}
setTimeout('process()',1000);
}
function handleServerResponse(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
   xmlResponse=xmlHttp.responseXML;
 
   xmldoc = xmlResponse.getElementsByTagName('response');
   message = xmldoc[0].firstChild.nodeValue;
   document.getElementById('runtime').value=message;
 
   xmldoc = xmlResponse.getElementsByTagName('alert_time');
   message = xmldoc[0].firstChild.nodeValue;
   document.getElementById('ALERTTIME').value=message;
     
   xmldoc = xmlResponse.getElementsByTagName('time');
   message = xmldoc[0].firstChild.nodeValue;
   document.getElementById('TIME').value=message;
 
  }
}

Работает стабильно.

Может кто то у себя проверит код

 

[CodeNameHawk]

Сократите до одного блока, который не работает. Поправьте комментарии, так как не читаемые.

 

[tka4ev_s]

поправил и закомментировал часть скрипта которая не работает подскажите в чем ошибка

 

[Mоnk]

подскажите в чем ошибка

А Вы можете посмотреть, что у Вас /xml в браузер выдаёт?

 

[tka4ev_s]

А Вы можете посмотреть, что у Вас /xml в браузер выдаёт?

<Donnees>
<response>-57</response>
<flag1>0</flag1>
<num1>15</num1>
<flag2>0</flag2>
<flag3>0</flag3>
<flag4>0</flag4>
<flag5>0</flag5>
<flag6>0</flag6>
<flag7>0</flag7>
<flag8>0</flag8>
<flag9>0</flag9>
<flag10>0</flag10>
<flag11>0</flag11>
<flag12>0</flag12>
<flag13>0</flag13>
<flag14>0</flag14>
<flag15>0</flag15>
</Donnees>

 

[Mоnk]

<Donnees>
<response>-57</response>
<flag1>0</flag1>
<num1>15</num1>
<flag2>0</flag2>
</Donnees>

То есть сервак работает, и затык где-то в Джаве, которая, как я замечал не раз у себя, споткнувшись раз в коде, дальше выполнять его не хочет. Лично у меня самая распространенная ошибка - отсутствие "объекта" при получении данных из XML. Это можно посмотреть в консоли браузера.