What is a WebSocket: It's actually a very descriptive name defining
the reason they are useful. You can imagine having two devices each with
its own socket. You plug
them together with a wire allowing direct instantaneous communication.
In the case of a websocket, that wire is a virtual wire, created using
software protocols.
A websocket connects a client, (probably a browser) and server (could be an ESP32 chip), allowing real time instant bi-directional communication.
If you try out the examples of Arduino Web server
code, you will see that the only way to get new sensor readings is to
refresh the page.
When you want to see ESP32 sensor readings, you don't want to have to reload the page every time, and if you want updates every second, you definitely don't want to have to reload the page every time! For instance if you had a graph output you would want it to automatically scroll and show output.
WebSockets are additional protocols, to the existing protocols such
as HTTP, providing an extra layer of communication that allows updates
to elements of a page so you don't need to manually reload the page.
In discussing "What is a WebSocket" its important to know that the older
technology,that is still used in some cases, for bi-directional
communication is AJAX.
AJAX is based on existing technologies such as Javascript and XML/JSON.
A WebSocket is a more recent protocol that is supported by modern web
browsers, as well as some older versions released after 2011 when
WebSockets were standardized.
You can transfer data between server and client
instantly and you don't need polling or refreshing of the browser
(client). For Arduino projects it means you can instantly control your
lights (from browser to server - e.g. to an ESP32). It also means you
get instant data back from the server e.g. reporting on temperature
changes in a area.
Once a websocket is established there is very low
overhead in terms of network traffic. Because of the websocket there are
no repeated HTTP requests - the protocol does not need to request a new
connection for each transaction (this is the case when using AJAX - an
older technique for bi-directional communication). In fact while I am
writing this a websocket has been going for 90702 seconds updating that
counter from an ESP32 every second.
WebSockets allow you to
implement simultaneous data exchange between the client and server. In
the case of an Arduino Project you can control attached lights, and get
back temperature data instantly. In the more general case you could use
them for applications requiring instant responses or collaborative
features.
Most modern web browsers support
WebSockets, ensuring compatibility across various platforms and devices.
If you need to support older browsers then the AJAX system can be used
but it is really not as good as websockets.
To get a websocket going you write your html code using javascript to initiate a websocket startup process from the client (browser). The protocol is a handshake protocol where the client (browser) sends an HTTP request to the server (ESP32) requesting an upgrade to the WebSocket protocol.
On receipt of the upgrade request, and if the server supports
WebSockets (you did remember to start a WebSocket in your Arduino code
didn't you?) then the server responds with a status code of 101
(Switching protocols). This shows to the client that the connection has
been upgraded successfully to a WebSocket.
From now on the client and server can send and receive data
simultaneously i.e. a bi-directional communication link has been
established.
When you write code for an ESP32 that implements a WebSocket, things
can get complicated very fast, since all the code is stored in the ESP32. However
you are going to have to write the following code:
The tricky bit is that both these sets of code have to be stored in
the ESP32. So the ESP program operates the C/C++ code but sends the HTML
code to the client to be executed in the client (browser).
So the ESP32 code has to contain the functions to drive the ESP32 side, but you also have to serve the HTML page containing:
You need to serve that page using an Arduino Web Server library.
Because both these sets of code exist on the ESP32 you need to take
things slowly when developing code to a void getting in a huge mess.
Other things to think about when developing the WebSocket code:
You can see the essential data transmission aspects in the code above
that allows simultaneous bi-directional communication using WebSockets.
Websockets provide powerful bi-directional communication which is
essential for responsive systems. They allow you to control pins of an
ESP32 (to control a relay etc). But they also allow data communication
the other way e.g. for sensor readings.
All this is done without you having to refresh the browser.
Note: Parts of this page were written using chatgpt as a research assistant. Some images were created using leonardo.ai.
Comments
Have your say about what you just read! Leave me a comment in the box below.
Don’t see the comments box? Log in to your Facebook account, give Facebook consent, then return to this page and refresh it.