Skip to main content

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.

Comments

  1. alisakaren9December 30, 2019 at 8:37 PM

    Your website is really cool and this is a great inspiring article. Thank you so much.
    Fixed IP

    ReplyDelete

Post a Comment

Popular posts from this blog

Setting Up PyScripter for Quantum GIS

PyScripter is a general purpose Python Integrated Development Environment (IDE). Quantum GIS (QGIS) is a desktop GIS application that can be extended with Python plugins. Both are open source softwares. We intend to use PyScripter as an IDE to build QGIS Python plugin. We are using PyScripter 2.4.1.0 and QGIS 1.6.0 in Windows. PyScripter does not come with Python. On the other hand, QGIS is built in with Python. Thus, we will setup up PyScripter to use the build in Python in QGIS. We assume both PyScripter and QGIS are already installed. Preparing PyScripter batch file We assume that QGIS is installed in C:\OSGeo4W\ folder and PyScripter is installed in C:\Program Files\PyScripter\ . 1. Copy qgis.bat in C:\OSGeo4W\ bin to pyscripter.bat 2. Edit pyscripter.bat to remove the last line that read something like this start "Quantum GIS" /B "%OSGEO4W_ROOT%"\apps\qgis\bin\qgis.exe %* and replace it with this in one line Start "PyScripter" /B "C:\Progr...
8 comments
Read more

Using React in Foundation for Sites

This post was the precursor to the Foundation-React Template . React and Foundation are two different web UI frameworks addressing different needs. They evolve differently. Both of them are powerful on their own accord. Fusing them together may create superpower. We will walk through the process of adding React into Foundation. We will start by installing both Foundation and React through command line interface (CLI). Then we will create a simple Todo web app. Along the way we will highlight the development process. But before all that, let us summarize React and Foundation. The details can be found at their respective websites. Both of them are well documented. React is a run-time UI rendering engine. It renders dynamic UI elements in its own fast virtual DOM, and only update necessary changes to the slow browser DOM. This behaves like a  double buffering DOM which makes any UI update feels fast. React wraps a UI rendering script in a component. A React component can ...
Post a Comment
Read more

Debugging PHP using Apache Error Log

PHP runs on the server side and behaves like a function that return a value against the given arguments. A remote client may call this function and expect a specified return value and nothing else. So how do we debug this function ? It must not return debugging messages since the client is never designed to handle them. We must never burden any client to handle debugging messages. If we run PHP through Apache server then we can use the error log to keep our debugging messages. It may not be the best way to do it. But we only want to talk about this approach now. Error Logs The Apache error log files generally can be found in the following directory: var/log/apache2 We issue the following command from within the directory to read the latest error messages: # tail error.log The tail command reads the last few lines from the error.log file and prints them on the terminal. If we need to read a specific number of lines from the end of the file then we can specify the -n opti...
Post a Comment
Read more