Arduino結合ESP8266 Serial WIFI模塊訪問遠程服務器

參考資料：Control LED from web app using ESP8266 Serial WIFI module 強力推薦，單片機/Arduino 實現物聯的啟蒙教程，下文基本是對這篇教程的理解和翻譯

開頭的話：現在物聯網平台很多，類似Yeelink，樂為物聯，Bylnk（為microduino量身打造，更易上手），借助它們提供的APP和接口可以快速地實現在手機端接收遠程硬件信息。但別人的框架總是固定的，接口也是有限的，在樣式和功能上有一定局限性，沒法做到完全滿足需求的定制型APP。所以，我希望搭建自己的獨立平台，實現遠程控制硬件，類似智能家居的設計，然后就找到這篇教程，理解運用就可以達到自己的目的了。

教程項目：使用ESP8266模塊和Arduino開發板在WIFI下通過網頁遠程控制LED開關

所需器件：1. Arduino開發板 2.LED燈 3.面包板 4.連接線 5.電腦

具體步驟：

一、配置Arduino IDE環境

• 安裝ESP8266開發板軟件包
  使用1.6.4及以上版本的Arduino, 打開Arduino IDE，打開 文件->首選項 在 附加開發板管理器網址 一欄寫入：http://arduino.esp8266.com/package_esp8266com_index.json 添加完以后點擊 好。
  做完這步以后重啟Arduino IDE，然后依次點擊 工具->開發板->開發板管理器 打開后在搜索框輸入esp，然后能找到類似'esp8266 by ESP8266 Community'，點擊並安裝。
  安裝完后重啟Arduino IDE，然后依次點擊 工具->開發板->Generic ESP8266 Module，接着按照下面的信息在工具欄找到對應項進行配置
  
  • Flash Mode: DIO
  • Flash Frequency: 40 MHz
  • Upload Using: Serial
  • CPU Frequency: 80 MHz
  • Flash Size: 4M (1M SPIFFS)
  • Upload Speed: 115200
  • Port: 對應的USB 端口 (當你一將Arduino連接電腦時，在設備管理器中會冒出端口號）
  • Programmer: AVRISP mkll
  其他的設置就按照默認的選擇不變
  
  
• 安裝ArduinoJSON庫
  在我們的HTML網頁中將使用到json數據，所以我們需要添加ArduinoJson庫到我們的Arduino IDE中。打開 項目->加載庫->管理庫 在搜索框輸入json，可能會得到類似 'ArduinoJSON by Benolt Blanchon' 點擊它並安裝，如果安裝出現問題，可以訪問如下鏈接: installing ArduinoJson library 在這步設置以后，你可以通過 #include<ArduinoJson.h> 在項目中添加庫 了

二、配置HTML網頁程序（需要有一點網頁開發基礎）

原教程的網頁程序是用PHP+Apache配置的，如果熟悉這兩種工具使用的可以訪問下面鏈接下載運行：Controling LED using ESP8266 HTML app（這個網頁應用的本質就是：在主頁面上放置兩個按鈕，點擊按鈕on，會通過js顯示一張燈亮的圖片，同時修改light.json中的數據為{"light":"on"}；點擊按鈕off，會通過js顯示一張燈滅的圖片，同時修改light.json中的數據為{"light":"off"}）。但對於我來說，重點在於掌握控制原理而不在於准備網頁程序，因為遠程控制的形式有很多種（網頁端、安卓應用、蘋果應用），沒必要為了完成測試把每種應用都學一遍，所以我只在自己電腦上新建一個web project，例如工程名起為wifiarduino，里面放一個light.json文件，內容為{"light":"off"}，然后放到tomcat中發布（需要修改端口號為http協議默認端口號80），然后就能通過在瀏覽器端輸入http://localhost/wifiarduino/light.json查看到了。

 三、實物連線

我們不需要使用專門的固件燒寫工具，我們可以將移除了ATmega芯片的Arduino開發板做為固件燒寫工具。如下圖所示，移除中間的芯片。

ESP8266        Arduino

• VCC                      3.3 V
• GND                     GND
• CH_PD                 3.3 V
• TX                         TX
• RX                         RX
• GPIO2                   3.3 V
• GPIO0                   GND

 給ESP8266供電：ESP8266模塊是由低電壓（3.3V DC）供電的，把ESP8266的VCC和CH_PD連接到Arduino的3.3V開發板上，在GPIO2和3.3V電源中間接一個1KΩ的電阻。
連接TX/RX引腳：TX/RX是 用於編程模塊，串口I/O以及調試。將ESP8266的TX與Arduino板上的TX，ESP8266的RX與Arduino上的RX對應連接起來。
將ESP8266設定為FLASH（燒寫）模式：當GPIO0（上圖紫色線）接地線時，ESP8266是以bootloader模式（編程模式）啟動的，這也就是你可以燒寫ESP8266（將Arduino上的代碼轉移到ESP8266上）的時候。在Arduino代碼加載完畢時，你將看到Arduino IDE底部提示“上傳結束”的信息，然后代碼就會開始運行了。
程序上傳結束后，將紫色線移除：當你不想將ESP8266一直設定為燒寫模式時，將紫色線移除即可，程序將會一直在ESP8266上執行。

四、編寫Arduino代碼

原理：下面我們將用到<ESP8266WiFi.h>以及<ArduinoJson.h>頭文件，實質上就是通過ESP去訪問我們的light.json文件，如果json文件中light的值是on的話，就點亮LED；如果light的值是off的話，就關閉LED（你可以在本地編輯json文件中light的值，來控制LED的開關）。下面是示例代碼：

#include <ESP8266WiFi.h>
#include <ArduinoJson.h>
const char* ssid     = "mywifi"; //修改成你可訪問的wifi名稱 const char* password = "mywifipassword";  // 修改成wifi密碼 const char* host     = "192.168.1.10"; // 你的網點域名或IP 
String path          = "/wifiarduino/light.json"; // 文件路徑 const int pin        = 2;
void setup() {
    pinMode(pin, OUTPUT);
    pinMode(pin, HIGH);
    Serial.begin(115200);
  delay(10);
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  int wifi_ctr = 0;
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("WiFi connected");
    Serial.println("IP address: " + WiFi.localIP());
}
void loop() {
    Serial.print("connecting to ");
  Serial.println(host);
  WiFiClient client;
  const int httpPort = 80;
  if (!client.connect(host, httpPort)) {
    Serial.println("connection failed");
    return;
  }
  client.print(String("GET ") + path + " HTTP/1.1\r\n" +               "Host: " + host + "\r\n" +                "Connection: keep-alive\r\n\r\n");
  delay(500); // wait for server to respond
  // read response  
String section="header";
  while(client.available()){
    String line = client.readStringUntil('\r');
    // Serial.print(line);    // we’ll parse the HTML body here
    if (section=="header") { // headers..
      Serial.print(".");
      if (line=="\n") { // skips the empty space at the beginning
         section="json";
      }
    }
    else if (section=="json") {  // print the good stuff
      section="ignore";
      String result = line.substring(1);      // Parse JSON
      int size = result.length() + 1;
      char json[size];
      result.toCharArray(json, size);
      StaticJsonBuffer<200> jsonBuffer;
      JsonObject& json_parsed = jsonBuffer.parseObject(json);
      if (!json_parsed.success())
      {
        Serial.println("parseObject() failed");
        return;
      }
      // Make the decision to turn off or on the LED
      if (strcmp(json_parsed["light"], "on") == 0) {
        digitalWrite(pin, HIGH);
         Serial.println("LED ON");
      }
      else {
        digitalWrite(pin, LOW);
        Serial.println("led off");
      }
    }
  }
  Serial.print("closing connection. ");
}

 五、最后需要做的事

我們打開Arduino IDE中 工具->串口監視器，並將右下角的波特率設定為115200，然后它將會顯示你是否連上了WiFi，如果你看到ESP8266上有紅燈亮起，且有藍燈閃爍時，說明你的無線模塊准備完畢。最后可以移除RX/TX引腳連線，通過3.3V的鋰電池給ESP8266供電（如下圖所示）。感謝閱讀，祝編程愉快！