Embedded Web Server
A Comprehensive Guide for Modern Connected Devices

What Is an Embedded Web Server?

An embedded web server is a software component integrated into a hardware device that allows users to interact with the device through a web browser. Unlike traditional web servers hosted on general-purpose computers, an embedded web server operates within the constrained environment of a microcontroller or microprocessor, providing real-time control, monitoring, and configuration over a standard network.

By leveraging an embedded web server, manufacturers can provide a user-friendly interface for their devices, eliminating the need for dedicated software or complex configurations. This makes it easier to manage devices like routers, smart home systems, industrial controllers, and IoT nodes remotely.

Hardware Setup: Ethernet, Wi-Fi, or Cellular

The hardware configuration of an embedded web server depends on the specific application and deployment environment. The most common connectivity options include:

• Ethernet: Offers stable and high-speed communication. Ideal for industrial and enterprise applications where reliability is critical.
• Wi-Fi: Enables wireless connectivity, reducing cabling complexity. Commonly used in consumer electronics and smart home devices.
• Cellular: Suitable for remote or mobile deployments. It allows devices to remain connected even when traditional network infrastructure is unavailable.

These interfaces provide the physical foundation for the embedded web server to communicate over the internet or a local network.

Software Stack: The Four-Layer Model

To understand how an embedded web server operates, it's important to grasp the software architecture. A well-established model divides the stack into four distinct layers:

1. Driver Layer: Interfaces directly with hardware, managing peripherals like network interfaces.
2. TCP/IP Layer: Implements standard networking protocols for communication over IP networks.
3. Library Layer: Provides API for protocols above TCP and UDP - for example, HTTP, Websocket, MQTT, DNS, SNTP, and so on.
4. Application Layer: Contains the logic and UI elements specific to the end-user's needs.

Watch this short video (less than 3 minutes) that visually illustrates the 4-layer model:

Understanding this layered approach is crucial for optimizing the performance, scalability, and maintainability of your embedded web server implementation.

Currently Available Solutions

There are several open-source and commercial options available for implementing an embedded web server. One of the most popular one are those:

• Zephyr: A scalable real-time operating system (RTOS) with built-in networking support. Zephyr supports various protocols and provides a foundation for embedded web server development.
• lwIP: A lightweight TCP/IP stack designed for embedded systems. It's commonly used in conjunction with RTOS environments and provides essential networking capabilities.

These solutions provide flexibility but often require lengthy integration and a deeper understanding of networking principles.

Mongoose: A full-stack Embedded Web Server

Mongoose is a commercial-grade, embedded web server library that simplifies and accelerates web interface development for embedded systems. Mongoose integrates all three upper layers of the software stack - TCP/IP, library, and application - into a single, cohesive solution. Mongoose even contains its own TLS1.3 stack!

As shown in the diagram, Mongoose can either integrate with existing TCP/IP and TLS stacks or operate entirely on its own, without the need for any additional software.

How to Implement an Embedded Web Server Using Mongoose

Integrating Mongoose into an embedded system is straightforward. Follow these steps to embed a web server in your device:

1. Set Up the Mongoose Library Download and include the Mongoose library in your project:

#include "mongoose.h"

2. Initialize the Web Server Create a simple HTTP server that listens for incoming connections:

static void ev_handler(struct mg_connection *c, int ev, void *ev_data) {
    if (ev == MG_EV_HTTP_MSG) {
        mg_http_reply(c, 200, "Content-Type: text/html\r\n", "<h1>Hello, Embedded Web Server!</h1>");
    }
}
int main() {
    struct mg_mgr mgr;
    mg_mgr_init(&mgr);
    mg_http_listen(&mgr, "http://0.0.0.0:8080", ev_handler, &mgr);
    for (;;) mg_mgr_poll(&mgr, 1000);
}

3. Add WebSocket Support for Real-Time Updates Enhance your embedded web server with real-time capabilities:

mg_ws_send(c, "data update", strlen("data update"), WEBSOCKET_OP_TEXT);

For more detailed documentation, see Mongoose documentation

See more examples at Mongoose Gihub repository

Mongoose Wizard: No-Code Visual Web UI Builder

For developers and product designers looking for an even faster way to create web interfaces, Mongoose Wizard offers a no-code solution. This visual Web UI builder enables the drag-and-drop design of web dashboards and controls, directly mapping to device functionality.

The tool is ideal for non-programmers and rapidly developing user interfaces. The end result is a professional-grade, robust implementation that consists of professionally desined components. There is no need to employ a separate frontend development team, and there is no need to understand network programming either! Mongosoe Wizard does everything for you.

See this short video demonstration, that implements network settings panel on an NXP MIMXRT1062 microcontroller - the same approach applies to other platforms like STM32, Infineon, and others:

By combining Mongoose's embedded web server capabilities with the Mongoose Wizard, users can deliver professional, intuitive web interfaces with minimal coding.

Conclusion

In conclusion, choosing the right embedded web server solution is critical to the success of any connected device project. Whether you need a low-level networking stack or a full-featured application server, understanding the hardware options, software architecture, and available tools like Mongoose can greatly simplify development and improve product quality.

With increasing demand for smart and connected devices, mastering the implementation of an embedded web server has become more essential than ever. Consider Mongoose for a streamlined, efficient, and robust solution that gets your product online - fast.