IOT ARCHITECTURE & PROTOCOLS(202046714)
G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY
Practical – 3
Aim: To create a standalone web server that controls outputs (two LEDs).
Apparatus: NodeMCU, Arduino Software
Theory:
Web server is a place which stores, processes and delivers web pages to Web
clients. Web client is
nothing but a web browser on our laptops and smartphones. The communication
between client and
server takes place using a special protocol called Hypertext Transfer Protocol
(HTTP)
HTTP Web Server Client Illustration
In this protocol, a client initiates communication by making a request for a specific web page
using HTTP and the server responds with the content of that web page or an error message if
unable to do so (like famous 404 Error). Pages delivered by a server are mostly HTML
documents.
Name: Pujankumar patel En.No.: 12302110503005
IOT ARCHITECTURE & PROTOCOLS(202046714)
G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY
Procedure:
How to create a web server to control two outputs using Arduino IDE.
When a URL is typed in a web browser and hit ENTER, then the browser sends a HTTP
request (a.k.a. GET request) to a web server. It’s a job of web server to handle this request by
doing something.
we are going to control things by accessing a specific URL. For example, suppose we
entered a URL like http://192.168.1.1/ledon in a browser. The browser then sends a HTTP
request to ESP8266 to handle this request. When ESP8266 reads this request, it knows that
user wants to turn the LED ON. So, it turns the LED ON and sends a dynamic webpage to a
browser showing LED status : ON
Name: Pujankumar patel En.No.: 12302110503005
IOT ARCHITECTURE & PROTOCOLS(202046714)
G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY
Code:
// Load Wi-Fi library
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "OnePlus 12R";
const char* password = "123456789";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliary variables to store the current output state
String output5State = "off";
String output4State = "off";
// Assign output variables to GPIO pins
const int output5 = 5; // GPIO 5
const int output4 = 4; // GPIO 4
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds
const long timeoutTime = 2000;
void setup() {
Serial.begin(115200);
// Initialize the output variables as outputs
pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);
// Set outputs to LOW
digitalWrite(output5, LOW);
digitalWrite(output4, LOW);
// Connect to Wi-Fi network with SSID and password
Name: Pujankumar patel En.No.: 12302110503005
IOT ARCHITECTURE & PROTOCOLS(202046714)
G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop() {
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects
Serial.println("New Client."); // Print a message out in the serial port
String currentLine = ""; // Make a String to hold incoming data from
the client
currentTime = millis();
previousTime = currentTime;
while (client.connected() && currentTime - previousTime <= timeoutTime) {
// Loop while the client's connected
currentTime = millis();
if (client.available()) { // If there's bytes to read from the client
char c = client.read(); // Read a byte, then
Serial.write(c); // Print it out the serial monitor
header += c;
if (c == '\n') { // If the byte is a newline character
// If the current line is blank, two newline characters in a row
indicate the end of the client HTTP request
if (currentLine.length() == 0) {
// Send an HTTP response
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
Name: Pujankumar patel En.No.: 12302110503005
IOT ARCHITECTURE & PROTOCOLS(202046714)
G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY
client.println("Connection: close");
client.println();
// Turn GPIOs on and off
if (header.indexOf("GET /5/on") >= 0) {
Serial.println("GPIO 5 on");
output5State = "on";
digitalWrite(output5, HIGH);
} else if (header.indexOf("GET /5/off") >= 0) {
Serial.println("GPIO 5 off");
output5State = "off";
digitalWrite(output5, LOW);
} else if (header.indexOf("GET /4/on") >= 0) {
Serial.println("GPIO 4 on");
output4State = "on";
digitalWrite(output4, HIGH);
} else if (header.indexOf("GET /4/off") >= 0) {
Serial.println("GPIO 4 off");
output4State = "off";
digitalWrite(output4, LOW);
}
// Display the HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-
width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("<style>html { font-family: Helvetica; display:
inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #195B6A; border: none;
color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px;
cursor: pointer;}");
client.println(".button2 {background-color:
#77878A;}</style></head>");
client.println("<body><h1>ESP32 Web Server</h1>");
// Display current state, and ON/OFF buttons for GPIO 5
client.println("<p>GPIO 5 - State " + output5State + "</p>");
if (output5State == "off") {
client.println("<p><a href=\"/5/on\"><button
class=\"button\">ON</button></a></p>");
Name: Pujankumar patel En.No.: 12302110503005
IOT ARCHITECTURE & PROTOCOLS(202046714)
G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY
} else {
client.println("<p><a href=\"/5/off\"><button class=\"button
button2\">OFF</button></a></p>");
}
// Display current state, and ON/OFF buttons for GPIO 4
client.println("<p>GPIO 4 - State " + output4State + "</p>");
if (output4State == "off") {
client.println("<p><a href=\"/4/on\"><button
class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/4/off\"><button class=\"button
button2\">OFF</button></a></p>");
}
client.println("</body></html>");
// The HTTP response ends with another blank line
client.println();
break;
} else { // If you got a newline, clear currentLine
currentLine = "";
}
} else if (c != '\r') { // If you got anything else but a carriage return
character
currentLine += c; // Add it to the end of currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
Name: Pujankumar patel En.No.: 12302110503005
IOT ARCHITECTURE & PROTOCOLS(202046714)
G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY
Testing the Web Server
upload the code,
Open the Serial Monitor at a baud rate of 115200.
Findi the NodeMCU IP Address using the Serial Monitor
Copy that IP address, because you need it to access the web server.
Accessing the Web Server. Open the browser and type the Node MCU IP address, and the
following page will be displayed as shown in below figure. This page is sent by the NodeMCU
when a request on the NodeMCU IP address is made.
Name: Pujankumar patel En.No.: 12302110503005
IOT ARCHITECTURE & PROTOCOLS
PROTOCOLS(202046714)
G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY
Other information about the HTTP request such as HTTP header fields can be
also seen. They define the operating parameters of an HTTP transaction.
Name: Pujankumar patel En.No.: 12302110503005
IOT ARCHITECTURE & PROTOCOLS(202046714)
G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY
Name: Pujankumar patel En.No.: 12302110503005
IOT ARCHITECTURE & PROTOCOLS(202046714)
G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY
Output:
Conclusion:
The standalone web server was successfully created using NodeMCU, enabling the
control of two LEDs via a web interface. This project demonstrates the integration
of IoT technology with web development, providing a user-friendly platform to
manage hardware outputs remotely. It highlights the potential for scalable solutions
in smart home automation and similar applications, ensuring reliable and efficient
operation with minimal hardware requirements.
Name: Pujankumar patel En.No.: 12302110503005
