• Система автоматизации с открытым исходным кодом на базе esp8266/esp32 микроконтроллеров и приложения IoT Manager. Наша группа в Telegram

Двунаправленный обмен между ESP8266 и web-страницей

Melandr

Member
Добрый вечер, уважаемые форумчане!
Хотел бы посоветоваться по поводу двухстороннего обмена между web-страницей во FLASH ESP и открытой в двух разных браузерах. По поводу websocket знаю, видел как это работает, понравилось. Но сейчас разбирался с библиотекой асинхронного сервера и AJAX. Вопрос состоит вот в чем. При открытии html-страницы из памяти ESP я могу передавать в ESP необходимые параметры, это работает. Но если я открываю эту же страницу на другом устройстве в этой же сети, или в другом браузере , то актуальные данные появляются только при первом открытии или обновлении страницы. Если я изменяю эти параметры, то они меняются только на той странице, в которой менял. Понимаю, что можно сделать автообновление html-странцы, но как-то не по фэншую. Также возможно изменить параметр кнопками на самой ESP, хотелось бы сразу получить обновленные данные на открытой странце. Насколько я понимаю, технология AJAX должна позволять обмен в обе стороны. Не подскажете, что следует погуглить? Возможно немного сумбурно, но как-то так. Повторюсь websocket этот вопрос решает, но пока до него не добрался.
 

Melandr

Member
Вроде бы нашел что-то похожее, нужно разбираться.
 

Melandr

Member
Добрый день!
Не подскажите, как обновить значение ползунка и кнопки по событиям SSE.
Вот код JS
JavaScript:
<script>
var sliderValue;

function toggleCheckbox(element) {
  var xhr = new XMLHttpRequest();
  if(element.checked){ xhr.open("GET", "/update?state=1", true); console.log("button - нажата");}
  else { xhr.open("GET", "/update?state=0", true);console.log("button - отжата");}
  xhr.send();
}
function updateSliderDimmer(element) {
  sliderValue = document.getElementById("dimmerSlider").value;
  document.getElementById("dimmerValue").innerHTML = sliderValue;
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();
  console.log("Скорость: " + sliderValue);
}
if (!!window.EventSource) {
 var source = new EventSource('/events');
 source.addEventListener('open', function(e) {
  console.log("Events Connected");
 }, false);
 source.addEventListener('error', function(e) {
  if (e.target.readyState != EventSource.OPEN) {
    console.log("Events Disconnected");
  }
 }, false);
 source.addEventListener('message', function(e) {
  console.log("message", e.data);
 }, false);
 source.addEventListener('uptime', function(e) {
  console.log("uptime", e.data);
  document.getElementById("uptime").innerHTML = e.data;
 }, false);
 source.addEventListener('currentSpeed', function(e) {
  console.log("currentSpeed", e.data);
  sliderValue = e.data;
  console.log("sliderValue: " + sliderValue); 
 }, false);
}
</script>
Я в событии меняю значение sliderValue, но походу нужно менять какое-то другое свойство.
 

CodeNameHawk

Moderator
Команда форума
Так на глаз найдите разницу в:
document.getElementById("uptime").innerHTML = e.data;
sliderValue = e.data;
 

Melandr

Member
со слайдером разобрался
Код:
 source.addEventListener('currentSpeed', function(e) {
  console.log("currentSpeed", e.data);
  sliderValue = e.data;
  document.getElementById("dimmerSlider").value = sliderValue;
  document.getElementById("dimmerValue").innerHTML = sliderValue;
  console.log("sliderValue: " + sliderValue);
}, false);
Не могу понять как кнопку менять при событии от ESP
1613831253505.png
Не знаю, может думаю неправильно, попробую вызывать функцию toggleCheckbox по изменению состояния motorState
Код:
[CODE] source.addEventListener('motorState', function(e) {

  console.log("motorState", e.data);

 }, false);
[/CODE]
 

Melandr

Member
В JS этой функцией делается GET запрос
Код:
function toggleCheckbox(element) {
  var xhr = new XMLHttpRequest();
  if(element.checked){ xhr.open("GET", "/update?state=1", true); console.log("button - нажата");}
  else { xhr.open("GET", "/update?state=0", true);console.log("button - отжата");}
  xhr.send();
}
И изменяется вид самого чекбокса и в программе на ESP изменяется переменная. Как теперь сделать, чтобы во втором браузере изменился вид чекбокса. Он изменяется только при обновлении страницы вручную.
 

Melandr

Member
Кнопка объявляется не на странице, а в коде ESP.
Код:
// Replaces placeholder with button section in your web page
String processor(const String& var) {
  //  Serial.println(var);
  if (var == "BUTTONPLACEHOLDER") {
    String buttons = "";
    String outputStateValue = outputState();
    buttons += "<p><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"output\" " + outputStateValue + "><span class=\"slider\"></span></label></p>";
    return buttons;
  }
  else if (var == "DIMMERVALUE") {
    return dimmerSliderValue;
  }
  else if (var == "UPTIME") {
    return String(uptime);
  }

  return String();
}
Поэтому скорее всего нужно менять на стороне ESP. Но пока не могу понять как.
 
Сверху Снизу