ESP32 + HTTP server + websockets + Bootstrap + Husarnet. A simple project template showing how to use those technologies to create a fast, pretty and secure web UI hosted on ESP32. Works in LAN and over the internet. Written using Arduino framework.
ESP32 + HTTP server + websockets + Bootstrap + Husarnet. A simple project template showing how to use those technologies to create a fast, pretty and secure web UI hosted on ESP32. Works in LAN and over the internet. Written using Arduino framework.
This template can be a base for your own ESP32 based projects needing a responsive web user interface. It is written using Arduino framework, AsyncWebServer and ArduinoJson. I show here how to develop both C++ and HTML part of the project in a clear way.
The template combines all useful technologies in one:
#include <Husarnet.h>
...
/* Start Husarnet */
Husarnet.selfHostedSetup(dashboardURL);
Husarnet.join(husarnetJoinCode, hostName);
Husarnet.start();
...
A demo is really basic:
To run the project, open Visual Studio Code with Platformio extension and follow these steps:
git clone https://github.com/DominikN/ESP32-http-websocket.git
File > Open Folder > ESP32-http-websocket
// WiFi credentials
#define NUM_NETWORKS 2
// Add your networks credentials here
const char* ssidTab[NUM_NETWORKS] = {
"wifi-ssid-one",
"wifi-ssid-two",
};
const char* passwordTab[NUM_NETWORKS] = {
"wifi-pass-one",
"wifi-pass-two",
};
const char* husarnetJoinCode = "xxxxxxxxxxxxxxxxxxxxxx";
To find your Husarnet Join Code setup a free account at https://app.husarnet.com > click [Create network] button > go to join code tab . It will look like this: fc94:b01d:1803:8dd8:b293:5c7d:7639:932a/XXXXXXXXXXXXXXXXXXXXX
Just click this button in VSC + Platformio
Add your laptop to the same Husarnet network as ESP32 board. In that scenerio no proxy servers are used and you connect to ESP32 with a very low latency directly with no port forwarding on your router! Currenly only Linux client is available, so open your Linux terminal and type:
$ curl https://install.husarnet.com/install.sh | sudo bash
to install Husarnet.$ sudo systemctl restart husarnet
to start husarnet daemon after installation$ husarnet join XXXXXXXXXXXXXXXXXXXXXXX mylaptop
replace XXX...X with your own join code
(the same as in 3), and click enter.At this stage your ESP32 and your laptop are in the same VLAN network. The best hostname support is in Mozilla Firefox web browser (other browsers also work, but you have to use IPv6 address of your device that you will find at https://app.husarnet.com) and type:
http://esp32websocket:8000
You should see a web UI to controll your ESP32 now.