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

Решено Обновление значений без перезагрузки страницы.

voodjuk

New member
Добрый день, есть
Esp выступает как сервер, передаёт в браузер значения температуры, состояния gipio и пр.
Не могу сообразить как сделать чтобы данные обнавлялись динамически, скажем станица через JavaScript каждую секунду посылает запрос серверу по Ajax, в esp в отдельной функции формируется ответ, который принимается страницей и обновляет все значения.
прошу поделиться опытом, может кто-то делал что-то подобное.
 
Последнее редактирование:

ShouseD

New member
Это вам, скорее всего, еще отдельно Web сервер надо поднимать. Где вы функцию Javascript собираетесь писать?
 

voodjuk

New member
Это вам, скорее всего, еще отдельно Web сервер надо поднимать. Где вы функцию Javascript собираетесь писать?
Там же в esp, писать в строку, загружать как и всю страницу, ajax от клиента к серверу работает, анимация работает, проблема только в непонимании как и чем передать значения в java script, ибо никогда web программированием не занимался, только сейчас начинаю осваивать
 
Последнее редактирование:

ShouseD

New member
Когда то давно работал с Ajax, подзабыл уже. А какой конкретно скетч используете?
 

voodjuk

New member
Когда то давно работал с Ajax, подзабыл уже. А какой конкретно скетч используете?
Код:
wifi.setmode(wifi.STATION)
wifi.sta.config("SSID","password")
print(wifi.sta.getip())

led1 = 3

led2 = 4

gpio.mode(led1, gpio.OUTPUT)

gpio.mode(led2, gpio.OUTPUT)

srv=net.createServer(net.TCP)

srv:listen(80,function(conn)

conn:on("receive", function(client,request)

local buf = "";

local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");

if(method == nil)then

_, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");

end

local _GET = {}

if (vars ~= nil)then

for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do

_GET[k] = v

end

end

buf = buf.."<head> <script language=\"javascript\">";

buf = buf.."function colorchange(id) { var xmlhttp; xmlhttp=new XMLHttpRequest();";

buf = buf.."if(document.getElementById(id).value == \'OFF\' )";

buf = buf.."{ document.getElementById(id).style.background = \'#ff0000\'; ";

buf = buf.."document.getElementById(id).value = \'ON\';";

buf = buf.."xmlhttp.open(\"GET\",\"a.htm?pin=ON2\",true);xmlhttp.send();}";

buf = buf.."else { document.getElementById(id).style.background = \'#00ff00\'; ";

buf = buf.."document.getElementById(id).value = \'OFF\'; xmlhttp.open(\"GET\",\"a.htm?pin=OFF2\",true);xmlhttp.send();}}";

buf = buf.." </script></head> <body>";

buf = buf.."<input type=\"button\" id=\"btn\" onclick=\"colorchange(\'btn\');\" value =\"OFF\" style=\"background:#00ff00;\"></body></html>";

local _on,_off = "",""

if(_GET.pin == "ON1")then

gpio.write(led1, gpio.HIGH);

elseif(_GET.pin == "OFF1")then

gpio.write(led1, gpio.LOW);

elseif(_GET.pin == "ON2")then

gpio.write(led2, gpio.HIGH);

elseif(_GET.pin == "OFF2")then

gpio.write(led2, gpio.LOW);

end

client:send(buf);

client:close();

collectgarbage();

end)

end)
 

ShouseD

New member
В примерах есть такой скетч "AdvancedWebServer". Загрузите его. Каждые 5 секунд сам обновляет страницу. Посмотрите как там работает) Вроде никакого Ajax.
 

voodjuk

New member
В примерах есть такой скетч "AdvancedWebServer". Загрузите его. Каждые 5 секунд сам обновляет страницу. Посмотрите как там работает) Вроде никакого Ajax.
Спасибо! Было бы очень интересно взглянуть, только можете дать ссылку, пока тут плохо ориентируюсь
 
Последнее редактирование:

voodjuk

New member
В принципе можно на стороне клиента скриптом обновлять страницу и получать обновленные данные с сервера.
Но все таки, еще подумаю как реализовать полноценный ajax запрос-ответ.
 

ShouseD

New member
А, вы про связку с ардуино:)
Нет, зачем. ESP самостоятельно работает. Скетч можно взять из примеров Arduino IDE. Файл - Примеры - ESP8266WebServer - AdvancedWebServer. Перед этим нужно установить библиотеку ESP. Я так понял вы не через Arduino IDE работаете? Если что смотрите это видео:
 

voodjuk

New member

NutsXXXL

New member
@voodjuk неее через websockets все просто делаеться
есть прекрасные примеры
но я считаю этот способ менее универсальным
 

Shara

New member
@voodjuk неее через websockets все просто делаеться
есть прекрасные примеры
но я считаю этот способ менее универсальным
Что значит менее универсальным? Страничка в любом случае отдаётся по http, далее цепляемся к вебсокету и обновляем данные по мере их изменений. Если устройство не умеет в вебсокеты - деградируем до поллинга.
 

voodjuk

New member
....деградируем до поллинга.
Я правильно понмаю, чтобы иметь возможность слать клиенту данные, то сервер, после того как выгрузил клиенту HTTP страницу, не закрывает соеденение, а по запросу передаёт данные по тому же каналу?
Кто-нибудь может поделиться JavaScript функцией, которой можно было бы принимать эти данные от сервера?
 

NutsXXXL

New member
@Shara вот именно если бы да кабы
полюс еще отдельный порт это вопрос к файрволам и роутерам c nat
да это все надумано.. но в целом - не универсально
 

Shara

New member
Я правильно понмаю, чтобы иметь возможность слать клиенту данные, то сервер, после того как выгрузил клиенту HTTP страницу, не закрывает соеденение, а по запросу передаёт данные по тому же каналу?
Кто-нибудь может поделиться JavaScript функцией, которой можно было бы принимать эти данные от сервера?
Сервер закрывает http соединение, но javascript открывает ws соединение и оно не закрывается пока клиент не закроет страницу. В таком случае, сервер может инициировать отправку данных клиенту.

Вот тут хорошая статья с примером реализации.

@Shara вот именно если бы да кабы
полюс еще отдельный порт это вопрос к файрволам и роутерам c nat
да это все надумано.. но в целом - не универсально
Вебсокеты используют те же самые 80 или 443 порты.
 

voodjuk

New member
Нашел кучу примеров для arduinoIDE, и ни одного для своего nodemcu, походу надо менять среду разработки..
 

Shara

New member
Нашел кучу примеров для arduinoIDE, и ни одного для своего nodemcu, походу надо менять среду разработки..
NodeMCU не нужен, а вообще под вебсокеты есть пример в последнем официальном SDK, который с RTOS

UPD. В файле [inline]./gen_misc.sh[/inline] у примера был косяк, пофиксил, но pull request ещё не приняли.
 
Последнее редактирование:
Сверху Снизу