วิธีใช้ ESP8266 เป็นเว็บเซิร์ฟเวอร์: 5 ขั้นตอน

2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-13 06:58

สวัสดี ฉันกำลังใช้ windows 10, NodeMCU 1.0 และนี่คือรายการซอฟต์แวร์ที่ฉันใช้และคู่มือการติดตั้งที่ฉันติดตาม:

• Arduino IDE
• บอร์ดเพิ่มเติมสำหรับ esp8266
• Spiff

ห้องสมุดที่ใช้:

เว็บซ็อคเก็ต

ฉันใช้ NodeMCU เป็นเซิร์ฟเวอร์เพื่อให้บริการไฟล์ HTML ที่ฉันสร้างจากบทช่วยสอนนี้ เพื่อให้บริการไฟล์นี้ ฉันได้อัปโหลดไฟล์ไปยังระบบไฟล์ nodemcu โดยใช้ Spiffs ไฟล์ HTML ส่งข้อมูลไปยัง nodemcu โดยใช้ websockets เพื่อพิมพ์บนจอภาพอนุกรมสำหรับสิ่งนี้ การสื่อสารแบบสองทิศทางที่รวดเร็วผ่าน websockets ของเซิร์ฟเวอร์และไคลเอนต์เปิดใช้งานสิ่งนี้เพื่อใช้เป็นรีโมทคอนโทรล ในขั้นตอนต่อไปนี้ ฉันกำลังอธิบายวิธีการทำงานของรหัสของฉัน

เสบียง

NodeMCU

ขั้นตอนที่ 1: ทำให้มันใช้งานได้

นี่คือขั้นตอนในการทำงาน

1. ดาวน์โหลดไฟล์แนบและเปิดไฟล์ mousebot.ino
2. ไปที่สเก็ตช์>แสดงโฟลเดอร์สเก็ตช์และสร้างโฟลเดอร์ใหม่ชื่อ data
3. บันทึกไฟล์ html จากบทช่วยสอนนี้ในโฟลเดอร์ที่ชื่อ ฉันตั้งชื่อของฉันเป็น "จอยสติ๊ก"
4. ตรวจสอบให้แน่ใจว่า spiff ของคุณทำงานได้แล้วโดยไปที่เครื่องมือและเห็น "การอัปโหลดข้อมูลร่าง esp8266"
5. อัปโหลดไฟล์ html ไปยัง nodemcu โดยคลิก "การอัปโหลดข้อมูลร่าง esp8266"
6. หลังจากอัปโหลดไฟล์แล้ว ให้อัปโหลดไฟล์ mousebot.ino ไปยัง nodemcu โดยไปที่ arduino IDE แล้วกด ctrl U

ขั้นตอนที่ 2: โค้ดทำงานอย่างไร

ขั้นแรก เรารวมไลบรารี่ที่โค้ดนี้จะใช้

// เพื่อเปิดใช้งาน ESP8266 เพื่อเชื่อมต่อกับ WIFI

#include #include #include // เปิดใช้งาน ESP8266 เพื่อทำหน้าที่เป็นเซิร์ฟเวอร์ #include // เปิดใช้งานการสื่อสารกับเซิร์ฟเวอร์และไคลเอนต์ (อุปกรณ์ที่เชื่อมต่อของคุณ) #include #include // เพื่อเปิดไฟล์ที่อัพโหลดบน nodemcu #include

ตั้งค่า esp8266 เป็นเว็บเซิร์ฟเวอร์ที่เปิดบนพอร์ต 80 พอร์ตคือเส้นทางที่ข้อมูลจะผ่าน ในฐานะพอร์ตเซิร์ฟเวอร์ มันจะส่งไฟล์ HTML ไปยังไคลเอนต์ (อุปกรณ์ที่เชื่อมต่ออยู่)

เพิ่มการเชื่อมต่อ websocket โดยใช้พอร์ต 81 เพื่อฟังข้อความจากไคลเอนต์

websockets มีพารามิเตอร์ num, WStype_t, payload และ size num กำหนดหมายเลขไคลเอ็นต์ payload คือข้อความที่ส่ง ขนาดคือความยาวของข้อความ และ WStype_t สำหรับเหตุการณ์ต่างๆ เช่น

• WStype_DISCONNECTED - เมื่อตัดการเชื่อมต่อของไคลเอ็นต์
• WStype_CONNECTED: - เมื่อไคลเอ็นต์เชื่อมต่อ
• WStype_TEXT - รับข้อมูลจากลูกค้า

การกระทำที่แตกต่างกันขึ้นอยู่กับประเภทของเหตุการณ์และมีการแสดงความคิดเห็นที่นี่

เป็นโมฆะ webSocketEvent (uint8_t num, ประเภท WStype_t, uint8_t * เพย์โหลด, ความยาว size_t) {

สวิตช์ (ประเภท) { กรณี WStype_DISCONNECTED: Serial.printf ("[%u] ตัดการเชื่อมต่อ!\n", num); // พิมพ์ข้อมูลไปยังตัวแบ่งจอภาพแบบอนุกรม กรณี WStype_CONNECTED: { IPAddress ip = webSocket.remoteIP (num); // รับ IP ของไคลเอ็นต์ Serial.printf("[%u] เชื่อมต่อจาก %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], เพย์โหลด); webSocket.sendTXT(หมายเลข "เชื่อมต่อแล้ว"); //ส่ง "เชื่อมต่อ" ไปยังคอนโซลของเบราว์เซอร์ } ตัวแบ่ง; กรณี WStype_TEXT: Serial.printf("[%u] Data: %s\n", num, payload); // พิมพ์หมายเลขไคลเอ็นต์เป็น %u และข้อมูลที่ได้รับเป็นสตริงใน %s\n break;}}

ขั้นตอนที่ 3: ตั้งค่า NODEMCU เป็นเซิร์ฟเวอร์

ตั้งค่า ssid และรหัสผ่านที่คุณจะใช้เชื่อมต่อในภายหลัง

const char *ssid = "ลอง";

const char *รหัสผ่าน = "12345678";

ในการตั้งค่า เราระบุอัตราที่ nodemcu และพีซีของเราจะสื่อสารกัน ซึ่งก็คือ 115200

การตั้งค่าเป็นโมฆะ (เป็นโมฆะ) {

Serial.begin(115200); Serial.print("\n");

ตั้งค่าเป็น true เช่นกัน ดูเอาต์พุตการวินิจฉัย wifi บนเทอร์มินัล serila

Serial.setDebugOutput(จริง);

เริ่มต้นระบบไฟล์

SPIFFS.begin();

ตั้งค่า nodemcu เป็นจุดเชื่อมต่อด้วย ssid และรหัสผ่านที่ป้องกันก่อนหน้านี้ และพิมพ์ IP ของ nodemcu ที่คุณจะเชื่อมต่อก่อนหน้านี้ โดยค่าเริ่มต้นคือ 192.168.4.1

Serial.print("กำลังกำหนดค่าจุดเชื่อมต่อ…");

WiFi.mode(WIFI_AP); WiFi.softAP(ssid, รหัสผ่าน); IPAddress myIP = WiFi.softAPIP(); Serial.print ("ที่อยู่ IP ของ AP: "); Serial.println(myIP);

เริ่มต้น websocket บน nodemcu ซึ่งเป็นเซิร์ฟเวอร์ที่แท้จริง

webSocket.begin();

เรียกใช้ฟังก์ชัน webSocketEvent เมื่อเกิดเหตุการณ์ websocket

webSocket.onEvent (webSocketEvent);

สำหรับการดีบัก ให้พิมพ์ "เซิร์ฟเวอร์ WebSocket เริ่มทำงาน" ในบรรทัดใหม่ นี่คือการกำหนดบรรทัดของรหัสที่ nodemcu กำลังประมวลผล

Serial.println("เซิร์ฟเวอร์ WebSocket เริ่มทำงาน");

เมื่อไคลเอนต์เยี่ยมชม 192.168.4.1 มันจะเรียกใช้ฟังก์ชัน handleFileRead และส่งพารามิเตอร์เซิร์ฟเวอร์ URI ไปพร้อมกับมัน ซึ่งในกรณีนี้คือข้อมูล nodemcu ของเรา ฟังก์ชัน handleFileRead จะให้บริการไฟล์ html จากระบบไฟล์ nodemcu

เซิร์ฟเวอร์.onNotFound((){

if(!handleFileRead(server.uri()))

หากไม่พบจะแสดง "FileNotFound"

server.send (404, "ข้อความ/ธรรมดา", "FileNotFound");

});

เริ่มต้นเซิร์ฟเวอร์และเริ่มต้นเซิร์ฟเวอร์ HTTP การพิมพ์

เซิร์ฟเวอร์.begin(); Serial.println("เซิร์ฟเวอร์ HTTP เริ่มทำงาน");

ใน void loop ของเรา เราเปิดใช้งานเซิร์ฟเวอร์เพื่อจัดการกับไคลเอนต์และการสื่อสารของ websockets อย่างต่อเนื่องดังนี้:

วงโมฆะ (เป็นโมฆะ){

server.handleClient(); webSocket.loop();}

ขั้นตอนที่ 4: โหลดไฟล์ HTML

เราจะใช้ฟังก์ชันชื่อ handleFileRead เพื่อเปิดและไฟล์ html จากระบบไฟล์ nodemcu มันจะส่งคืนค่าบูลีนเพื่อตรวจสอบว่าโหลดหรือไม่

เมื่อไคลเอนต์เปิด "192.168.4.1/" เรากำหนดเส้นทางของไฟล์เป็น "/Joystick.html ชื่อไฟล์ของเราในโฟลเดอร์ข้อมูล

bool handleFileRead (เส้นทางสตริง) {

Serial.println("handleFileRead:" + เส้นทาง); if(path.endsWith("/")) เส้นทาง += "Joystick.html"; ถ้า (SPIFFS.exists (เส้นทาง)) { ไฟล์ไฟล์ = SPIFFS.open (เส้นทาง "r"); size_t ส่ง = server.streamFile (ไฟล์ "text/html"); ไฟล์.close(); คืนค่าจริง; } คืนค่าเท็จ }

ตรวจสอบว่ามีเส้นทางของไฟล์"/Joystick.html" หรือไม่

ถ้า (SPIFFS.exists (เส้นทาง)){

หากมี ให้เปิดเส้นทางโดยมีวัตถุประสงค์เพื่ออ่านซึ่งระบุโดย "r" ไปที่นี่เพื่อวัตถุประสงค์เพิ่มเติม

ไฟล์ไฟล์ = SPIFFS.open(พาธ, "r");

ส่งไฟล์ไปยังเซิร์ฟเวอร์เช่นเดียวกับประเภทเนื้อหา "text/html"

size_t ส่ง = server.streamFile (ไฟล์ "text/html");

ปิดไฟล์

ไฟล์.close();

ฟังก์ชัน handleFileRead คืนค่า true

คืนค่าจริง;}

หากไม่มีเส้นทางของไฟล์ ฟังก์ชัน handleFileRead จะคืนค่า false

คืนค่าจริง; }

ขั้นตอนที่ 5: ลองเลย

เชื่อมต่อกับ nodeMCU และไปที่ "192.168.4.1" แล้วลอง!:)