How to Use ESP8266 As Webserver



Flower Box

RPI and GSM Interface (Using NODEJS and SCREEN)

How to Upload to Mitsubishi GX Developer (using JL1N-14MR PLC)

Hi, I’am currently using windows 10, NodeMCU 1.0 and here is the list of Software I used and installation guides i followed:

I used NodeMCU as a server to serve an HTML File I made from this tutorial. To serve this file, I uploaded the file to the nodemcu file system using Spiffs. The HTML file sends data to the nodemcu using websockets to be printed on the serial monitor for this.The fast bidirectional communication via websockets of the server and client enabled this to be used as remote control. On the following steps, ill be explaining how my code works


Step 1: Make It Work

Here’s the steps on how it works

  1. Download the attached file and open the mousebot.ino file
  2. Go to sketchshow sketch folder and make a new folder named data
  3. Save the html file from this tutorial in the folder named. I named mine as "Joystick"
  4. Ensure that your spiff is already functional by going to tools ans seeing the "esp8266 sketch data upload"
  5. Upload the html file to nodemcu by clicking "esp8266 sketch data upload"
  6. After file upload, upload to the nodemcu the mousebot.ino file by oing to the arduino IDE and pressing ctrl U


Step 2: How the Code Works

First, we include the libraries this code will use

Set the esp8266 as a webserver opened on port 80. Ports are pathways the data will pass through. As a server port, It will send the HTML file to the client(the deivces connected to it).

Adds a websocket connection using port 81 to listen for messages from the client

The websockets has the parameter num,WStype_t, payload and size. The num determines the client numeber, payload is the message it send, size is the length of the message and WStype_t is for differents events such as

  • WStype_DISCONNECTED — on disconnection of a client.
  • WStype_CONNECTED: — when a client connects

WStype_TEXT — Received data from the client

Depending on the event type different actions are done and is commented here

Step 3: Set the NODEMCU As Server

sets the ssid and password you’ll use to connect to it later

on the set up, we specifiy the rate at which it our nodemcu and pc will communicate , which is 115200.

set to true too see the wifi diagnostic output on the serila terminal

initaliaze the filesystem

Set up the nodemcu as an accesspoint with ssid and password defiend earlier and prints the ip of the nodemcu that you’ll connect with earlier. by default it is

Initialize the websocket on the nodemcu, whcih is pur server

Calls the function webSocketEvent when an websocket event occurs.

For debugging, print "WebSocket server started" on a new line. This is to determine the line of code the nodemcu is processing

when a client visits, it will call the function handleFileRead and send with it the parameter server URI which in this case is our nodemcu information. The function handleFileRead will serve the html file from the nodemcu file system

if it cant be found it will show "FileNotFound"

Begins the server and print HTTP server started.

On our void loop, we enable the server to contiuosly handle client and its websockets communictaions as follows:

Step 4: Load HTML File

we will use a function named handleFileRead to open and the html file from the nodemcu file system. it wil return a boolean of value to determine if its loaded or not.

When "" is open by the client we set the file path to "/Joystick.html, the name of our file in the data folder

Check if the file path"/Joystick.html" exist

If it exist, open the path with a purpose of reading it which is specified by the "r". Go here for more purposes.

Sends the file to to server as with a content type of "text/html"

the function handleFileRead returns true

if the file path doesn’t exist, the function handleFileRead returns false