Skip to main content

ESP-IDF Basics - Lecture 2

·9 mins·
Table of Contents

Internet connectivity
#

Applications communicate over the internet using different protocols, many of which are build on top of other protocols forming a layered structure.

The ISO/OSI model is a conceptual framework that breaks down how data (like messages, videos, or web pages) travels across networks — including Wi-Fi and Ethernet — into seven steps (layers). Each layer has its own job and uses specific protocols (rules or languages for communication).

The ISO/OSI model is a conceptual framework that explains how data such as messages, videos, or web pages travels across networks like Wi-Fi or Ethernet. It organizes this process into seven layers, each with a specific role and associated protocols — the rules that govern communication at that layer.

It is typically visualized like on Fig.1.

Fig.1 - ISO OSI Stack

Fig.1 - ISO OSI Stack

Starting from the bottom, the layers are:

  1. Physical - This is the actual hardware: radio signals, antennas, and frequencies.
    🔧 Example: Wi-Fi, Ethernet

  2. Data Link - Controls the direct connection between devices (like your laptop and router) and handles things like access to the wireless channel.
    🔧 Example: MAC (Media Access Control)

  3. Network - Figures out how data gets from one network to another.
    🔧 Example: IP (Internet Protocol)

  4. Transport - Makes sure data is delivered correctly and in the right order.
    🔧 Examples: TCP (Transmission Control Protocol), UDP (User Datagram Protocol)

  5. Session - Manages and maintains connections between devices or applications.
    🔧 No single protocol in Wi-Fi, but session handling happens in apps using things like NetBIOS, SMB, or TLS

  6. Presentation - Translates data so it’s readable on both ends (like turning an encrypted message back into text).
    🔧 Examples: SSL/TLS (used for encryption), JPEG, MP3, ASCII

  7. Application - What the user sees: websites, video calls, email, etc.
    🔧 Examples: HTTP (web), HTTPS (secure web), SMTP (email), FTP (file transfer), DNS (domain names)

Some of the layers of this conceptual framework can me managed by a single protocol. For instance the Ethernet protocol takes care of both the physical and the data link layers.

Each layer passes its work to the next. You can combine these layers as it usually happens. For instance the MQTT protocol sits at the same level as HTTP. Both of them make use of the TCP/IP stack.

Encapsulation
#

The combination of the layers is done through encapsulation.

Encapsulation is the process by which data is wrapped with protocol information at each layer of the network stack to facilitate proper transmission and delivery. In the context of a Wi-Fi network, application data is first encapsulated within a TCP segment, which provides reliable transport services. This TCP segment is then encapsulated within an IP packet, adding logical addressing and routing information necessary for delivery across networks. Finally, the IP packet is enclosed within a Wi-Fi (IEEE 802.11) frame or an Ethernet frame, which handles the physical and data link layer functions for wireless communication. Each layer adds its own header (and sometimes trailer) to the data unit, enabling modular and efficient network communication.

A picture is worth more than a thousand words:

Fig.2 - Encapsulation

Fig.2 - Encapsulation

Simply put, the whole content of the higher level is inside the payload or data field of the lower layer protocol.

Connectivity in Espressif
#

Now that we have an understanding of the connectivity layers, let’s explore which ones are supported by Espressif.

Physical Layers
#

Espressif modules support three main physical layers, depending on the SoC:

  1. Wi-Fi: Supported by all devices, it is used for connection to a router and then to the internet. It will be the focus of this workshop.
  2. BLE: In IoT, it is mainly used for direct communication with a smartphone and for provisioning (i.e. setting up credentials).
  3. Thread/Zigbee: IoT protocols that are used for local machine-to-machine (M2M) communication based on mesh topology (many to many connection). To connect to the internet, a Thread-to-Wi-Fi bridge is required.
The Matter protocol utilizes all of these connectivity layers: BLE is used for provisioning, Thread enables low-power communication, and Wi-Fi is used for high-bandwidth data transfer.

In this workshop, we will focus on Wi-Fi only. Let’s briefly review its topology.

Wi-Fi topology
#

In a Wi-Fi network, there are two main roles: Access Point (AP) (usually called softAP in Espressif) and Station (STA).

  • The Access Point (AP) is the central device (like a Wi-Fi router) that broadcasts the wireless network and connects stations to each other and to external networks like the internet.
  • A Station (STA) is any device that connects to the AP. It can be a smartphone, laptop, or smart home device.

The AP manages the wireless medium, while STAs communicate through the AP, not directly with each other (unless in ad hoc mode). This setup forms a basic infrastructure mode network, which is the most common type of Wi-Fi setup.

Fig.3 - STA vs AP

Fig.3 - STA vs AP

Espressif’s modules can function in both modes. To connect to an AP, a station need the SSID (router network name) and the password.

In the first part of the assignment, we will put the Espressif device in AP mode and use our smartphone to connect to it.

Application layer protocols
#

In the Internet of Things (IoT), various communication protocols are used, with MQTT and HTTP being among the most common. MQTT is specifically designed for machine-to-machine (M2M) communication and is widely used to manage networks of sensors and actuators, particularly in home automation systems due to its lightweight and efficient messaging model.

HTTP, on the other hand, is best known as the protocol behind the web, used to deliver HTML-based content. However, another major application of HTTP in IoT is for implementing REST APIs. These APIs are not intended for direct user interaction, but rather to be accessed by external applications or services.

For example, imagine a smart home web application that displays the status of various sensors in your house. Instead of connecting to each device individually, the application queries the REST API exposed by a sensor gateway, which acts as a bridge between the devices and the user interface.

In this webinar, we will use HTTP to serve a simple HTML page and implement a REST API, so let’s focus on these concepts.

HTTP, HTML, and JSON: Serving Web Pages and Building REST APIs
#

HTTP can be used to serve HTML pages (like those viewed in web browsers) and structured data such as JSON, which is commonly used to implement REST APIs—mainly for communication between applications.

HTTP Basics
#

HTTP (Hypertext Transfer Protocol) is the foundation of communication on the web, based on a simple client-server model. In this model, the client (such as a web browser or application) sends a request to a server, which processes it and returns a response.

HTTP Requests
#

HTTP defines several request methods, each serving a specific purpose:

  • GET - Retrieve data from the server
  • POST - Send or create new data on the server
  • PUT - Update existing data
  • DELETE - Remove data

HTTP Responses
#

After receiving a request, the server sends an HTTP response, which includes a status code to indicate the outcome. Common status codes include:

  • 200 OK - The request was successful
  • 201 Created - A new resource was successfully created (usually after a POST)
  • 400 Bad Request - The server couldn’t understand the request due to invalid syntax
  • 401 Unauthorized - Authentication is required or has failed
  • 404 Not Found - The requested resource does not exist
  • 500 Internal Server Error - A general error occurred on the server

Modern applications and IoT systems often use JSON (JavaScript Object Notation) to format and exchange data. This structured format is at the core of REST APIs, which allow clients to interact with server-side resources using standard HTTP methods.

Fig.4 - Client-server interaction

Fig.4 - Client-server interaction

HTML: Web Pages
#

HTML (HyperText Markup Language) is the standard language for creating web pages. With ESP-IDF, you can serve HTML pages directly from your embedded device using HTTP.

These HTML pages can be used to:

  • Display real-time sensor readings
  • Provide control interfaces (e.g., buttons or sliders to interact with GPIOs)
  • Allow user configuration of network settings or parameters

A simple HTML page served by an ESP device might look like this:

<!DOCTYPE html>
<html>
<head>
  <title>ESP Sensor Dashboard</title>
</head>
<body>
  <h1>Living Room Sensor</h1>
  <p>Temperature: 22.5°C</p>
  <p>Humidity: 60%</p>
</body>
</html>

Serving HTML content from your ESP device allows users to interact with it through any web browser, with no additional software required.

JSON: REST API
#

JSON is a lightweight, human-readable format used to represent structured data. It’s ideal for web and IoT applications to exchange information between clients and servers.

A JSON object is made up of key-value pairs. Here’s a simple example:

{
  "temperature": 22.5,
  "humidity": 60,
  "sensor": "living_room"
}

In this case, the object represents a reading from a sensor in the living room.

REST API
#

A REST API (Representational State Transfer Application Programming Interface) allows applications to interact with a server using standard HTTP methods. It follows the client-server model, with the server usually responding with JSON-formatted data and an appropriate HTTP status code.

REST APIs organize access to resources through routes, or URL paths, which are typically human-readable and logically structured.

Example REST API routes:

  • GET /sensors - Retrieve a list of all sensors
  • GET /sensors/42 - Retrieve data for sensor with ID 42
  • POST /sensors - Create a new sensor
  • PUT /sensors/42 - Update sensor 42’s settings
  • DELETE /sensors/42 - Delete sensor 42

This approach allows easy access and manipulation of data, making REST APIs ideal for modern web and IoT applications.

In the second part of this workshop, you will implement both a simple HTML page and a REST API using HTTP. These examples will help you understand how to serve web content and expose device data to external applications.

Conclusion
#

This article introduced the layered structure of internet communication, focusing on the ISO/OSI model and its practical use in Wi-Fi networks. We explored how protocols like HTTP and MQTT operate within this framework, how encapsulation allows data to flow through the layers, and how REST APIs enable structured, JSON-based communication between devices and applications. These concepts form the foundation for building modern, connected IoT systems.

Now you have all the technical background to start the assignments.

Next step
#

Next assignment → Assignment 2.1

Related

ESP-IDF Basics - Assign. 1.1
3 mins
ESP-IDF Basics - Assign. 1.2
1 min
ESP-IDF Basics - Assign. 2.1
7 mins