編輯使用Arduino IDE，較為簡單
專案中用到的庫為
ESPAsyncWebServer（Github）
AsyncTCP（Github）
下載.zip后使用Arduino IDE的匯入庫功能匯入，即可使用
編譯的相關選項（略過將Arduino配置為ESP32 IDE的環節）
其中主要是"ESPAsyncWebServer"這個庫，這個庫的創建者在github頁面上寫了詳盡的注釋
具體見github頁面
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
// SSID & Password
const char* ssid = "****"; // Enter your SSID here
const char* password = "********"; //Enter your Password here
String chatHist[10];
int cursorPos = 0;
String HTML1 = "\
<!DOCTYPE html>\
<html>\
<head>\
<style>\
h1{\
text-align: center;\
font-size: 30;\
color: rgba(167, 53, 0, 0.767);\
\
}\
dev{\
text-align: center;\
font-size: 25;\
}\
</style>\
</head>\
<script src = 'https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>\
<script>\
function sendAndRefresh()\
{\
textToSend = document.getElementById('input').value;\
var myName = document.getElementById('name').value;\
if(myName == \"\")\
{\
alert(\"Please enter your name before chatting!\");\
return 0;\
}\
document.getElementById('name').disabled = true;\
textToSend = myName + \": \" + textToSend;\
console.log(textToSend);\
$.ajax(\
{\
type: 'POST',\
url: 'sendMes',\
data: textToSend, \
success: function(datas)\
{\
console.log(datas);\
data = JSON.parse(datas);\
chatHist = data['text'];\
form = document.getElementById('table');\
while(form.rows.length != 0)\
{\
form.deleteRow(0);\
}\
if(data['length'] != 0)\
{\
for(var i = 0;i<data['length'];++i)\
{\
rowTemp = document.createElement('tr');\
colTemp = document.createElement('td');\
colTemp.innerHTML = chatHist[i];\
rowTemp.appendChild(colTemp);\
form.appendChild(rowTemp);\
}\
}\
}\
}\
)\
}\
function refreshText()\
{\
var textToSend = \"Refresh\";\
$.ajax(\
{\
type: 'POST',\
url: 'refreshMes',\
data: textToSend, \
success: function(datas)\
{\
data = JSON.parse(datas);\
chatHist = data['text'];\
form = document.getElementById(\"table\");\
while(form.rows.length != 0)\
{\
form.deleteRow(0);\
}\
if(data['length'] != 0)\
{\
for(var i = 0;i<data['length'];++i)\
{\
rowTemp = document.createElement('tr');\
colTemp = document.createElement('td');\
colTemp.innerHTML = chatHist[i];\
rowTemp.appendChild(colTemp);\
form.appendChild(rowTemp);\
}\
}\
}\
}\
)\
}\
setInterval(function(){refreshText();},1000);\
</script>\
<body>\
<h1>Hello World From ESP32!</h1>\
<input placeholder = 'type in your name' id = 'name'></input>\
<input placeholder='type something to send to ESP32 server' id = 'input'></input><button onclick = 'sendAndRefresh()'>send</button>\
<table id = 'table' style='font-size: 20;color:rgb(0, 70, 140)'></table>\
<dev>\
";
String HTML2 = "</dev>\
</body>\
</html>";
String HTML404 = "\
<!DOCTYPE html>\
<html>\
<head>\
<style>\
h1{\
text-align: center;\
font-size: 30;\
color: rgba(0, 150, 187, 0.767);\
}\
</style>\
</head>\
<body>\
<h1>404 Not Found!</h1>\
</body>\
</html>";
AsyncWebServer server(8080); // Object of WebServer(HTTP port, 80 is defult)
void setup() {
Serial.begin(115200);
Serial.println("Try Connecting to ");
Serial.println(ssid);
// Connect to your wi-fi modem
WiFi.begin(ssid, password);
// Check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected successfully");
Serial.print("Got IP: ");
Serial.println(WiFi.localIP()); //Show ESP32 IP on serial
server.on("/", handle_root);
server.on("/sendMes", handle_send);
server.on("/refreshMes",handle_refresh);
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
delay(100);
}
void loop() {
}
void handle_root(AsyncWebServerRequest * request)
{
request -> send(200, "text/html", HTML1 + HTML2);
}
void handle_send(AsyncWebServerRequest * request)
{
String message;
if(request->params())message = request->getParam(0)->value().c_str();
if(message!="")
{
//最多存盤10條訊息
//Serial.print(message);
//delay(1);
if(cursorPos < 10)
{
chatHist[cursorPos] = message;
cursorPos++;
}
else
{
for (int i = 0;i<9;i++)
{
chatHist[i] = chatHist[i+1];
}
chatHist[9] = message;
cursorPos = 10;
}
}
String mesBack = (String)("{") + "\"" + "length" + "\"" + ": ";
mesBack = mesBack + cursorPos;
mesBack = mesBack + ", " + "\"" + "text" + "\"" + ": [";
if(cursorPos != 0)
{
for(int i = 0;i<cursorPos;i++)
{
mesBack = mesBack + "\"" + chatHist[i] + "\"" + ", ";
}
mesBack = mesBack.substring(0, mesBack.length() - 2);
}
mesBack = mesBack + "]}";
//Serial.print(mesBack);
//delay(1);
request->send(200, "text/plain", mesBack);
}
void handle_refresh(AsyncWebServerRequest * request)
{
String mesBack = (String)("{") + "\"" + "length" + "\"" + ": ";
mesBack = mesBack + cursorPos;
mesBack = mesBack + ", " + "\"" + "text" + "\"" + ": [";
if(cursorPos != 0)
{
for(int i = 0;i<cursorPos;i++)
{
mesBack = mesBack + "\"" + chatHist[i] + "\"" + ", ";
}
mesBack = mesBack.substring(0, mesBack.length() - 2);
}
mesBack = mesBack + "]}";
//Serial.print(mesBack);
//delay(1);
request->send(200, "text/plain", mesBack);
}
void handleNotFound(AsyncWebServerRequest * request)
{
request->send(404, "text/html", HTML404);
}幾個注意事項
1、在手動拼接JSON字串的時候記得鍵的引號使用雙引號，不能使用單引號否則parse的時候報錯
2、JSON串假如值包含陣列（串列）的話，不要有多余的逗號，多余的逗號（假如是String的末兩位的話使用以下代碼去掉）
mesBack = mesBack.substring(0, mesBack.length() - 2);其中的mesBack是String型別
3、在C++中插入長文本（比如上傳到ESP32上的網頁）的時候換行使用" \"
4、假如在String 串中需要出現雙引號的話，使用 \" 代替 " 插入字串
5、拼接String串之前可以先用一個String型別的物件做開頭，使得后面拼接上的字串自動轉換為正確的型別
比如
String mesBack = (String)("{") + "\"" + "length" + "\"" + ": ";服務器代碼中的
server.on("/", handle_root);
server.on("/sendMes", handle_send);
server.on("/refreshMes",handle_refresh);分別針對不同的route
server.onNotFound(handleNotFound);則針對未注冊的route的情況（比如404），同樣可以自行指定回傳的response型別和內容（比如以網頁形式回傳）
網頁寫的比較簡陋，實作效果如圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/293250.html
標籤：其他
上一篇：恩易物聯智慧消防監測系統解決方案