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

[Melandr]

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

 

[Melandr]

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

Веб-сервер ESP8266 NodeMCU с использованием событий, отправленных сервером (автоматическое обновление показаний датчика) | joyta.ru

В этой статье мы расскажем, как использовать SSE (события отправленные сервером) с платой ESP8266 NodeMCU, запрограммированной с помощью Arduino IDE. SSE

www.joyta.ru

ESP32 IoT Shield PCB with Dashboard for Outputs and Sensors | Random Nerd Tutorials

Build an IoT shield PCB for ESP32 and web server Dashboard to control it. The shield has BME280 sensor, LDR, motion sensor, an LED, a pushbutton and external output.

randomnerdtutorials.com

ESP8266 NodeMCU Web Server using Server-Sent Events (SSE) | Random Nerd Tutorials

How to use Server-Sent Events (SSE) with an ESP8266 NodeMCU Web Server programmed using Arduino IDE. SSE allows the browser to receive updates from a server via HTTP connection.

randomnerdtutorials.com

 

[Melandr]

Добрый день!
Не подскажите, как обновить значение ползунка и кнопки по событиям SSE.
Вот код JS

<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]

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

 

[Melandr]

со слайдером разобрался

 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

Не знаю, может думаю неправильно, попробую вызывать функцию toggleCheckbox по изменению состояния motorState

[CODE] source.addEventListener('motorState', function(e) {

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

 }, false);

[/CODE]

 

[Melandr]

В 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]

Кнопка объявляется не на странице, а в коде 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. Но пока не могу понять как.