Connect a board to WiFi and serve a page
- 192parts on the bench
- 25boards running now
- 1.00xreal time, on every board
By the end of this page your board will have joined a network, been given an address, and served a web page you can click, with an LED that follows the button on it. Everything you write is the Arduino code you would write for the board on your desk.
One thing first, because it matters more than anything else here: the network is simulated. There is no 802.11 in Mokxi, no real internet, and nothing your sketch does leaves this browser tab. What is faithful is the code, the status codes, the order the states come in, and the second or two it takes to join, which is what a real board gives you. The Web tab is the only browser in the world that can reach your server, and that is the honest shape of it.
Five boards can do this, and they are the five with a radio on the real hardware: the ESP32-C3, the ESP32-C6, the classic ESP32 DevKit, the ESP8266 NodeMCU and the Raspberry Pi Pico W. Pick whichever one is on your desk. The circuit above is the C3 with an LED and a 220 ohm resistor on GPIO 8, and every one of the five ships the same three examples wired to its own lamp pin, so the sketch and the wiring travel together.
You will watch the connect loop print its dots and then an address, the way it does on a real board.
Then you open the Web tab and read the page your own sketch is serving, in a frame with scripts off.
Press On in that page and the LED comes on, on the board and on the breadboard.
Join the network
Press Run and look at the serial monitor first. The sketch calls WiFi.begin with the name and password of the one access point this board can see, then loops on WiFi.status() until it reports WL_CONNECTED. That takes between one and three seconds, which is where a real board on a quiet network lands. Then the address: 192.168.4.2, leased the way DHCP would lease it, with the gateway at 192.168.4.1 and the signal strength beside it.
The access point is a setting on the board, not a part you wire. Click the board and look for wifiSsid, wifiPassword and wifiRssi in the properties panel. With no radio there is nothing to scan and nothing to carry a separate part across to the board, so the one network it can see lives on the board itself. RSSI is that setting too, and not a measurement: moving the board on the canvas changes nothing.
Try it wrong on purpose. Change the password to something else and press Run again. The sketch, unchanged, gets WL_CONNECT_FAILED five seconds later, which is what a real board does when you get it wrong, and the state it walks through on the way (idle, then disconnected, then failed) is Arduino’s own sequence value for value.
Serve a page, and open it in the Web tab
The Web tab is along the bottom of the editor, beside Serial. It opens on http://192.168.4.2/, which is the address the board just printed, and it renders the page your handlers are sending. There is an address bar and a Refresh, and the frame has scripts off, so nothing inside the page can run and nothing inside it can fetch an image or a font from anywhere.
Links and form posts inside that frame are caught and routed back into the simulated network. Pressing On really reaches the handler you registered with server.on, really runs it on the board’s own core at the board’s own clock, and really moves the pin. The LED follows, on the board and on the breadboard. Forget server.handleClient() in loop() and the page times out after ten seconds, exactly the way it would on hardware.
The Cloud tab beside it is the network tab: every request the board made and every request the page made into the board, with the method, the URL, the status and the bodies, and a line saying why when one failed. It also carries the access point’s three settings and the two numbers weather.mokxi answers with, so a lesson can turn a dial and watch the next fetch bring the new value back.
What is out there, and what is not
Four names resolve and no others: time.mokxi, weather.mokxi, echo.mokxi and api.mokxi, plus the board’s own address. Ask for anything else and you get one sentence back, which your sketch can read and print: no real internet, names under .mokxi only. That refusal is a thing to teach rather than hide, and the WiFi: fetch the weather example asks for example.com on purpose so you read it in your own serial monitor.
https:// fails too, and says why. WiFiClientSecure compiles and then refuses, because a TLS that trusted everything would teach you that https is free. There is no TCP, no DNS protocol and no socket anywhere under any of this, and nothing outside this browser tab can reach the server your sketch runs.
Load WiFi: join the network first and then WiFi: a lamp on a web page from the example picker, and read them beside this page. When you take the same sketch to a real board, the only line you will change is the name of your own network.
Questions
Is the WiFi real?
No, and every page that mentions it says so. There is no 802.11 anywhere in Mokxi, no channel, no scan and no WPA2, and no request ever leaves the browser tab. The password is compared as a string. What is faithful is the Arduino API, the status codes, the order of the states and the one to three seconds a join takes.
Can my sketch fetch a real website?
No. Four made-up names under .mokxi resolve and nothing else does. Ask for anything else and HTTPClient returns a refusal with one sentence attached, which your sketch can print. https:// fails the same way, because a TLS that trusted everything would teach you that https is free.
Which boards can do this?
The ESP32-C3, the ESP32-C6, the classic ESP32 DevKit, the ESP8266 NodeMCU and the Raspberry Pi Pico W, which are the five boards here with a radio on the real hardware. On any other board, including a plain Raspberry Pi Pico, WiFi.h refuses to compile with a sentence saying why, rather than pretending.
Can anyone else open the page my board is serving?
No. There is no listening socket and nothing outside this browser tab can reach it. The Web tab is the only client that exists, and its frame is served with scripts off so the page cannot fetch anything from anywhere.
Build this for real
Open the editor, change a value and watch the number move with it. Nothing to install, and no account needed.