Microcontroller Tutorials

Arduino, Raspberry Pi, PIC, Beaglebone Resources


You need to log in to create posts and topics.

Using WebSocket for displaying data on a webpage without refreshing the webpage

I have read and practiced the tutorial "Web Server with NodeMCU WebSocket" at https://www.teachmemicro.com/web-server-nodemcu-websocket. It is so fantastic. I want to display an A0 analog pin data on a webpage by using the webSocket without refreshing manually the webpage. Would you/ everyone please tell me how to do that? Thanks a lot!

Hi Danghai!

First of all, sorry for the very late response. It seems I need to add a notification to the forums every time there is a new thread so that I'll be informed.

Anyway, regarding your question: the websockets library allows you to create updates to pages without manually refreshing the page as I said on that tutorial you linked. So if you need to embed the reading of the analog A0 pin, you only need to use this as your HTML page:

page = "<h1>Simple NodeMCU Web Server</h1><p>"Data" +(String)analogRead(A0) + "</p>";

This should display an updated value from A0 because the websocket instance is being called in a loop inside the Arduino's loop() function so there's no need to refresh the page.

My question is similar as Danghai's question but not the same :
how to send and display an A0 analog pin data on the webpage together with the above buttons: on and off by using the webSocket for two (or more) clients (browsers) simultaneously?