0%

利用NodeMCU建立WebServer

Posted on Edited on In

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/