编辑使用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/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类型和内容(比如以网页形式返回)
网页写的比较简陋,实现效果如图
更多推荐
使用ESP32-CAM开发板制作一个简单的聊天服务器
发布评论