hendraym caesar vittoriah

0 views

Skip to first unread message

Jenette Bregantini

unread,

Aug 2, 2024, 2:20:14 AM8/2/24

to voahancuma

A WebSocket is a persistent connection between a client and a server that allows bidirectional communication between both parties using a TCP connection. This means you can send data from the client to the server and from the server to the client at any given time.

The client establishes a WebSocket connection with the server through a process known as WebSocket handshake. The handshake starts with an HTTP request/response, allowing servers to handle HTTP connections as well as WebSocket connections on the same port. Once the connection is established, the client and the server can send WebSocket data in full duplex mode.

Using the WebSockets protocol, the server (ESP8266 board) can send information to the client or to all clients without being requested. This also allows us to send information to the web browser when a change occurs.

The %STATE% is a placeholder for the GPIO state. It will be replaced with the current value by the ESP8266 at the time of sending the web page. The placeholders on the HTML text should go between % signs. This means that this %STATE% text is like a variable that will then be replaced with the actual value.

The JavaScript goes between the tags. It is responsible for initializing a WebSocket connection with the server as soon the web interface is fully loaded in the browser and handling data exchange through WebSockets.

The initWebSocket() function initializes a WebSocket connection on the gateway defined earlier. We also assign several callback functions for when the WebSocket connection is opened, closed or when a message is received.

This is very useful because the server can send data to the client whenever something happens. For example, you can add a physical button to this setup that when pressed notifies all clients to update the web interface.

Good Afternoon,
how do I have to extend the JavaScript functions to display the values from a sensor (e.g. DHT11)?
websocket.onmessage = onTemperature; ?
etc.
Kind Regards
Juergen B.

I do have one question regarding this tutorial and the ability to expand to monitor more than one output. First off is it possible using the websocket protocol? Also, can it be done by just adding additional HTML sections to show that extra GPIO output to be monitored?

thank you for this exelent tutorial and detailed descritpion for the websocket dataexchange. I used your code and add more button and slider for the LED control.
I send the states and values from the EPS to the clients as JSON over websocket.

Could you share the code that you worked on to add more buttons and sliders? I added more buttons on the page itself(pretty simple, just formatting) but I cant seem to display the correct state of an output that is connected to that second button (on or off).

I apologize for I had no intent on disrupting you tutorial thread. One of your commenters needed help in extending your example. I took it off line so as not to abuse the thread. I extended the example for him/her and put my results onto GitHub for transfer/downloading. Another commenter emailed me with a similar request, so I posted the GitHub link.

Another solution. Added two buttons. I tried to minimally change the original example. Implemented on SPIFFS. Links to the original lesson are saved.
Many thanks to Greg Baker for his help and detailed lessons!
You can download the code here _buttons
Any remark are welcome.

Hi.
Did you upload all the required files to the ESP8266?
Do you get any error messages?
Open the web browser javascript console and check if it prints any error messages when you toggle the buttons.
Regards,
Sara

Hi and thanks for this great tutorial! Do you have a suggestion on what to modify in the code so that pressing the button turns the LED on for 10 seconds and then it turns off automatically (without a need to press the toggle button)? I tried now for some time with a for loop in the loop section or modifying the handleWebSocketMessage function but all that results in wrong behavior. Could you please point me in the right direction? Thanks!

Thanks for the reply, opening the console I do not receive any message outside of connection attempt and open connection. In the IDE console I only get connected by ID and IP when I log in from outside, while locally I also get the STATE. I insert the link of the remote server where the index page is running in case it can be useful. Thank you.

Sorry if I insist, have you had the opportunity to verify the behavior of the page? Last thing, would you help me with a change, I should add another button, but I have to make sure that only one button at a time is ON, example: the first is on, the second is off, if the second is on the first goes off. I hope I have been able to explain what I should do and receive a kind answer to my problems. Thank you in advance.

Affiliate Disclosure: Random Nerd Tutorials is a participant in affiliate advertising programs designed to provide a means for us to earn fees by linking to Amazon, eBay, AliExpress, and other sites. We might be compensated for referring traffic and business to these companies.