Esp8266 Web Server Arduino Ide | Prepare The Arduino Ide

Why flashing your ESP8266 module with NodeMCU?

NodeMCU is a firmware that allows you to program the ESP8266 modules with LUA script. Programming the ESP8266 with LUA using the NodeMCU firmware is very similar to the way you program your Arduino. With just a few lines of code you can establish a WiFi connection, control the ESP8266 GPIOs, turning your ESP8266 into a web server and a lot more.

Viết hàm khởi tạo và xử lý webserver

Trong phần này, tôi sẽ lấy ví dụ về khởi tạo một webserver có chức năng điều khiển ON/OFF LED trên kít nodemcu esp8266 qua giao diện web. Lúc này chúng ta thực hiện như sau:

Khởi tạo webserver trên esp8266

Chúng ta viết một hàm setupServer() để khởi tạo webserver. Bạn cần gọi hàm này trong hàm setup() của Arduino IDE. Trong hàm setupServer(), bạn sẽ thực hiện các công việc sau:

• Thiết lập chân LED là output và tắt LED.
• Kết nối esp8266 với wifi và in ra địa chỉ IP của esp8266 trên cổng nối tiếp.
• Định nghĩa các hàm xử lý yêu cầu từ người dùng. Có bốn loại yêu cầu mà webserver sẽ xử lý:
  • Yêu cầu gốc: Khi người dùng truy cập địa chỉ IP của esp8266, webserver sẽ trả về trang web có giao diện điều khiển LED. Hàm xử lý yêu cầu này là handleRoot().
  • Yêu cầu bật LED: Khi người dùng truy cập địa chỉ IP/led/on, webserver sẽ bật LED và trả về thông báo “LED đã được bật”. Hàm xử lý yêu cầu này là handleLedOn().
  • Yêu cầu tắt LED: Khi người dùng truy cập địa chỉ IP/led/off, webserver sẽ tắt LED và trả về thông báo “LED đã được tắt”. Hàm xử lý yêu cầu này là handleLedOff().
  • Yêu cầu không hợp lệ: Khi người dùng truy cập một địa chỉ IP không tồn tại, webserver sẽ trả về mã lỗi 404. Hàm xử lý yêu cầu này là handleNotFound().
• Bắt đầu webserver và in ra thông báo “Webserver started” trên cổng nối tiếp.
• Ta cần đặt hàm server.handleClient() trong vòng lặp void loop() để lắng nghe yêu cầu từ phía người dùng.


//Hàm khởi tạo webserver void setupServer() { //Thiết lập chân LED là output pinMode(LED_PIN, OUTPUT); //Tắt LED digitalWrite(LED_PIN, HIGH); //Kết nối wifi Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected"); Serial.println("IP address: "); Serial.println(WiFi.localIP());//In địa chỉ IP kết nối ra serial monitor //Định nghĩa các hàm xử lý yêu cầu từ người dùng //Nếu người dùng truy cập địa chỉ IP của ESP8266, trả về giao diện web để điều khiển LED server.on("/", handleRoot); //Nếu người dùng truy cập địa chỉ IP/led/on, bật LED và trả về thông báo server.on("/led/on", handleLedOn); //Nếu người dùng truy cập địa chỉ IP/led/off, tắt LED và trả về thông báo server.on("/led/off", handleLedOff); //Nếu người dùng truy cập địa chỉ IP không hợp lệ, trả về mã lỗi 404 server.onNotFound(handleNotFound); //Bắt đầu webserver server.begin(); Serial.println("Webserver started"); }


Xử lý yêu cầu từ người dùng

Các hàm xử lý yêu cầu từ người dùng là các hàm được gọi khi webserver nhận được một yêu cầu từ người dùng. Mỗi hàm sẽ nhận một yêu cầu từ server và gửi lại một phản hồi cho người dùng. Phản hồi có thể là một chuỗi văn bản hoặc một chuỗi html.


//Hàm xử lý yêu cầu gốc void handleRoot() { //Gửi biến chứa mã nguồn html cho người dùng server.send(200, "text/html", html); } //Hàm xử lý yêu cầu bật LED void handleLedOn() { //Bật LED digitalWrite(LED_PIN, LOW); //Gửi thông báo cho người dùng server.send(200, "text/plain", "LED da duoc bat"); } //Hàm xử lý yêu cầu tắt LED void handleLedOff() { //Tắt LED digitalWrite(LED_PIN, HIGH); //Gửi thông báo cho người dùng server.send(200, "text/plain", "LED da duoc tat"); } //Hàm xử lý yêu cầu không hợp lệ void handleNotFound() { //Gửi mã lỗi 404 cho người dùng server.send(404, "text/plain", "Khong tim thay trang Web"); }


• Hàm handleRoot(): Hàm này sẽ gửi lại biến chứa mã nguồn html cho người dùng, để hiển thị giao diện web điều khiển LED.
• Hàm handleLedOn(): Hàm này sẽ bật LED và gửi lại thông báo “LED đã được bật” cho người dùng.
• Hàm handleLedOff(): Hàm này sẽ tắt LED và gửi lại thông báo “LED đã được tắt” cho người dùng.
• Hàm handleNotFound(): Hàm này sẽ gửi lại mã lỗi 404 cho người dùng khi yêu cầu không hợp lệ.

Code điều khiển LED qua webserver trên esp8266 nodemcu


//Khai báo thư viện #include

#include

//Khai báo thông tin wifi const char* ssid = "Tên wifi của bạn"; const char* password = "Mật khẩu wifi của bạn"; //Khai báo đối tượng webserver, sử dụng port 80 ESP8266WebServer server(80); //Khai báo chân LED const int LED_PIN = 2; //Khai báo biến chứa mã nguồn html dùng const char* R"html const char* html = R"html(


Webserver trên ESP8266

Điều khiển LED qua giao diện web

Bật LED

Tắt LED



)html"; //Hàm khởi tạo webserver void setupServer() { //Thiết lập chân LED là output pinMode(LED_PIN, OUTPUT); //Tắt LED digitalWrite(LED_PIN, HIGH); //Kết nối wifi Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected"); Serial.println("IP address: "); Serial.println(WiFi.localIP()); //Định nghĩa các hàm xử lý yêu cầu từ người dùng //Nếu người dùng truy cập địa chỉ IP của ESP8266, trả về giao diện web để điều khiển LED server.on("/", handleRoot); //Nếu người dùng truy cập địa chỉ IP/led/on, bật LED và trả về thông báo server.on("/led/on", handleLedOn); //Nếu người dùng truy cập địa chỉ IP/led/off, tắt LED và trả về thông báo server.on("/led/off", handleLedOff); //Nếu người dùng truy cập địa chỉ IP không hợp lệ, trả về mã lỗi 404 server.onNotFound(handleNotFound); //Bắt đầu webserver server.begin(); Serial.println("Webserver started"); } //Hàm xử lý yêu cầu gốc void handleRoot() { //Gửi biến chứa mã nguồn html cho người dùng server.send(200, "text/html", html); } //Hàm xử lý yêu cầu bật LED void handleLedOn() { //Bật LED digitalWrite(LED_PIN, LOW); //Gửi thông báo cho người dùng server.send(200, "text/plain", "LED da duoc bat"); } //Hàm xử lý yêu cầu tắt LED void handleLedOff() { //Tắt LED digitalWrite(LED_PIN, HIGH); //Gửi thông báo cho người dùng server.send(200, "text/plain", "LED da duoc tat"); } //Hàm xử lý yêu cầu không hợp lệ void handleNotFound() { //Gửi mã lỗi 404 cho người dùng server.send(404, "text/plain", "Khong tim thay trang Web"); } //Hàm setup của Arduino IDE void setup() { //Khởi tạo cổng nối tiếp Serial.begin(115200); //Khởi tạo webserver setupServer(); } //Hàm loop của Arduino IDE void loop() { //Xử lý các yêu cầu từ người dùng server.handleClient(); }




Sau khi nạp chương trình vào kít esp8266 nodemcu, bạn cần mở Serial Monitor trên Arduino IDE, với baudrate là 115200 sau đó ấn nút RST thì bạn sẽ nhìn thấy IP của esp8266 hiển thị.

Bạn mở một trình duyệt web và truy cập vào IP trên, lưu ý thiết bị máy tính hoặc điện thoại của bạn phải kết nối chung mạng wifi với eps8266 thì mới truy cập được. Lúc này bạn có thể điều khiển bật tắt LED qua giao diện web rồi.

Nạp code Esp8266 và kiểm tra kết nối Wifi

Bước đầu tiên chúng ta cần nạp code vào NodeMCU ESP8266 và kiểm tra xem đã kết nối được với Wifi chưa.

Sau khi đã kết nối thành công sẽ xuất hiện địa chỉ IP của Wifi, các bạn copy địa chỉ IP này paste trên một trình duyệt bất kỳ để có thể điều khiển Bật/Tắt Led nhé.

Đây là phần giao diện trên Web.

Dữ liệu trả về Serial khi chúng ta bật tắt trên Website.

Sơ đồ nguyên lý

Linh kiện cần thiết cho dự án

Tên linh kiện	Số lượng	Shopee
NodeMCU ESP8266	Mua ngay
Dây cắm (Đực – Đực)	Mua ngay
Breadboard	Mua ngay
LED	Mua ngay

Bạn sẽ học được gì

• Có kiến thức cơ bản về Robotics

• Chế tạo Robot dò đường thông minh

• Đánh thức nhà khoa học bên trong bạn

• Tìm hiểu thêm về Robotics, các thuật toán Robot tự động

• Kiến thức nền tảng để chế tạo các máy móc tự động phục vụ đời sống sinh hoạt, lao động sản xuất

• Kiến thức để chế tạo sản phẩm, tham gia các cuộc thi khoa học công nghệ trong nước và quốc tế

Wrapping Up

For an in-depth explanation on how the web server code works, please refer to this tutorial: ESP8266 Web Server Step-by-step

If you like the ESP8266 make sure you check our most popular projects:

• Home Automation Using ESP8266 (eBook)
• ESP8266 Web Server Tutorial Step-by-step
• ESP8266 Wi-Fi Button – DIY Amazon Dash Button Clone
• ESP8266 Daily Task – Publish Temperature Readings to ThingSpeak
• ESP8266 Weather Forecaster
• Nextion Display with ESP8266 – Touchscreen User Interface for Node-RED

Thanks for reading.

P.S. If you got stuck throughout this tutorial make sure you read “ESP8266 Troubleshooting Guide“

Điều khiển LED bằng WebServer sử dụng NodeMCU ESP8266

Trong nội dung bài viết hôm nay mình sẽ chia sẽ cho các bạn các tạo một bảng điều khiển trên Webpage sử dụng NodeMCU ESP8266.

Chúng ta bắt đầu nhé…

Code

Upload the following code into your ESP8266 using the preceding software. Your file should be named “init.lua“. You can click here to download the file.


wifi.setmode(wifi.STATION) wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD") print(wifi.sta.getip()) led1 = 3 led2 = 4 gpio.mode(led1, gpio.OUTPUT) gpio.mode(led2, gpio.OUTPUT) srv=net.createServer(net.TCP) srv:listen(80,function(conn) conn:on("receive", function(client,request) local buf = ""; local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP"); if(method == nil)then _, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP"); end local _GET = {} if (vars ~= nil)then for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do _GET[k] = v end end buf = buf.."

ESP8266 Web Server

"; buf = buf.."

GPIO0


ON




OFF

"; buf = buf.."

GPIO2


ON




OFF

"; local _on,_off = "","" if(_GET.pin == "ON1")then gpio.write(led1, gpio.HIGH); elseif(_GET.pin == "OFF1")then gpio.write(led1, gpio.LOW); elseif(_GET.pin == "ON2")then gpio.write(led2, gpio.HIGH); elseif(_GET.pin == "OFF2")then gpio.write(led2, gpio.LOW); end client:send(buf); client:close(); collectgarbage(); end) end)


Don’t forget to replace your WiFi Station details in that code above (Network Name and Password).

Testing the Web Server

Now, you can upload the code, and it will work straight away. Don’t forget to check if you have the right board and COM port selected, otherwise you’ll get an error when trying to upload. Open the Serial Monitor at a baud rate of 115200.

Finding the ESP IP Address

Press the ESP8266 RESET button, and it will output the ESP IP address on the Serial Monitor

Copy that IP address, because you need it to access the web server.

Accessing the Web Server

Open your browser, type the ESP IP address, and you’ll see the following page. This page is sent by the ESP8266 when you make a request on the ESP IP address.

If take a look at the serial monitor, you can see what’s going on on the background. The ESP receives an HTTP request from a new client – in this case, your browser.

You can also see other information about the HTTP request – these fields are called HTTP header fields, and they define the operating parameters of an HTTP transaction.

Testing the Web Server

Let’s test the web server. Click the button to turn GPIO 5 ON. The ESP receives a request on the /5/on URL, and turns LED 5 ON.

The LED state is also updated on the web page.

Test GPIO 4 button and check that it works in a similar way.

Code

#include

const char* ssid = “Phamson”; const char* password = “phamtheson”; int LED = 16; // GPIO16 (D0) WiFiServer server(80); void setup(){ Serial.begin(115200); pinMode(LED, OUTPUT); digitalWrite(LED, HIGH); Serial.print(“Connecting to the Newtork”); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print(“.”); } Serial.println(“WiFi connected”); server.begin(); Serial.println(“Server started”); Serial.print(“IP Address of network: “); // will IP address on Serial Monitor Serial.println(WiFi.localIP()); Serial.print(“Copy and paste the following URL: https://”); Serial.print(WiFi.localIP()); Serial.println(“/”); } void loop(){ WiFiClient client = server.available(); if (!client){ return;} Serial.println(“Waiting for new client”); while(!client.available()) { delay(1); } String request = client.readStringUntil(‘\r’); Serial.println(request); client.flush(); int value = HIGH; if(request.indexOf(“/LED=ON”) != -1){ digitalWrite(LED, LOW); // Turn LED ON value = LOW; } if(request.indexOf(“/LED=OFF”) != -1){ digitalWrite(LED, HIGH); // Turn LED OFF value = HIGH; } //*——————HTML Page Code———————*// client.println(“HTTP/1.1 200 OK”); // client.println(“Content-Type: text/html”); client.println(“”); client.println(”

“); client.println(”

“); client.print(” CONTROL LED: “); if(value == HIGH){ client.print(“OFF”); } else { client.print(“ON”); } client.println(“”); client.println(”


ON


“); client.println(”


OFF


“); client.println(”

“); delay(1); Serial.println(“Client disonnected”); Serial.println(“”); }

Schematics

To build the circuit for this tutorial you need the following parts:

Parts required:

• ESP8266 12-E – read Best ESP8266 Wi-Fi Development Boards
• 2x LEDs
• 2x Resistors (220 or 330 ohms should work just fine)
• Breadboard
• Jumper wires

If you’re using ESP-01, you also need an FTDI programmer or a Serial Adapter.

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

Connect two LEDs to your ESP8266 as shown in the following schematic diagram – with one LED connected to GPIO 4 (D2), and another to GPIO 5 (D1).

If you are using ESP-01…

If you’re using the ESP8266-01, use the following schematic diagram as a reference, but you need change the GPIOs assignment in the code (to GPIO 2 and GPIO 0).

Code

Copy the following code to your Arduino IDE, but don’t upload it yet. You need to make some changes to make it work for you.


/********* Rui Santos Complete project details at https://randomnerdtutorials.com *********/ // Load Wi-Fi library #include

// Replace with your network credentials const char* ssid = "REPLACE_WITH_YOUR_SSID"; const char* password = "REPLACE_WITH_YOUR_PASSWORD"; // Set web server port number to 80 WiFiServer server(80); // Variable to store the HTTP request String header; // Auxiliar variables to store the current output state String output5State = "off"; String output4State = "off"; // Assign output variables to GPIO pins const int output5 = 5; const int output4 = 4; // Current time unsigned long currentTime = millis(); // Previous time unsigned long previousTime = 0; // Define timeout time in milliseconds (example: 2000ms = 2s) 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 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, you got two newline characters in a row. // that's the end of the client HTTP request, so send a response: if (currentLine.length() == 0) { // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK) // and a content-type so the client knows what's coming, then a blank line: client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println("Connection: close"); client.println(); // turns the 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("


"); client.println("

"); client.println(""); // CSS to style the on/off buttons // Feel free to change the background-color and font-size attributes to fit your preferences client.println("

"); // Web Page Heading client.println("

ESP8266 Web Server

"); // Display current state, and ON/OFF buttons for GPIO 5 client.println("

GPIO 5 - State " + output5State + "

"); // If the output5State is off, it displays the ON button if (output5State=="off") { client.println("

ON

"); } else { client.println("

OFF

"); } // Display current state, and ON/OFF buttons for GPIO 4 client.println("

GPIO 4 - State " + output4State + "

"); // If the output4State is off, it displays the ON button if (output4State=="off") { client.println("

ON

"); } else { client.println("

OFF

"); } client.println("


"); // The HTTP response ends with another blank line client.println(); // Break out of the while loop break; } else { // if you got a newline, then 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 the currentLine } } } // Clear the header variable header = ""; // Close the connection client.stop(); Serial.println("Client disconnected."); Serial.println(""); } }



You need to modify the following two variables with your network credentials, so that your ESP8266 can establish a connection with your router.


// Replace with your network credentials const char* ssid = ""; const char* password = "";


Schematics

To build the circuit you need the following parts:

Parts required:

• ESP8266 12-E – read Best ESP8266 Wi-Fi Development Boards
• 2x LEDs
• 2x Resistors (220 or 330 ohms should work just fine)
• Breadboard
• Jumper wires

If you’re using ESP-01, you also need an FTDI programmer.

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

If your using ESP-01…

If you’re using the ESP8266-01, use the following schematic diagram as a reference.

Flashing your ESP8266

If you’re using an ESP8266-12 you just need to plug the ESP into your computer. If you’re using an ESP-01, you need an FTDI programmer to connect it to your computer. To establish a serial communication between your ESP8266 and a FTDI Programmer as shown in the schematic diagram below.

Open the flasher that you just downloaded and a window should appear (as shown in the following figure).

Press the button “Flash” and it should start the flashing process immediately (You might have to change some of the settings on the Advanced tab). After finishing this process, it should appear a green circle with a check icon.

Thêm đối tượng webserver

Thư viện ESP8266WebServer là một thư viện có sẵn trong Arduino IDE, giúp bạn tạo một webserver trên esp8266 một cách dễ dàng. Bạn chỉ cần khai báo thư viện này ở đầu code, và tạo một đối tượng webserver với port 80. Port là một số nhận dạng cho một kênh giao tiếp trên mạng. Port 80 là port mặc định cho giao thức HTTP, là giao thức mà webserver và trình duyệt sử dụng để giao tiếp.


//Khai báo thư viện #include

#include

//Khai báo đối tượng webserver, sử dụng port 80 ESP8266WebServer server(80);




Uploading the ESP8266 code

Having the ESP8266 add-on for the Arduino IDE installed (How to Install the ESP8266 Board in Arduino IDE), go to Tools and select “Generic ESP8266 Module”.

Copy the sketch below to your Arduino IDE. Replace the SSID and password with your own network credentials.


const char* ssid = "REPLACE_WITH_YOUR_SSID"; const char* password = "REPLACE_WITH_YOUR_PASSWORD";


After modifying the sketch upload it to your ESP8266 (If you can’t upload code to your ESP8266, read this troubleshooting guide).


/********* Rui Santos Complete project details at https://randomnerdtutorials.com *********/ // Load Wi-Fi library #include

// Replace with your network credentials const char* ssid = "REPLACE_WITH_YOUR_SSID"; const char* password = "REPLACE_WITH_YOUR_PASSWORD"; // Set web server port number to 80 WiFiServer server(80); // Variable to store the HTTP request String header; // Auxiliar variables to store the current output state String output5State = "off"; String output4State = "off"; // Assign output variables to GPIO pins const int output5 = 5; const int output4 = 4; // Current time unsigned long currentTime = millis(); // Previous time unsigned long previousTime = 0; // Define timeout time in milliseconds (example: 2000ms = 2s) 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 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, you got two newline characters in a row. // that's the end of the client HTTP request, so send a response: if (currentLine.length() == 0) { // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK) // and a content-type so the client knows what's coming, then a blank line: client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println("Connection: close"); client.println(); // turns the 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("


"); client.println("

"); client.println(""); // CSS to style the on/off buttons // Feel free to change the background-color and font-size attributes to fit your preferences client.println("

"); // Web Page Heading client.println("

ESP8266 Web Server

"); // Display current state, and ON/OFF buttons for GPIO 5 client.println("

GPIO 5 - State " + output5State + "

"); // If the output5State is off, it displays the ON button if (output5State=="off") { client.println("

ON

"); } else { client.println("

OFF

"); } // Display current state, and ON/OFF buttons for GPIO 4 client.println("

GPIO 4 - State " + output4State + "

"); // If the output4State is off, it displays the ON button if (output4State=="off") { client.println("

ON

"); } else { client.println("

OFF

"); } client.println("


"); // The HTTP response ends with another blank line client.println(); // Break out of the while loop break; } else { // if you got a newline, then 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 the currentLine } } } // Clear the header variable header = ""; // Close the connection client.stop(); Serial.println("Client disconnected."); Serial.println(""); } }



Upload code to ESP8266-01

If you’re using an ESP8266-01, you need an FTDI programmer to upload the code. Wire the ESP8266 to the FTDI programmer as shown in the following schematic diagram.

Uploading the Code

I recommend using the ESPlorer program created by 4refr0nt to create and save LUA files into your ESP8266. Follow these instructions to download and install ESPlorer:

1. Click here to download ESPlorer
2. Unzip that folder
3. Go to the dist folder (here’s the path: ESPlorer-master\ESPlorer\dist)
4. Run ESPlorer.jar. It’s a JAVA program, so you need JAVA installed on your computer.
5. Open the ESPlorer

You should see a window similar to the preceding Figure, follow these instructions to upload a LUA file:

1. Connect your FTDI programmer to your computer
2. Select your FTDI programmer port
3. Press Open/Close
4. Select NodeMCU+MicroPtyhon tab
5. Create a new file called init.lua
6. Press Save to ESP

Everything that you need to worry about or change is highlighted in red box.

Thiết lập giao diện web bằng html

Mã nguồn html là một chuỗi các thẻ (tag) và nội dung được trình duyệt hiển thị theo cách định dạng. Để tạo giao diện web cho webserver, bạn cần lưu trữ mã nguồn html trong một biến. Ở đây tôi dùng biến kiểu const char* R”html, kiểu này là một kiểu dữ liệu khác để lưu trữ mã nguồn html trong Arduino IDE. Kiểu này sử dụng cú pháp raw string literal, cho phép bạn viết mã nguồn html một cách trực quan, không cần thêm ký tự \n hay \ để xuống dòng hoặc thoát khỏi các ký tự đặc biệt.

Để khai báo biến chứa mã nguồn html dùng kiểu const char* R”html, bạn cần thêm ký tự R”html( ở đầu và )html” ở cuối của chuỗi html. Ví dụ:


//Khai báo biến chứa mã nguồn html dùng kiểu const char* R"html const char* html = R"html(


Webserver trên ESP8266

Điều khiển LED qua giao diện web

Bật LED

Tắt LED



)html";


Uploading the Sketch

Uploading the Sketch to the ESP-12E

If you’re using an ESP-12E NodeMCU Kit, uploading the sketch is very simple, since it has built-in programmer. Plug your board to your computer. Make sure you have the right board and COM port selected.

Then, click the Upload button in the Arduino IDE and wait a few seconds until you see the message “Done uploading.” in the bottom left corner.

Uploading Sketch to the ESP-01

Uploading code to the ESP-01 requires establishing a serial communication between your ESP8266 and a FTDI Programmer as shown in the schematic diagram below.

Note: alternatively, you can use a ESP8266-01 Serial Adapter, which is easier to use and less error-prone.

The following table shows the connections you need to make between the ESP8266 and the FTDI programmer.

ESP8266	FTDI programmer
RX	TX
TX	RX
CH_PD	3.3V
GPIO 0	GND
VCC	3.3V
GND	GND

If you have a brand new FTDI Programmer, you’ll probably need to install the FTDI drivers on your Windows PC. Visit this website for the official drivers. (If the COM port is grayed out in your Arduino IDE, it is probably because you don’t have the drivers installed).

Then, you just need to connect the FTDI programmer to your computer, and upload the code to the ESP8266.

Prepare the Arduino IDE

1. Download and install the Arduino IDE on your operating system (some older versions won’t work).

2. Then, you need to install the ESP8266 add-on for the Arduino IDE. For that, go to File > Preferences.

3. Enter http://arduino.esp8266.com/stable/package_esp8266com_index.json into the “Additional Board Manager URLs” field as shown in the figure below. Then, click the “OK” button.

4. Go to Tools > Board > Boards Manager…

5. Scroll down, select the ESP8266 board menu and install “esp8266 by ESP8266 Community”, as shown in the figure below.

6. Go to Tools > Board and choose your ESP8266 board. Then, re-open your Arduino IDE.

Kết luận

Qua bài viết này mình đã hướng dẫn các bạn cách thiết lập một webserver căn bản trên esp8266. Để có thêm nhiều chức năng như: truyền nhận dữ liệu, cập nhật giá trị cảm biến lên giao diện web hoặc nhận dữ liệu từ phía người dùng bạn cần tìm hiểu thêm hai kỹ thuật là websocket và ajax.

2 Bình luận

1. Good article! We are linking to this particularly great post on our website.

   Keep up the good writing.

In this project you’ll create a standalone web server with an ESP8266 that can toggle two LEDs using Arduino IDE. This ESP8266 Web Server is mobile responsive and it can be accessed with any device that as a browser in your local network.

For a more in-depth tutorial on how to create a web server, and explanation of the code, read this post ESP8266 Web Server Step-by-step

If you want to learn more about the ESP8266 module, first read my Getting Started Guide for the ESP8266 WiFi Module.

If you like the ESP and you want to do more projects you can read my eBook Home Automation Using ESP8266.

Let’s get started!

Bài viết liên quan

• Điều khiển thiết bị bằng giọng nói thông qua Google Assitant sử dụng ESP8266, Adafruit, IFTTT
• Điều khiển thiết bị bằng giọng nói thông qua Google Assistant Tiếng Viết sử dụng ESP8266, Blynk và IFTTT
• Hướng dẫn chi tiết điều khiển thiết bị Sonoff thông qua Google Assistant Tiếng Việt 2019
• Giám sát nhiệt độ, độ ẩm bằng App Blynk sử dụng NodeMCU ESP8266
• LED RGB sử dụng NodeMCU ESP8266 thay đổi màu sắc trên App Blynk

Trong bài này chúng ta sẽ biết cách thiết lập máy chủ web HTTP trên Node Wifi và cách thực hiện một số truy vấn với phương thức GET bằng trình duyệt web.

Khai báo các thư viện cần thiết:

#include

// Thư viện dùng để kết nối WiFi của ESP8266 #include

// Thư viện dùng để chạy web server

Để sử dụng thư viện ESP8266WebServer ta cần khởi tạo một đối tượng tên là server chạy trên port 80 (80 là port mặc định của web server)

ESP8266WebServer server(80);

Đối với phương thức GET, server dựa vào URI của truy vấn để xử lý và trả kết quả. Ví dụ trong trường hợp người dùng chỉ truy vấn trang chủ (URL = “/”) thì hàm handleRoot sẽ được gọi.

server.on(“/”, handleRoot);

void handleRoot() { server.send(200, “text/plain”, “Hello world”); }

Cuối cùng chúng ta cần gọi phương thức server.handleClient() trong vòng lặp chính để lắng nghe các truy vấn từ client.

void loop() { server.handleClient(); }

Bạn dùng Arduino IDE để nạp chương trình sau:

#include

// Thư viện dùng để kết nối WiFi của ESP8266 #include “ESP8266WebServer.h” const char* ssid = “Blocky AP”; // Tên của mạng WiFi mà bạn muốn kết nối đến const char* password = “password_ap”; // Mật khẩu của mạng WiFi const int led = 2; ESP8266WebServer server(80); void setup() { Serial.begin(115200); pinMode(led, OUTPUT); WiFi.begin(ssid, password); // Kết nối vào mạng WiFi Serial.print(“Connecting to “); Serial.print(ssid); // Chờ kết nối WiFi được thiết lập while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.print(“.”); } Serial.println(“\n”); Serial.println(“Connection established!”); Serial.print(“IP address: “); Serial.println(WiFi.localIP()); // Gởi địa chỉ IP đến máy tinh server.on(“/”, handleRoot); // Gọi hàm handleRoot khi nhận được truy vấn GET cho URI = “/” server.begin(); // Khởi tại web server Serial.println(“Server listening”); } void loop() { server.handleClient(); // Lắng nghe các truy vấn từ người dùng } void handleRoot() { server.send(200, “text/plain”, “Hello world”); }

Sau khi nạp code thành công, bạn mở Serial Monitor để biết được địa chỉ IP của server. Sau đó dùng trình duyệt thử truy cập đến các đường dẫn sau:

This tutorial is a step-by-step guide that shows how to build a standalone ESP8266 Web Server that controls two outputs (two LEDs). This ESP8266 NodeMCU Web Server is mobile responsive and it can be accessed with any device with a browser in your local network.

If you want to learn more about the ESP8266 module, first read my Getting Started Guide for the ESP8266 WiFi Module.

This tutorial covers two different methods to build the web server:

• Part 1: Create a Web Server Using Arduino IDE
• Part 2: Create a Web Server Using NodeMCU Firmware

Taking it Further

Now that you know how the code works, you can modify the code to add more outputs, or modify your web page. To modify your web page you may need to know some HTML and CSS.

Instead of controlling two LEDs, you can control a relay to control practically any electronics appliances.

To build a web server to display sensor readings, you can read the following tutorials:

• ESP8266 DHT Temperature and Humidity Web Server (Arduino IDE)
• ESP8266 DS18B20 Temperature Web Server (Arduino IDE)

Alternatively, if you want to program your ESP8266 using MicroPython, you can read this tutorial: ESP32/ESP8266 MicroPython Web Server – Control Outputs

If you like ESP8266 make sure you take a look at our course about Home Automation with the ESP8266.

Parts Required

Here’s the hardware that you need to complete this project:

• ESP8266 – read Best ESP8266 Wi-Fi Development Boards
• 2x LED
• 2x 330 Ohm resistor (220 Ohm or other values also work)
• Breadboard
• Jumper wires

If you’re using an ESP8266-01, you need an FTDI programmer to upload code.

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

How the Code Works

Now, let’s take a closer look at the code to see how it works, so that you are able to modify it to fulfill your needs.

The first thing you need to do is to include the ESP8266WiFi library.


// Load Wi-Fi library #include


As mentioned previously, you need to insert your ssid and password in the following lines inside the double quotes.


const char* ssid = ""; const char* password = "";


Then, you set your web server to port 80.


// Set web server port number to 80 WiFiServer server(80);


The following line creates a variable to store the header of the HTTP request:


String header;


Next, you create auxiliar variables to store the current state of your outputs. If you want to add more outputs and save its state, you need to create more variables.


// Auxiliar variables to store the current output state String output5State = "off"; String output4State = "off";


You also need to assign a GPIO to each of your outputs. Here we are using GPIO 4 and GPIO 5. You can use any other suitable GPIOs.


// Assign output variables to GPIO pins const int output5 = 5; const int output4 = 4;


setup()

Now, let’s go into the setup(). The setup() function only runs once when your ESP first boots. First, we start a serial communication at a baud rate of 115200 for debugging purposes.


Serial.begin(115200);


You also define your GPIOs as OUTPUTs and set them to LOW.


// Initialize the output variables as outputs pinMode(output5, OUTPUT); pinMode(output4, OUTPUT); // Set outputs to LOW digitalWrite(output5, LOW); digitalWrite(output4, LOW);


The following lines begin the Wi-Fi connection with WiFi.begin(ssid, password), wait for a successful connection and prints the ESP IP address in the Serial Monitor.


// Connect to Wi-Fi network with SSID and password 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();


loop()

In the loop() we program what happens when a new client establishes a connection with the web server.

The ESP is always listening for incoming clients with this line:


WiFiClient client = server.available(); // Listen for incoming clients


When a request is received from a client, we’ll save the incoming data. The while loop that follows will be running as long as the client stays connected. We don’t recommend changing the following part of the code unless you know exactly what you are doing.


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 while (client.connected()) { // loop while the client's connected 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, you got two newline characters in a row. // that's the end of the client HTTP request, so send a response: if (currentLine.length() == 0) { // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK) // and a content-type so the client knows what's coming, then a blank line: client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println("Connection: close"); client.println();


The next section of if and else statements checks which button was pressed in your web page, and controls the outputs accordingly. As we’ve seen previously, we make a request on different URLs depending on the button we press.


// turns the 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); }


For example, if you’ve pressed the GPIO 5 ON button, the URL changes to the ESP IP address followed by /5/ON, and we receive that information on the HTTP header. So, we can check if the header contains the expression GET /5/on.

If it contains, the code prints a message on the serial monitor, changes the output5State variable to on, and turns the LED on.

This works similarly for the other buttons. So, if you want to add more outputs, you should modify this part of the code to include them.

Displaying the HTML Web Page

The next thing you need to do, is generate the web page. The ESP8266 will be sending a response to your browser with some HTML text to display the web page.

The web page is sent to the client using the client.println() function. You should enter what you want to send to the client as an argument.

The first text you should always send is the following line, that indicates that we’re sending HTML.

Then, the following line makes the web page responsive in any web browser.


client.println("

");

The next one is used to prevent requests related to the favicon – You don’t need to worry about this line.


client.println("");


Styling the Web Page

Next, we have some CSS to style the buttons and the web page appearance. We choose the Helvetica font, define the content to be displayed as a block and aligned at the center.


client.println("

");


Setting the Web Page First Heading

In the next line you set the first heading of your web page, you can change this text to whatever you like.


// Web Page Title client.println("

ESP8266 Web Server

");


Displaying the Buttons and Corresponding State

Then, you write a paragraph to display the GPIO 5 current state. As you can see we use the output5State variable, so that the state updates instantly when this variable changes.


client.println("

GPIO 5 - State " + output5State + "

");


Then, we display the on or the off button, depending on the current state of the GPIO.


if (output5State=="off") { client.println("

ON

"); } else { client.println("

OFF

"); }


We use the same procedure for GPIO 4.

Closing the Connection

Finally, when the response ends, we clear the header variable, and stop the connection with the client with client.stop().


// Clear the header variable header = ""; // Close the connection client.stop();


Keywords searched by users: esp8266 web server arduino ide

Categories: Sưu tầm 71 Esp8266 Web Server Arduino Ide

See more here: kientrucannam.vn

See more: https://kientrucannam.vn/vn/