Connecting to a Micro Web Server

ESP8266 can be programmed to serve a micro web server which can be accessed through WiFi. However, connecting to the module involves multiple steps.

Connecting to a WiFi Access Point (AP) is like physically plugging-in a cable of a Local Area Network (LAN) into its switch. Yet it does not immediately connect our device to a web server. A connection to an AP may not necessarily get our device into an Internet Protocol (IP) network where a web server is hosted because a WiFi AP does not necessarily implement IP. Similarly, a LAN switch may not necessarily implement IP. At the very low level of networking the devices may identify each other through Media Access Control (MAC) addresses. A mesh networking implements a communication layer below IP. It is up to the devices to implement their own networking protocol. However, IP happens to be pervasive in WiFi networking.

ESP8266 does implement IP and a Dynamic Host Configuration Protocol (DHCP) server which assign our device with a dynamic IP address.

A micro web server in ESP8266 is assigned with the IP address 192.168.4.1 by default.

Generally, we connect our device to a WiFi AP through a Service Set Identifier (SSID) which appears in our device's WiFi list. For ESP8266, the module itself defines its own SSID such as "ESP_70056A" or whatever name which can be changed programmatically. Please note that SSID has nothing to do with IP.

Once our device is connected to a ESP8266 WiFi AP, open a web browser in our device and enter 192.168.4.1 into the search or address bar, and press enter. The micro web server's home page will show up.

User Experience

Usually, we connect to a WiFi because we want to access the Internet. We do the connection once and forget about it since our device will auto-connect whenever it is near to the WiFi AP. And we don't usually enter an IP address in the search or address bar. Hence, the steps to connect to a ESP8266 micro web server is a little bit awkward.

The Steps to Connect to a Micro Web Server:

1. Open the WiFi list from the device's settings.
2. Select the SSID.
3. Open a web browser.
4. Enter the micro web server IP address.

Notice that we have to be prepared with the SSID and the IP address of the micro web server. And we have to apply them in two different applications. This is not good from the point of user experience (UX).

Bookmark

We can bookmark the IP address in the browser. But we still have to manage the bookmark. Generally in the Internet realm, we don't manage bookmarks because we can simply search the Internet for a web server. Hence, bookmarking is also not a good UX.

Common WiFi

The ESP8266 can be configured as a WiFi station where it connect itself into an existing WiFi network. However, the process to connect to that micro web server is about the same. The only different is the SSID. Instead of the SSID of the module, we connect to the SSID of the network that the module is connected to. Hopefully it is the SSID that connect our device to the Internet. And our device may have already been connected to it automatically. Hence, it reduces the steps to connect to the micro web server.

However, the WiFi network may assign a different IP address to the module. The module needs to be assigned with a fixed IP address. Otherwise, our device may not be able to connect to the module.

Captive DNS

The IP address of the micro web server is still a UX problem. The Internet solves the IP address problem through the Domain Name Service (DNS) which substitutes IP addresses with domain names such as www.google.com. The ESP8266 module in AP mode can use a simple trick by implementing a captive DNS server which will redirect any domain name to a fixed IP address. However, if we use a Chrome browser then the redirection will only work with valid domain names. For anything other than a domain name Chrome will treat it as a search phrase and will handle it differently. One way is to advertise a fake domain name for the module instead of the IP address. Actually, any fake domain name will do since the module will not be exposed to the Internet unless the module also shares the same WiFi that connect to the Internet.

mDNS

The ESP8266 SDK implements multicast DNS (mDNS). However, the feature is not yet supported in major browsers like Chrome. With mDNS we can give our module a domain name such as esp8266.local. 

Add to Home Screen

Still a user has to enter something into the address bar of a browser to reach for a micro web server. Alternatively in a browser, we can create a short cut or add it to home screen so that we can skip entering something into the address bar. However, that is not a common thing to do, and it adds another step in the process. Anyway, that may work for now.