STM32 WebSocket Guide

In today’s world of connected embedded systems, providing a real-time interface to monitor and control devices is no longer optional—it’s expected. Developers working with STM32 microcontrollers often need to build responsive, efficient web dashboards that communicate in real-time with their hardware. This article explores how to implement an STM32 WebSocket device dashboard using Mongoose, a lightweight embedded web server with a full TCP/IP stack.

The video below demonstrates how a real-time Websocket dashboard can be created in just several minutes. It uses STM32H573I-DK development board:

Why STM32 WebSocket Dashboards?

The STM32 family, particularly the STM32F4, STM32F7, and STM32H7 series, offers powerful MCUs ideal for industrial and IoT applications. However, creating a modern web dashboard on such constrained devices is not trivial. Traditional HTTP-based communication is not efficient for real-time data transfer, especially when updates are frequent. This is where WebSocket shines.

A WebSocket connection establishes a full-duplex, persistent channel between the client (browser) and server (STM32). This allows the STM32 device dashboard to send real-time updates with minimal overhead, making it far superior to HTTP polling for dynamic, responsive interfaces.

HTTP vs WebSocket: Why WebSocket is Better for Real-Time Dashboards

HTTP is stateless and designed for one-off request/response cycles. To simulate real-time communication, developers often resort to polling, where the client repeatedly asks the server for updates. This wastes bandwidth and CPU cycles, and leads to delayed data.

WebSocket, on the other hand, creates a persistent TCP connection. Once established, either the client or the STM32 device can send messages at any time. This bi-directional communication model is ideal for:

• Real-time sensor data display
• Remote control of actuators
• Event-driven status updates

For an STM32 device dashboard, WebSocket ensures that updates are instant, efficient, and scalable.

This diagram makes the difference more clear:

Mongoose: The Ideal Embedded Web Server for STM32

Mongoose is a robust embedded web server library with built-in WebSocket and HTTP support. It includes its own TCP/IP stack and is designed to run efficiently on MCUs like STM32.

Key benefits of using Mongoose:

• Minimal footprint: fits within typical STM32F4/F7/H7 memory constraints
• Built-in WebSocket and HTTP support
• Works with or without an RTOS
• Ready-to-use templates via the Mongoose Wizard

Mongoose enables developers to turn STM32 devices into full-featured WebSocket servers serving real-time dashboards.

STM32 WebSocket Architecture Overview

A typical STM32 WebSocket device dashboard includes:

1. STM32 MCU (F4, F7, H7) running Mongoose as the server
2. Browser-based frontend (HTML/JS) served from STM32 flash
3. WebSocket channel for real-time communication

Mongoose handles both serving the static dashboard UI and managing WebSocket connections. Whether you're using FreeRTOS or bare-metal code, Mongoose integrates cleanly into STM32 projects.

Getting Started with Mongoose Wizard

To simplify integration, Mongoose offers the Mongoose Wizard — a project generator that creates ready-to-build STM32 projects.

Using the Wizard:

1. Select your STM32 series (F4, F7, H7)
2. Choose FreeRTOS or bare-metal
3. Download a CubeIDE-compatible project

Each project comes pre-integrated with Mongoose, including:

• Working WebSocket examples
• Built-in HTTP server configuration
• Example dashboard UI files

This makes it trivial to get started with an STM32 WebSocket project.

Integrating Mongoose in Your STM32 WebSocket Project

If you prefer to integrate manually, follow these steps:

1. Add Mongoose source files to your CubeIDE project
2. Initialize Mongoose in your main loop or FreeRTOS task
3. Configure network interface (Ethernet driver setup)
4. Implement WebSocket event handlers
5. Serve dashboard HTML/JS files from STM32 flash

Mongoose abstracts most networking complexities, allowing you to focus on dashboard logic.

Hosting the STM32 Device Dashboard UI

Mongoose allows your STM32 to serve static files directly from flash. Your device dashboard—written in HTML, CSS, and JavaScript—can be stored on-chip and loaded via a browser.

The dashboard connects via WebSocket and displays real-time data, for example:

• Sensor graphs
• Motor status
• Configuration controls

Because Mongoose supports chunked transfer and file compression, even large UIs can be served efficiently from STM32 memory.

Real-Time Communication via WebSocket

Once the dashboard is loaded, it opens a WebSocket connection to the STM32. The server (Mongoose) can now push:

• Sensor readings every few milliseconds
• Alerts and status changes
• Logs or debug information

The browser can also send commands back to the device in real-time.

This results in a highly interactive STM32 device dashboard, ideal for industrial and IoT applications.

STM32 WebSocket Dashboard Use Cases

Common use cases include:

• Factory automation dashboards
• Medical device monitoring
• Smart home controllers
• Energy systems and solar inverters

All benefit from the low latency and efficiency of STM32 WebSocket communication.

Conclusion

Creating an STM32 device dashboard using WebSocket is a smart move for developers building real-time, networked embedded systems. The combination of Mongoose and STM32 (F4, F7, H7) enables a lightweight yet powerful solution.

With its built-in WebSocket and HTTP server, Mongoose handles the hard parts. And with the Mongoose Wizard, getting started is just a few clicks away.

Ready to build your STM32 WebSocket dashboard? Try the Mongoose Wizard now.