Tech Note 113 - 'Pushing' data to a client's webpage from an ESP Webserver using AJAX

Поділитися
Вставка
  • Опубліковано 27 жов 2024

КОМЕНТАРІ • 51

  • @santorcuato
    @santorcuato 5 років тому +3

    Great and useful as always. Thanks Dave for the simplicity. As mheys said there are more "pro" approaches but this one is very handable and the majority of makers are hobbyist. Perfect fit to star Ajax embedded in an mcu .

  • @tonykempson4331
    @tonykempson4331 5 років тому +1

    Thanks for a great real-life example of using asynchronous JavaScript with a microcontroller!

  • @merenelresearch8775
    @merenelresearch8775 3 роки тому

    Wow this is great! In my application I have to save in the permament memory of the ESP32 (I'm using virtual EEPROM) the hysteresis value of a termostat +/- 5°C, the value is sent to the ESP32 with a POST and then I need to display the same new value on the webpage and in addition I need to display the temperature changing form a sensor on the webpage. Thank you for your great example. Now I have to understand hot to send not just one data but an JSON through AJAX because I have quite a lot of data to send.

  • @leedevries5660
    @leedevries5660 5 років тому

    I was trying to do this last night without much success. I woke up this morning and you have a solution for me.
    Your blood is worth bottling!

    • @G6EJD
      @G6EJD  5 років тому

      Good to hear your finding it of value. Good luck in your projects.

    • @andrewkieran8942
      @andrewkieran8942 5 років тому

      Dave, you might not want to encourage his 'blood bottling' urges. ;-)

  • @mheys1
    @mheys1 5 років тому

    A good start, you can return all the sensor data in a single request using xml or json. It's still a pull from the web server though, you can use Websockets to create a true push from the webserver when a value changes, it's very efficient but a bit harder to develop.

    • @G6EJD
      @G6EJD  5 років тому

      It’s all a compromise when trying to make the example easy enough and relevant for most people who don’t really know where or how to start. I looked at various methods and in the chose this one.

  • @abarthpeze5247
    @abarthpeze5247 3 роки тому

    Very useful. - Thanks for sharing!

  • @Jorge196611
    @Jorge196611 3 роки тому

    Hello Dave, great video! but i have a little doubt: You talk about handle read function, but where do you define it? Thanks in advance.

    • @G6EJD
      @G6EJD  3 роки тому +1

      Which read function do you mean the sensor? String temp = String(bme.readTemperature(),2);

  • @peterpick8073
    @peterpick8073 4 роки тому

    Exactly what I needed! Excellent Video - Thank Dave.

  • @yanliu6914
    @yanliu6914 3 роки тому

    Thank you so much David! This is a treasure video!

  • @stahme10
    @stahme10 5 років тому

    Great video please keep them coming.

  • @MPElectronique
    @MPElectronique 4 роки тому

    Hello Dave. Is it possible to update let's say after 30 secs without AJAX with regular WEbServer ?
    Thanks.
    Marc.

    • @G6EJD
      @G6EJD  4 роки тому +1

      Marc Paradis hello Marc, yes just make this html one of your first entries after the opening html statements:

    • @MPElectronique
      @MPElectronique 4 роки тому

      @@G6EJD and can we send a text/plain every 30 secs by example?
      Thanks.
      Marc :)
      Have a nice day! :)

    • @G6EJD
      @G6EJD  4 роки тому

      You don’t have to send fully formatted HTML but your browser needs it, you could cut the page down to just the text ‘hello world’ for example it depends on whats going to read the text.

  • @viniciusnoyoutube
    @viniciusnoyoutube 5 років тому

    Excellent!
    I always want to do exactly this.

  • @uweri_3851
    @uweri_3851 5 років тому

    Thanks for sharing knowledge. For me you make very helpful tutorials. Hope you will make much more.

    • @G6EJD
      @G6EJD  5 років тому +1

      Thank you for your support as always it’s not easy or cheap to make these videos and yet I still get negative emails, but I don’t know why, I shall keep going for people like you who give me encouragement- the world is strange.

    • @uweri_3851
      @uweri_3851 5 років тому

      Hello, I am sad to hear that there are people who write negative emails on your toutorials. I hope that this does not prevent you from publishing many more such Toutorials. For me these are very helpful and I am sure that I am only one of many. Please continue....

    • @garlapatisaivarun5832
      @garlapatisaivarun5832 4 роки тому

      @@G6EJDSorry to hear that I visited your channel. It contains very good tutorials and helpfull.

  • @davebeckham5429
    @davebeckham5429 5 років тому

    Very useful. - Thanks for sharing.

  • @asiw
    @asiw 5 років тому

    Many thanks, very useful.

  • @bitblox
    @bitblox 5 років тому

    Hi Dave. My apologies for the simple question, but if you or one of your viewers can guide me in the right direction. I have a Wemos ESP 32s board. I am finding it near impossible to get it to accept a sketch. Even the simplest of sketch examples. I get ERROR Uploading 288400 bytes from C:\Users\Main\AppData\Local\Temp\arduino_build_263517/Blink.ino.bin to flash at 0x00000000
    warning: espcomm_send_command: didn't receive command response
    warning: espcomm_send_command(FLASH_DOWNLOAD_BEGIN) failed
    error: espcomm_upload_mem failed
    error: espcomm_upload_mem failed
    I have Installed what i believe is the correct Driver, by typing WEMOS into the board manager. I have selected com3, and reduced the upload speed to 115200
    Any recomendations? Kind regards. Craig

    • @G6EJD
      @G6EJD  5 років тому +1

      Craig, the Wemos ESP32s is likely to be a copy board of questionable design quality. Some boards such as the Firebeetle I find to be highly unreliable and it exhibits very similar problems to yours and I’ve never found a reliable solution. Things you can try are 1, always programme at 115200 baud, try selecting the ESP32 Dev Board, 3 reset the board just before the programming starts, takes some judgement to get the timing just right. On my board it usually takes about two or three goes, on the true Wemos D32 boards they work first time every time at 900k. Try a different cable short as possible

    • @bitblox
      @bitblox 5 років тому

      @@G6EJD I can't thank you enough for taking the time to help me out. I will definitely try that out as soon as the electrical storm passes over and I can switch my pc back on :) If you were to suggest a comparable board, what would you recommend?

    • @G6EJD
      @G6EJD  5 років тому

      Craig, without doubt the Lolin D32 it’s near perfect and very low power. It costs more but really only from the AliExpress Wemos or Lolin store to ensure no fakes!

    • @bitblox
      @bitblox 5 років тому

      @@G6EJD Once again, thank you for the feedback. I have ordered 3 of those boards from Ali, and will give those suggestions a go anyways on the 32s board :)

  • @wei48221
    @wei48221 5 років тому

    This is awesome. Thank you for sharinng..

  • @bainsonic
    @bainsonic 2 роки тому

    Isn’t the client pulling the required data rather then the server pushing it? :(

    • @G6EJD
      @G6EJD  2 роки тому

      Yes

    • @bainsonic
      @bainsonic 2 роки тому

      ​@@G6EJD why did you call the video "'pushing' data to a client..." then?

    • @G6EJD
      @G6EJD  2 роки тому

      As a learning exercise, to promote thought and analysis.

  • @tsg888826
    @tsg888826 5 років тому

    I afraid pure ajax may not work with latest browser due to security concern, suggest to code with jquery ajax such as
    $.get("/TEMPread",function(data,status){
    if (status=="success"){
    $("#TEMPvalue").text(data);
    }else{
    alert(status);
    }
    });

  • @jean-lucethelenedelvaux-hu7211
    @jean-lucethelenedelvaux-hu7211 4 роки тому

    cool video , how to do the reverse process : having a website loaded in the esp32 from which you would have an entry field where we could set a numeric value that could be used in the esp process. I ask that because all video that I have seen are about setting on/off led but never setting a dac (analog value) thx

    • @G6EJD
      @G6EJD  4 роки тому

      Jean-Luc, you would need an html input field to get the user entered value like in the examples I’ve provided then having got the ‘text’ value in the c+ convert it to eg an integer, like this int parameter = value.toint();
      Then dacwrite(DAC1, parameter);

    • @dynamitron
      @dynamitron 4 роки тому

      @@G6EJD would you be intérested to create a vidéo for that because presently I did not succeed to do it thank you

    • @G6EJD
      @G6EJD  4 роки тому

      There is only two lines to add to one of my example sketches to do this, I’ll see if I can produce a video

  • @imranaalam
    @imranaalam 5 років тому

    A gem

  • @quaternion-pi
    @quaternion-pi 5 років тому

    Great project. But I am trying to figure out why the vast majority (but not all) calls to update the humidity and pressure values fail, returning ERR_CONNECTION_RESET when xhttp.send() is sent to update those two variables. Commenting out all but one of the xhttp variable updates works perfectly. Excellent learning experience - thanks!
    Had high hopes of using visual studio code(vsc) with the arduino plugin instead of the arduino ide - a work in progress with the esp32 -as vsc has a hard time finding all the needed include files. 73 K6CCA

    • @G6EJD
      @G6EJD  5 років тому

      Is your update rate to high as the sensor takes a finite time to read and realistically a minimum refresh of every 15-secs is required and in real practice about once per minute or even hour as the environment does not change that quickly. Also try a different browser to see if the problem continues, any versions of IE will not work or work spasmodically. 73 Dave

    • @quaternion-pi
      @quaternion-pi 5 років тому

      @@G6EJD Solved by combining all sensor data into one JSON string and sent as one xhttp.send(). Updates all fields every second without error. Thanks - great project!

    • @G6EJD
      @G6EJD  5 років тому

      Elysium, good to hear all is ok now.

  • @MPElectronique
    @MPElectronique 5 років тому

    Great. Would bè cool to push thé ntp time in the footer of thé Web page.. :)

  • @grumetenavegando
    @grumetenavegando 5 років тому

    Muchas gracias. Es justo lo que necesitaba.
    Tengo un esp32 captando datos de climatología por LoRa lo envío a un Gateway por medio de un string y lo envío a una pagina web en la que lo extraigo dato a dato y lo pongo e la vista. Ahora me falta solo meterlo en una base de datos y poderlos visualizar con gráficos y ….
    Eres genial.
    NB. Espero que entiendas español. Un saludo.

    • @G6EJD
      @G6EJD  5 років тому

      Gracias, espero que haga funcionar su proyecto según lo necesite con estas técnicas.

  • @amiazma
    @amiazma 4 роки тому

    You can use unique attribute name, like io='D1' in the span. This way you can get element by attribute name, and ask the D1 variable from arduino. If you think you can link script libraries from google. This way, if you think, you can use ajax with jQuery, like:
    www.w3schools.com/jquery/ajax_get.asp
    Less character, less data! ^_^