把Esp8266作爲服務器端，手機PC作爲客戶端，發出get請求，Esp8266以http協議數據來回復gpio的端口狀態！從而實現了數據交互！ 主要應用智能家居，物聯網這篇主要是對**(一)**和（二）的優化。新添加了OTA無線更新功能。同樣也適用於DHT11溫溼度數據顯示在網頁上
二、Html文件
這裏以下圖控制頁面爲例，如圖及代碼所示：這裏以控制x1,m?x1=1爲例子，Html文件源碼見附件。html文件可以根據自己的需要修改。
寫好的html後，需要將代碼中的 ’ ， " 替換成 \ ’ ， \ “然後再壓縮 Esp8266燒錄Html文件優化工具 優化好的代碼直接粘貼在C語言中， 其中如果需要插入端口的狀態，按照”+a+"的格式添加，其中a 表示反饋狀態，具體見下邊說明。
html 參考代碼
現在下載附件被自動設置成需要5個積分下載，太麻煩了，這裏直接貼html源碼。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes' />
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>MeiShang Smarthome Control System</title>
<link rel='stylesheet' href='http://at.alicdn.com/t/font_1640699_nk29qyrqhco.css'>
<style>
h2,h1{line-height:1%;}
body {
width: 360px;
margin: 0;
padding: 0;
background: LightCyan;
}
.button {
width: 130px;
height: 70px;
text-align: center;
color: #FFF;
border-radius: 1px;
margin: 40px -4.5px 0px 0;
position: relative;
overflow: hidden;
border: 0px solid #FFF;
background: darkcyan;
font-size: 12px;
outline:none;
border-radius: 5px 5px 5px 5px;
}
.top1 {
width: 360px;
height: 45px;
color: white;
border: 0px ;
background: darkcyan;
font-size: 25px;
left: -40px; position: relative;
top: px;
}
</style>
</head>
<body>
<button class='top1'>Test System</button></a><br />
<center style='left: -20px; position: relative;'>
<a href='./m?x1=1'><button type='button' class='button '><div class='m x-deng2' style='font-size:40px; color: "+a+";' ></div>客 厅</button></a>
<a href='./m?x1=2'><button type='button' class='button '><div class='m x-deng' style='font-size:40px; color: "+b+";'></div>餐 厅</button></a>
</br>
<a href='./m?x1=3'><button type='button' class='button '><div class='m x-chuanglian' style='font-size:40px; color: "+c+";' ></div>窗 帘</button></a>
<a href='./m?x1=4'><button type='button' class='button '><div class='m x-kongtiao' style='font-size:40px;' ></div>Re-start</button></a>
</br>
</center>
</body>
</html>
三、C語言部分
在Arduino中添加以下#include <ESP8266WebServer.h>
#include <ArduinoOTA.h>.H庫文件，安裝Arduino及安裝庫文件這裏不再說明。
打開Arduino IDE，文件->首選項->在“附加開發板管理器網址”輸入http://arduino.esp8266.com/stable/package_esp8266com_index.json
注意，如果已經輸入過別的網址，多個網址之間以逗號間隔。
如果在下一步中無法下載，可嘗試修改爲
http://wechat.doit.am/package_esp8266com_index.json
重啓IDE，打開 工具->開發板->開發板管理器
稍等一會兒，然後拉到最下面，安裝 esp8266 by ESP8266 Community
複製以下代碼在Arduino中，修改WIFI名和密碼。將第二部中壓縮的html 代碼粘貼到String html = " HTML代碼 ";
示例中"+a+" 讀取GPIO2的狀態，String a = (digitalRead(2)) ? "deepskyblue" : "white";，反饋不同的顏色，這裏可以根據不同的情況反饋不同的狀態。
if (server.arg("x1")=="1"){
if (digitalRead(2) == 0) {digitalWrite(2, 1); htmlcode();}
else {digitalWrite(2, 0); htmlcode();}
}
void m()部分：html給出指令, 2號端口相應的反饋高低電平 digitalWrite(2, LOW)和digitalWrite(2, HIGH) 實現開和關。
void setup(void)部分：//定義端口號16，4，5，2，14，12，13，15，0
pinMode(2, OUTPUT); 可以根據實際進行相應的添加。
#include <ESP8266WebServer.h>
#include <ArduinoOTA.h>
const char* ssid = "MEI"; // WIFI名和密碼
const char* password = "13641663122";
ESP8266WebServer server(80);
void m(){ //-- ("/m", HTTP_GET, m);----"x1")=="1" 房間號==設備號 http:ip/m?x1=1
String ip = WiFi.localIP().toString().c_str();
if (server.arg("x1")=="1"){
if (digitalRead(2) == 0) {digitalWrite(2, 1); htmlcode();}
else {digitalWrite(2, 0); htmlcode();}
}
if (server.arg("x1")=="2"){
if (digitalRead(4) == 0) {digitalWrite(4, 1); htmlcode();}
else {digitalWrite(4, 0); htmlcode();}
}
if (server.arg("x1")=="3"){
if (digitalRead(5) == 0) {digitalWrite(5, 1); htmlcode();}
else {digitalWrite(5, 0); htmlcode();}
}
if (server.arg("x1")=="4"){ htmlcode(); delay(1000);ESP.restart();}
else { htmlcode();} // not found htmllink
}
void htmlcode(){
String a = (digitalRead(2)) ? "deepskyblue" : "white";
String b = (digitalRead(4)) ? "deepskyblue" : "white";
String c = (digitalRead(5)) ? "deepskyblue" : "white";
String html = "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes' /><meta http-equiv='X-UA-Compatible' content='ie=edge'><title>MeiShang Smarthome Control System</title><link rel='stylesheet' href='http://at.alicdn.com/t/font_1640699_nk29qyrqhco.css'><style> h2,h1{line-height:1%;}body { width: 360px; margin: 0;padding: 0; background: LightCyan;}.button { width: 130px; height: 70px; text-align: center; color: #FFF; border-radius: 1px; margin: 40px -4.5px 0px 0; position: relative; overflow: hidden; border: 0px solid #FFF; background: darkcyan; font-size: 12px; outline:none; border-radius: 5px 5px 5px 5px;}.top1 { width: 360px; height: 45px; color: white; border: 0px ; background: darkcyan; font-size: 25px; left: -40px; position: relative; top: px;}</style></head><body><button class='top1'>Test System</button></a><br /><center style='left: -20px; position: relative;'> <a href='./m?x1=1'><button type='button' class='button '><div class='m x-deng2' style='font-size:40px; color: "+a+";' ></div>客 厅</button></a> <a href='./m?x1=2'><button type='button' class='button '><div class='m x-deng' style='font-size:40px; color: "+b+";'></div>餐 厅</button></a></br> <a href='./m?x1=3'><button type='button' class='button '><div class='m x-chuanglian' style='font-size:40px; color: "+c+";' ></div>窗 帘</button></a> <a href='./m?x1=4'><button type='button' class='button '><div class='m x-kongtiao' style='font-size:40px;' ></div>Re-start</button></a></br> </center></body></html>";
server.send(200, "text/html", html );}
void setup(void){ //-定義端口號16，4，5，2，14，12，13，15，0 一，Esp8266繼電器常開，接NO, HIGH； 常閉，接NC, LOW;
pinMode(2, OUTPUT); digitalWrite(2, 0);
pinMode(4, OUTPUT); digitalWrite(4, 0);
pinMode(5, OUTPUT); digitalWrite(5, 0);
Serial.begin(115200); WiFi.mode(WIFI_STA); WiFi.begin(ssid, password);
ArduinoOTA.begin();
Serial.println(); // ------------------------------------------以下是串口監視器顯示內容。
while (WiFi.status() != WL_CONNECTED) {delay(500); Serial.print("..");}
Serial.printf("\nConnecting to %s\nIP Address : %s\n", ssid, WiFi.localIP().toString().c_str());
server.on("/", htmlcode); server.on("/m", HTTP_GET, m); server.begin();}
void loop(void){server.handleClient(); ArduinoOTA.handle();}
四、Arduino燒寫
準備好Arduino，打開串口監視器，選擇正確的開發板，upload speed，端口號
準備Esp8266模塊，連接usb，gpio0 接GND，沒接或沒接好可能會報錯。error: espcomm_open failed
驗證，上傳。大概一到兩分鐘。左下角會顯示“上傳成功”.串口監視器會打印出 IP Address : 192.168.x.x
OTA更新，在第一次upload 後，端口號會增加一個192.168.x.x端口號，選擇這個端口號。就可以實現OTA無線更新，不需要連接電腦，esp模塊只需要5V，或3.3V供電即可。
五、 使用
手機或電腦打開 IP地址，如圖所示
每個按鈕實現一個功能。參考 void m()部分：修改相應的端口，定製各種模式。其他的，單個控制，或多組控制。
