0%

利用NodeMCU建立WebServer

WebServer

這次我們要使用NodeMCU來建立WebServer,透過在網頁上的互動,傳送request給NodeMCU,來控制上面的LED燈,就如同我們打開一個網站,我們想要到他的A頁面,我們就會需要輸入網址http://www.example.com/A,然後伺服器就會傳送給使用者A頁面的資訊,而我們這邊要做的就是在傳送頁面資訊的同時,也控制NodeMCU上面的LED燈

需要材料

NodeMCU

Arduino程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
#include <ESP8266WiFi.h>

char ssid[] = "your ssid";
char pass[] = "your password";

WiFiServer server(80);

int value = LOW;

void setup() {

Serial.begin(115200);

pinMode(LED_BUILTIN, OUTPUT);

// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);

WiFi.begin(ssid, pass);

while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");

// Start the server
server.begin();
Serial.println("Server started");

// Print the IP address
Serial.print("Use this URL to connect: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");

}

void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}

// Wait until the client sends some data
Serial.println("new client");
while (!client.available()) {
delay(1);
}

// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();

// Match the request
if (request.indexOf("/LED=ON") != -1) {
digitalWrite(LED_BUILTIN, LOW);
value = HIGH;
}
if (request.indexOf("/LED=OFF") != -1) {
digitalWrite(LED_BUILTIN, HIGH);
value = LOW;
}

// Return the response
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // do not forget this one
client.println("<!DOCTYPE HTML>");
client.println("<html>");

client.print("Led pin is now: ");

if (value == HIGH) {
client.print("On");
} else {
client.print("Off");
}
client.println("<br><br>");
client.println("<a href=\"/LED=ON\"><button>ON</button></a><a href=\"/LED=OFF\"><button>OFF</button></a></p>");
client.println("</html>");

delay(1);
Serial.println("Client disonnected");
Serial.println("");

}

大家可以看到程式碼裡面有一段是client.println,一開始會先println<!DOCTYPE HTML>,這是告知瀏覽器說目前傳送的是HTML,所以當使用者連webserver之後,webserver會傳送這一段告知使用者的瀏覽器,執行html,而後面的代碼從<html></html>結束,裡面包裹的都是瀏覽器必須執行的網頁代碼,大家可以看到這邊的範例,執行出來的結果就像這樣

See the Pen nodemcu_webserver by KenLee (@ken551113) on CodePen.

在看過這個範例之後,可以了解到當我們按下ON的按鈕之後,就會連結到/LED=ON\的網頁,按下OFF就會連接到/LED=OFF\的網頁,但是為何後面要再加上\呢?我們可以再回到arduino的程式碼,從這段程式碼裡面可以發現,第一行是是讀取客戶端的request直到遇到\r這個字元並存入字串request中,所以我們剛剛會在網址後面加上\就是為了讓webserver知道哪時候是結束,接著再經由requset裡面的字串來判斷我們要亮led亮或者是暗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();

// Match the request
if (request.indexOf("/LED=ON") != -1) {
digitalWrite(LED_BUILTIN, LOW);
value = HIGH;
}
if (request.indexOf("/LED=OFF") != -1) {
digitalWrite(LED_BUILTIN, HIGH);
value = LOW;
}

操作

上傳完程式碼之後,我們打開Serial Port,可以看到他已經連上線,並且告知我們webserver目前的IP位置,我們只需要把IP位置貼上瀏覽器就可以執行webserver提供的網頁代碼
螢幕快照 2017-08-03 下午3.02.41
20624430_1631373533542168_538481781_n

reference

http://www.slumberjer.com/myardu/2016/03/22/nodemcu-arduino-local-web-server-control-led-blink/