先看效果
typecho的markdown用不了html標簽，只能放個直鏈了
視頻直鏈
那時
很早以前就想玩這種東西了，那時候還沒有5G，現在……我來了！
入門最快的方法
要問怎樣入門最快？直接找好兄弟！
我：
然后我就得到了：需要什么（硬件）、用什么（軟件）……
再然后：給鏈接！
基本入門，達成。
硬件、環境
硬件：
- ESP32開發板一塊 cp2102
- 數據線一根，能傳輸數據的。
- 其他硬件還沒到，需要什么得看想做什么
軟件：
- VSCode
- VSCode插件：PlatformIO IDE
PlatformIO IDE安裝好后新建項目，Board選擇DOIT ESP32 DEVKIT V1,然后Aruino的庫就自動安裝好了
（原本我用的AruinoIDE，各種錯誤各種坑，得虧好兄弟了）
ESP32程序編寫
platformio.ini 加一個配置項 monitor_speed = 115200
開發是使用的C++
引入頭文件：
#include <Arduino.h>
#include <WebServer.h>
#include <WiFi.h>
連接WiFi我就不描述了。
再創建一個WebServer對象：
WebServer server(80);
注冊uri，並啟動Web服務器：
//客戶端訪問回調函數
void indexHandler()
{
server.send(200, "text/html", "index");
}
//客戶端訪問回調函數
void testHandler(){
server.send(200, "text/html", "test seccess");
Serial.print("test Controller | Time:");
Serial.println(millis());
}
//注冊URI
server.on("/", indexHandler);
server.on("/test", testHandler);
//啟動WebServer
server.begin();
loop函數中處理請求：
server.handleClient();
ESP32 完整代碼
#include <Arduino.h>
#include <WebServer.h>
#include <WiFi.h>
// #include <string>
const char *ssid = "wifi";
const char *password = "wifi";
WebServer server(80);
String indexHtml = String("") + "<!DOCTYPE html>" +
"<html>" +
" <head>" +
" <meta charset=\"utf-8\">" +
" <title>ESP32 WebController</title>" +
" </head>" +
" <body>" +
" <h1>Web Controller</h1>" +
" <button onclick=\"test()\" type=\"button\" style=\"height: 100px;width: 200px;background-color: #1aa6f67d;border: 0px;\">Test</button>" +
" </body>" +
" <script type=\"text/javascript\">" +
" function test() {" +
" var ajax = new XMLHttpRequest();" +
" ajax.open(\'get\', \'/test\');" +
" ajax.send();" +
" ajax.onreadystatechange = function() {" +
" if (ajax.readyState == 4 && ajax.status == 200) {" +
" console.log(ajax.responseText);" +
" }" +
" }" +
" }" +
" </script>" +
"</html>";
void indexHandler()
{
server.send(200, "text/html", indexHtml);
}
void testHandler()
{
server.send(200, "text/html", "test seccess");
Serial.print("test Controller | Time:");
Serial.println(millis());
}
void setup()
{
// put your setup code here, to run once:
Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
delay(2000);
Serial.println(WiFi.status());
Serial.println("Connecting to WiFi..");
}
Serial.println(WiFi.status());
Serial.println("Connected.");
Serial.println(WiFi.localIP().toString());
server.on("/", indexHandler);
server.on("/test", testHandler);
server.begin();
}
void loop()
{
// put your main code here, to run repeatedly:
server.handleClient();
}
Web頁面
主要就是使用了個原生Ajax向esp32程序注冊的URI發出請求，再由esp32程序的請求回調函數進行處理
完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ESP32 WebController</title>
</head>
<body>
<h1>Web Controller</h1>
<button onclick="test()" type="button" style="height: 100px;width: 200px;background-color: #1aa6f67d;border: 0px;">Test</button>
</body>
<script type="text/javascript">
function test() {
var ajax = new XMLHttpRequest();
ajax.open('get', '/test');
ajax.send();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
console.log(ajax.responseText);
}
}
}
</script>
</html>
萬丈高樓平地起
這是第一步，可以說是很簡單了，但這又是最重要的一環。
之后可以使用websocket與雲服務器+控制端+esp終端進行實時互聯，當然也可以用其他的，總之就是：起飛