使用ESP32-CAM开发板制作一个简单的聊天服务器

最新推荐文章于 2024-05-23 09:55:02 发布

FrankZJZ_ME

最新推荐文章于 2024-05-23 09:55:02 发布

阅读量748

点赞数 1

文章标签：嵌入式物联网 webserver arduino 单片机

本文链接：https://blog.csdn.net/weixin_42618732/article/details/119567152

版权

编辑使用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类型和内容（比如以网页形式返回）

网页写的比较简陋，实现效果如图

FrankZJZ_ME

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用ESP32-CAM开发板制作一个简单的聊天服务器

项目中用到的库为https://github.com/me-no-dev/ESPAsyncWebServerhttps://github.com/me-no-dev/AsyncTCP下载.zip后使用Arduino IDE的导入库功能导入，即可使用其中主要是"ESPAsyncWebServer"这个库，这个库的创建者在github页面上写了详尽的注释具体见github页面#include <WiFi.h>#include <ESPAsyncWebServer.h&
复制链接

扫一扫