In this guide, you’ll learn how to create a WebSocket server with the ESP8266 NodeMCU board to display sensor readings on a web page. Whenever the ESP8266 has new readings available, the web page is updated automatically without the need to manually refresh it.

Table of Contents

Throughout this tutorial, we’ll cover the following main topics:

• Introducing WebSocket Protocol
• Install Required Libraries and Plugins
• Building the Web Server Project: Display Sensor Readings
  • Creating the HTML File
  • Creating the CSS File
  • Creating the JavaScript File
  • Programming the ESP32 Board (Websocket server)

• Introducing WebSocket Protocol

  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. 

   

  https://i0.wp.com/randomnerdtutorials.com/wp-content/uploads/2020/10/ESP3-ESP82662-WebSocket-Server-How-it-Works-f.png?resize=278%2C300&quality=100&strip=all&ssl=1 278w" alt="ESP32 ESP8266 WebSocket Server How it Works" width="727" height="785" class="wp-image-99447" style="height: auto; max-width: 100%; vertical-align: bottom; box-sizing: border-box;" decoding="async" loading="eager" />

  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.

  This change can be something that happened on the web page (you clicked a button) or something that happened on the ESP8266 side like pressing a physical button on a circuit, or new sensor readings available.

  Learn how to control the ESP8266 outputs via WebSocket protocol: ESP8266 WebSocket Server: Control Outputs (Arduino IDE).