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

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

voodjuk

voodjuk

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

ShouseD

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

voodjuk

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

ShouseD

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

voodjuk

New member
ShouseD написал(а):
Когда то давно работал с 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

ShouseD

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

voodjuk

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

voodjuk

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

ShouseD

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

voodjuk

New member
N

NutsXXXL

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

Shara

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

voodjuk

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

NutsXXXL

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

Shara

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

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

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

voodjuk

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

Shara

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

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