logo elektroda
logo elektroda
X
logo elektroda
Advanced Search
logo elektroda

[Solved] ESP8266 Real-Time Data Streaming to HTTP Site Without Refresh

Mikimause9 1464 9
ADVERTISEMENT
Treść została przetłumaczona polish » english Zobacz oryginalną wersję tematu
| New topic
  • #1 18614899
    Mikimause9
    Level 3  
    Hello!
    I've been playing around with the esp8266 module for a while now, and I'm making something along the lines of a "smart home". The ESP8266 communicates with an arduino nano board, which turns the lights on and off. Need to keep an eye on what the arduino is sending to the esp. I've written the code, uploaded it to the board, and when I refresh the page it shows me the information, but to see the new data I have to refresh the page. And here's the question: is it possible to upload data to the page in real time(without refreshing the page). I have searched on the internet but have not found a solution. Thanks in advance for the answer.
    Nicholas
    Do you have a problem with Arduino? Ask question. Visit our forum Arduino.
  • ADVERTISEMENT
  • ADVERTISEMENT
  • Helpful post
    #3 18615031
    TvWidget
    Level 38  
    There are several different ways to solve this problem. One of the simplest is to periodically automatically refresh the page or just a section of it. To control and visualise changes, a WebSocket server is often implemented in ESP. This allows JS code in the browser to send and receive data in a similar way to how it is done via the UART.
  • ADVERTISEMENT
  • ADVERTISEMENT
  • #5 18615858
    Mikimause9
    Level 3  
    I have managed to refresh the whole page every so often, and the div on the page, but when I refresh the whole page it just annoys me, and when I refresh the div it doesn't refresh the values, just the page already sent to the browser, and I don't know how to send information to the div without refreshing the whole page.
  • Helpful post
    #6 18615887
    TvWidget
    Level 38  
    Mikimause9 wrote:
    I don't know how to send information to the div without refreshing the whole page.
    .
    Updating the data displayed in the DIV requires receiving it from ESP.
    For this, either Ajax or Websocket is used. In the first case, it is the selected event on the browser side that initiates the retrieval of the data from the ESP. In the second case, it is the ESP-side event that sends the data to the browser.
  • #7 18615892
    Mikimause9
    Level 3  
    How about some sample code? Because I don't hide the fact that it will be easier for me to understand it that way.
  • Helpful post
    #8 18615911
    khoam
    Level 42  
    Mikimause9 wrote:
    And maybe some example code? Because I'm not hiding the fact that it would be easier for me to understand it that way.
    .
    You have an example on the page I linked to in post #4. It's about refreshing temperature and humidity values - it's towards the end of that page (based on Ajax).
  • Helpful post
    #9 18615926
    TvWidget
    Level 38  
    It is not a question of code but of the idea of operation. In EPS, you have an HTTP server. The browser establishes a connection to it and retrieves the code of the selected page (indicated by the URL). This code is nothing more than text in HTML format. In an identical way, the server instead of HTML code can send any string of characters, e.g. "23.35". A script in JS running on the browser side allows something like this to be retrieved and substituted into the DIV. This technology is called Ajax.
  • #10 18619199
    Mikimause9
    Level 3  
    Thank you very much for your help. It worked. And I even understood what ajax is :D .
| New topic
Report a violation of the law

Topic summary

The discussion revolves around the challenge of streaming real-time data from an ESP8266 module to a web page without requiring a refresh. The user seeks a solution to monitor data sent from an Arduino Nano to the ESP8266 for a smart home project. Responses suggest using JavaScript and Ajax for periodic updates or implementing a WebSocket server for real-time communication. The importance of receiving data from the ESP8266 to update the web page dynamically is emphasized, with references to existing examples and resources for implementing these solutions. The user successfully implements a solution using Ajax and gains a better understanding of the technology.
Summary generated by the language model.
Popular Topics
ADVERTISEMENT