设为首页收藏本站
首页 > 论坛 > 行空板

[M10项目]ESP32-C5——断网可用的简单群聊

weyhao | 学徒 | 创造力： | 帖子： | 发消息 | 串个门 | 加好友 | 打招呼
2025-9-23 13:54:11 [显示全部楼层]
5浏览
0回复
0收藏
查看: 5|回复: 0

[M10项目] ESP32-C5——断网可用的简单群聊

[复制链接]
在某些特殊的场合之下，比如没有网络的大兴安岭，克拉玛利，比如不允许上网的某些研究所，比如在飞机上。那么我们能否连接热点，上网做一款线上简易群聊呢
基于Firebeete试用的ESP32-C5开发板以及其强大的wifi功能，我们基于其作为一个简单的服务器，提供热点连接，然后可以访问群留言聊天功能。
ESP32-C5——断网可用的简单群聊图2
废话不说，结果展示如下
ESP32-C5——断网可用的简单群聊图1
首先需要访问Esp32的热点，然后输入密码12345678，就可以使用啦，默认30秒更新一次，因为esp32能力有限，需要快速更新可以点击更新，多人使用也是可以的，这样可以聊起天来，哈哈哈哈哈，相当于一个简单群聊


手机端也可以使用，代码展示如下：
  1. // 针对ESP32-C5优化的包含部分

  2. #include <WiFi.h>

  3. #include <WebServer.h>

  4. #include <SPIFFS.h>

  5. // 使用ArduinoJson 6.x并进行内存优化

  6. #include <ArduinoJson.h>

  7. 

  8. /* WiFi设置 */

  9. const char* ssid     = "ESP32-MessageBoard";

  10. const char* password = "12345678";

  11. 

  12. /* IP地址设置 */

  13. IPAddress local_ip(192,168,1,1);

  14. IPAddress gateway(192,168,1,1);

  15. IPAddress subnet(255,255,255,0);

  16. 

  17. // 创建Web服务器实例，使用标准HTTP端口80以便于浏览器访问

  18. WebServer msgServer(80);

  19. 

  20. // 最多存储的留言数量 - 为ESP32-C5内存限制而减少

  21. #define MAX_MESSAGES 30

  22. 

  23. // 留言结构体 - 优化字符串存储

  24. struct Message {

  25.   char author[32];  // 使用固定大小缓冲区替代String

  26.   char content[256];

  27.   char timestamp[16];

  28. };

  29. 

  30. // 留言数组

  31. Message messages[MAX_MESSAGES];

  32. int messageCount = 0;

  33. 

  34. // 函数声明

  35. void loadMessages();

  36. void saveMessages();

  37. String sendMessageBoardHTML();

  38. 

  39. void setup() {

  40.   Serial.begin(115200);

  41.   

  42.   // 初始化SPIFFS，针对ESP32-C5进行错误处理

  43.   if(!SPIFFS.begin(true)){

  44.     Serial.println("SPIFFS挂载失败");

  45.     // 尝试替代初始化方法

  46.     if(!SPIFFS.begin(false)) {

  47.       Serial.println("SPIFFS挂载再次失败，继续执行但功能可能受限");

  48.     }

  49.   }

  50.   

  51.   // 从文件加载留言

  52.   loadMessages();

  53.   

  54.   // 设置WiFi接入点

  55.   WiFi.softAP(ssid, password);

  56.   WiFi.softAPConfig(local_ip, gateway, subnet);

  57.   delay(100);

  58.   

  59.   // 设置Web服务器路由

  60.   msgServer.on("/", HTTP_GET, handleRoot);

  61.   msgServer.on("/messages", HTTP_GET, handleGetMessages);

  62.   msgServer.on("/post", HTTP_POST, handlePostMessage);

  63.   msgServer.onNotFound(handleNotFound);

  64.   

  65.   // 启动服务器

  66.   msgServer.begin();

  67.   Serial.println("留言板HTTP服务器已启动在端口80");

  68.   Serial.print("IP地址: ");

  69.   Serial.println(WiFi.softAPIP());

  70. }

  71. 

  72. void loop() {

  73.   msgServer.handleClient();

  74. }

  75. 

  76. // 处理根路径请求

  77. void handleRoot() {

  78.   Serial.println("客户端已连接到留言板");

  79.   msgServer.send(200, "text/html", sendMessageBoardHTML());

  80. }

  81. 

  82. void handleNotFound() {

  83.   msgServer.send(404, "text/plain", "找不到页面");

  84. }

  85. 

  86. // 为ESP32-C5内存限制而减小JSON文档大小

  87. void handleGetMessages() {

  88.   // 使用StaticJsonDocument以获得更好的内存管理

  89.   StaticJsonDocument<3072> doc;

  90.   JsonArray array = doc.to<JsonArray>();

  91.   

  92.   for (int i = 0; i < messageCount; i++) {

  93.     JsonObject obj = array.createNestedObject();

  94.     obj["author"] = messages[i].author;

  95.     obj["content"] = messages[i].content;

  96.     obj["timestamp"] = messages[i].timestamp;

  97.   }

  98.   

  99.   String response;

  100.   serializeJson(doc, response);

  101.   msgServer.send(200, "application/json", response);

  102. }

  103. 

  104. void handlePostMessage() {

  105.   if (msgServer.hasArg("plain")) {

  106.     String message = msgServer.arg("plain");

  107.     StaticJsonDocument<512> doc;

  108.     DeserializationError error = deserializeJson(doc, message);

  109.     

  110.     if (!error) {

  111.       const char* author = doc["author"];

  112.       const char* content = doc["content"];

  113.       

  114.       // 获取当前时间（由于ESP32没有实时时钟，这里使用运行时间）

  115.       unsigned long currentMillis = millis();

  116.       int seconds = currentMillis / 1000;

  117.       int minutes = seconds / 60;

  118.       int hours = minutes / 60;

  119.       

  120.       minutes = minutes % 60;

  121.       seconds = seconds % 60;

  122.       

  123.       char timestamp[16];

  124.       sprintf(timestamp, "%02d:%02d:%02d", hours, minutes, seconds);

  125.       

  126.       // 添加新留言 - 使用strncpy处理固定缓冲区

  127.       if (messageCount < MAX_MESSAGES) {

  128.         strncpy(messages[messageCount].author, author, sizeof(messages[messageCount].author) - 1);

  129.         messages[messageCount].author[sizeof(messages[messageCount].author) - 1] = '\0';

  130.         

  131.         strncpy(messages[messageCount].content, content, sizeof(messages[messageCount].content) - 1);

  132.         messages[messageCount].content[sizeof(messages[messageCount].content) - 1] = '\0';

  133.         

  134.         strncpy(messages[messageCount].timestamp, timestamp, sizeof(messages[messageCount].timestamp) - 1);

  135.         messages[messageCount].timestamp[sizeof(messages[messageCount].timestamp) - 1] = '\0';

  136.         

  137.         messageCount++;

  138.       } else {

  139.         // 如果留言已满，移除最旧的留言

  140.         for (int i = 0; i < MAX_MESSAGES - 1; i++) {

  141.           memcpy(&messages[i], &messages[i + 1], sizeof(Message));

  142.         }

  143.         

  144.         strncpy(messages[MAX_MESSAGES - 1].author, author, sizeof(messages[MAX_MESSAGES - 1].author) - 1);

  145.         messages[MAX_MESSAGES - 1].author[sizeof(messages[MAX_MESSAGES - 1].author) - 1] = '\0';

  146.         

  147.         strncpy(messages[MAX_MESSAGES - 1].content, content, sizeof(messages[MAX_MESSAGES - 1].content) - 1);

  148.         messages[MAX_MESSAGES - 1].content[sizeof(messages[MAX_MESSAGES - 1].content) - 1] = '\0';

  149.         

  150.         strncpy(messages[MAX_MESSAGES - 1].timestamp, timestamp, sizeof(messages[MAX_MESSAGES - 1].timestamp) - 1);

  151.         messages[MAX_MESSAGES - 1].timestamp[sizeof(messages[MAX_MESSAGES - 1].timestamp) - 1] = '\0';

  152.       }

  153.       

  154.       // 保存留言到文件

  155.       saveMessages();

  156.       

  157.       msgServer.send(200, "application/json", "{"status":"success"}");

  158.     } else {

  159.       msgServer.send(400, "application/json", "{"status":"error","message":"无效的JSON格式"}");

  160.     }

  161.   } else {

  162.     msgServer.send(400, "application/json", "{"status":"error","message":"没有提供数据"}");

  163.   }

  164. }

  165. 

  166. // 保存留言到SPIFFS文件系统 - 针对ESP32-C5优化

  167. void saveMessages() {

  168.   File file = SPIFFS.open("/messages.json", FILE_WRITE);

  169.   if (!file) {

  170.     Serial.println("无法打开文件进行写入");

  171.     return;

  172.   }

  173.   

  174.   // 使用更小的JSON文档

  175.   StaticJsonDocument<3072> doc;

  176.   JsonArray array = doc.to<JsonArray>();

  177.   

  178.   // 分批处理

  179.   const int batchSize = 5;

  180.   int totalBatches = (messageCount + batchSize - 1) / batchSize;

  181.   

  182.   file.print("[");

  183.   

  184.   for (int batch = 0; batch < totalBatches; batch++) {

  185.     int startIdx = batch * batchSize;

  186.     int endIdx = min(startIdx + batchSize, messageCount);

  187.     

  188.     for (int i = startIdx; i < endIdx; i++) {

  189.       JsonObject obj = array.createNestedObject();

  190.       obj["author"] = messages[i].author;

  191.       obj["content"] = messages[i].content;

  192.       obj["timestamp"] = messages[i].timestamp;

  193.       

  194.       String jsonStr;

  195.       serializeJson(obj, jsonStr);

  196.       file.print(jsonStr);

  197.       

  198.       if (i < messageCount - 1) {

  199.         file.print(",");

  200.       }

  201.       

  202.       // 清除对象以便下次使用

  203.       array.clear();

  204.     }

  205.     

  206.     // 给ESP32一些时间处理

  207.     yield();

  208.   }

  209.   

  210.   file.print("]");

  211.   file.close();

  212.   Serial.println("留言保存完成");

  213. }

  214. 

  215. // 从SPIFFS文件系统加载留言 - 针对ESP32-C5优化

  216. void loadMessages() {

  217.   if (!SPIFFS.exists("/messages.json")) {

  218.     Serial.println("留言文件不存在，将创建新文件");

  219.     return;

  220.   }

  221.   

  222.   File file = SPIFFS.open("/messages.json", FILE_READ);

  223.   if (!file) {

  224.     Serial.println("无法打开文件进行读取");

  225.     return;

  226.   }

  227.   

  228.   // 流式解析以减少内存使用

  229.   messageCount = 0;

  230.   

  231.   // 检查文件是否为空或不是有效的JSON

  232.   if (file.size() < 2) {

  233.     file.close();

  234.     return;

  235.   }

  236.   

  237.   // 使用JsonStreamingParser处理大文件

  238.   DynamicJsonDocument doc(512);

  239.   DeserializationError error;

  240.   

  241.   // 读取开始括号

  242.   char c = file.read();

  243.   if (c != '[') {

  244.     Serial.println("文件格式错误");

  245.     file.close();

  246.     return;

  247.   }

  248.   

  249.   // 读取每个留言对象

  250.   while (file.available() && messageCount < MAX_MESSAGES) {

  251.     // 查找对象的开始

  252.     while (file.available() && file.peek() != '{') {

  253.       file.read();

  254.     }

  255.     

  256.     if (!file.available()) break;

  257.     

  258.     // 读取对象

  259.     String jsonStr = "";

  260.     int braceCount = 0;

  261.     bool inString = false;

  262.     char prevChar = 0;

  263.     

  264.     do {

  265.       c = file.read();

  266.       jsonStr += c;

  267.       

  268.       if (c == '"' && prevChar != '\\') {

  269.         inString = !inString;

  270.       }

  271.       

  272.       if (!inString) {

  273.         if (c == '{') braceCount++;

  274.         if (c == '}') braceCount--;

  275.       }

  276.       

  277.       prevChar = c;

  278.     } while (file.available() && (braceCount > 0 || c != '}'));

  279.     

  280.     // 解析对象

  281.     error = deserializeJson(doc, jsonStr);

  282.     

  283.     if (!error) {

  284.       const char* author = doc["author"];

  285.       const char* content = doc["content"];

  286.       const char* timestamp = doc["timestamp"];

  287.       

  288.       if (author && content && timestamp) {

  289.         strncpy(messages[messageCount].author, author, sizeof(messages[messageCount].author) - 1);

  290.         messages[messageCount].author[sizeof(messages[messageCount].author) - 1] = '\0';

  291.         

  292.         strncpy(messages[messageCount].content, content, sizeof(messages[messageCount].content) - 1);

  293.         messages[messageCount].content[sizeof(messages[messageCount].content) - 1] = '\0';

  294.         

  295.         strncpy(messages[messageCount].timestamp, timestamp, sizeof(messages[messageCount].timestamp) - 1);

  296.         messages[messageCount].timestamp[sizeof(messages[messageCount].timestamp) - 1] = '\0';

  297.         

  298.         messageCount++;

  299.       }

  300.     }

  301.     

  302.     // 清除以便下一个对象

  303.     doc.clear();

  304.     

  305.     // 给ESP32一些时间处理

  306.     yield();

  307.   }

  308.   

  309.   file.close();

  310.   Serial.println("留言加载完成，共 " + String(messageCount) + " 条");

  311. }

  312. 

  313. // 生成留言板HTML页面

  314. String sendMessageBoardHTML() {

  315.   String ptr = "<!DOCTYPE html>\n";

  316.   ptr += "<html lang='zh'>\n";

  317.   ptr += "<head>\n";

  318.   ptr += "  <meta charset='UTF-8'>\n";

  319.   ptr += "  <meta name='viewport' content='width=device-width, initial-scale=1.0'>\n";

  320.   ptr += "  <title>ESP32在线群聊</title>\n";

  321.   ptr += "  <style>\n";

  322.   ptr += "    body {\n";

  323.   ptr += "      font-family: Arial, sans-serif;\n";

  324.   ptr += "      max-width: 800px;\n";

  325.   ptr += "      margin: 0 auto;\n";

  326.   ptr += "      padding: 20px;\n";

  327.   ptr += "      background-color: #f5f5f5;\n";

  328.   ptr += "    }\n";

  329.   ptr += "    h1 {\n";

  330.   ptr += "      color: #333;\n";

  331.   ptr += "      text-align: center;\n";

  332.   ptr += "      margin-bottom: 30px;\n";

  333.   ptr += "    }\n";

  334.   ptr += "    .message-form {\n";

  335.   ptr += "      background-color: white;\n";

  336.   ptr += "      padding: 20px;\n";

  337.   ptr += "      border-radius: 8px;\n";

  338.   ptr += "      box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n";

  339.   ptr += "      margin-bottom: 30px;\n";

  340.   ptr += "    }\n";

  341.   ptr += "    .form-group {\n";

  342.   ptr += "      margin-bottom: 15px;\n";

  343.   ptr += "    }\n";

  344.   ptr += "    label {\n";

  345.   ptr += "      display: block;\n";

  346.   ptr += "      margin-bottom: 5px;\n";

  347.   ptr += "      font-weight: bold;\n";

  348.   ptr += "    }\n";

  349.   ptr += "    input, textarea {\n";

  350.   ptr += "      width: 100%;\n";

  351.   ptr += "      padding: 10px;\n";

  352.   ptr += "      border: 1px solid #ddd;\n";

  353.   ptr += "      border-radius: 4px;\n";

  354.   ptr += "      box-sizing: border-box;\n";

  355.   ptr += "    }\n";

  356.   ptr += "    textarea {\n";

  357.   ptr += "      height: 100px;\n";

  358.   ptr += "      resize: vertical;\n";

  359.   ptr += "    }\n";

  360.   ptr += "    button {\n";

  361.   ptr += "      background-color: #4CAF50;\n";

  362.   ptr += "      color: white;\n";

  363.   ptr += "      border: none;\n";

  364.   ptr += "      padding: 10px 15px;\n";

  365.   ptr += "      border-radius: 4px;\n";

  366.   ptr += "      cursor: pointer;\n";

  367.   ptr += "      font-size: 16px;\n";

  368.   ptr += "    }\n";

  369.   ptr += "    button:hover {\n";

  370.   ptr += "      background-color: #45a049;\n";

  371.   ptr += "    }\n";

  372.   ptr += "    .message-list {\n";

  373.   ptr += "      background-color: white;\n";

  374.   ptr += "      border-radius: 8px;\n";

  375.   ptr += "      box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n";

  376.   ptr += "      overflow: hidden;\n";

  377.   ptr += "    }\n";

  378.   ptr += "    .message-item {\n";

  379.   ptr += "      padding: 15px 20px;\n";

  380.   ptr += "      border-bottom: 1px solid #eee;\n";

  381.   ptr += "    }\n";

  382.   ptr += "    .message-item:last-child {\n";

  383.   ptr += "      border-bottom: none;\n";

  384.   ptr += "    }\n";

  385.   ptr += "    .message-header {\n";

  386.   ptr += "      display: flex;\n";

  387.   ptr += "      justify-content: space-between;\n";

  388.   ptr += "      margin-bottom: 10px;\n";

  389.   ptr += "      font-size: 14px;\n";

  390.   ptr += "      color: #666;\n";

  391.   ptr += "    }\n";

  392.   ptr += "    .message-author {\n";

  393.   ptr += "      font-weight: bold;\n";

  394.   ptr += "      color: #333;\n";

  395.   ptr += "    }\n";

  396.   ptr += "    .message-time {\n";

  397.   ptr += "      color: #999;\n";

  398.   ptr += "    }\n";

  399.   ptr += "    .message-content {\n";

  400.   ptr += "      line-height: 1.5;\n";

  401.   ptr += "    }\n";

  402.   ptr += "    .refresh-btn {\n";

  403.   ptr += "      background-color: #2196F3;\n";

  404.   ptr += "      margin-bottom: 15px;\n";

  405.   ptr += "    }\n";

  406.   ptr += "    .refresh-btn:hover {\n";

  407.   ptr += "      background-color: #0b7dda;\n";

  408.   ptr += "    }\n";

  409.   ptr += "    .status {\n";

  410.   ptr += "      text-align: center;\n";

  411.   ptr += "      padding: 10px;\n";

  412.   ptr += "      margin-top: 10px;\n";

  413.   ptr += "      border-radius: 4px;\n";

  414.   ptr += "      display: none;\n";

  415.   ptr += "    }\n";

  416.   ptr += "    .status.success {\n";

  417.   ptr += "      background-color: #dff0d8;\n";

  418.   ptr += "      color: #3c763d;\n";

  419.   ptr += "    }\n";

  420.   ptr += "    .status.error {\n";

  421.   ptr += "      background-color: #f2dede;\n";

  422.   ptr += "      color: #a94442;\n";

  423.   ptr += "    }\n";

  424.   ptr += "    @media (max-width: 600px) {\n";

  425.   ptr += "      body {\n";

  426.   ptr += "        padding: 10px;\n";

  427.   ptr += "      }\n";

  428.   ptr += "      .message-form, .message-list {\n";

  429.   ptr += "        border-radius: 0;\n";

  430.   ptr += "      }\n";

  431.   ptr += "    }\n";

  432.   ptr += "  </style>\n";

  433.   ptr += "</head>\n";

  434.   ptr += "<body>\n";

  435.   ptr += "  <h1>ESP32在线群聊</h1>\n";

  436.   

  437.   ptr += "  <div class='message-form'>\n";

  438.   ptr += "    <div class='form-group'>\n";

  439.   ptr += "      <label for='author'>您的名字:</label>\n";

  440.   ptr += "      <input type='text' id='author' name='author' required>\n";

  441.   ptr += "    </div>\n";

  442.   ptr += "    <div class='form-group'>\n";

  443.   ptr += "      <label for='content'>群聊内容:</label>\n";

  444.   ptr += "      <textarea id='content' name='content' required></textarea>\n";

  445.   ptr += "    </div>\n";

  446.   ptr += "    <button type='button' id='submit-btn'>发布</button>\n";

  447.   ptr += "    <div id='status' class='status'></div>\n";

  448.   ptr += "  </div>\n";

  449.   

  450.   ptr += "  <button type='button' id='refresh-btn' class='refresh-btn'>刷新</button>\n";

  451.   

  452.   ptr += "  <div id='message-list' class='message-list'>\n";

  453.   ptr += "    <div class='message-item' style='text-align:center;color:#999;'>加载中...</div>\n";

  454.   ptr += "  </div>\n";

  455.   

  456.   ptr += "  <script>\n";

  457.   ptr += "    // DOM元素\n";

  458.   ptr += "    const authorInput = document.getElementById('author');\n";

  459.   ptr += "    const contentInput = document.getElementById('content');\n";

  460.   ptr += "    const submitBtn = document.getElementById('submit-btn');\n";

  461.   ptr += "    const refreshBtn = document.getElementById('refresh-btn');\n";

  462.   ptr += "    const messageList = document.getElementById('message-list');\n";

  463.   ptr += "    const statusDiv = document.getElementById('status');\n";

  464.   

  465.   ptr += "    // 保存用户名到本地存储\n";

  466.   ptr += "    if (localStorage.getItem('author')) {\n";

  467.   ptr += "      authorInput.value = localStorage.getItem('author');\n";

  468.   ptr += "    }\n";

  469.   

  470.   ptr += "    // 加载留言\n";

  471.   ptr += "    function loadMessages() {\n";

  472.   ptr += "      fetch('/messages')\n";

  473.   ptr += "        .then(response => response.json())\n";

  474.   ptr += "        .then(data => {\n";

  475.   ptr += "          messageList.innerHTML = '';\n";

  476.   ptr += "          \n";

  477.   ptr += "          if (data.length === 0) {\n";

  478.   ptr += "            messageList.innerHTML = '<div class="message-item" style="text-align:center;color:#999;">暂无留言</div>';\n";

  479.   ptr += "            return;\n";

  480.   ptr += "          }\n";

  481.   ptr += "          \n";

  482.   ptr += "          // 按时间倒序排列留言\n";

  483.   ptr += "          data.reverse().forEach(message => {\n";

  484.   ptr += "            const messageItem = document.createElement('div');\n";

  485.   ptr += "            messageItem.className = 'message-item';\n";

  486.   ptr += "            \n";

  487.   ptr += "            const messageHeader = document.createElement('div');\n";

  488.   ptr += "            messageHeader.className = 'message-header';\n";

  489.   ptr += "            \n";

  490.   ptr += "            const messageAuthor = document.createElement('span');\n";

  491.   ptr += "            messageAuthor.className = 'message-author';\n";

  492.   ptr += "            messageAuthor.textContent = message.author;\n";

  493.   ptr += "            \n";

  494.   ptr += "            const messageTime = document.createElement('span');\n";

  495.   ptr += "            messageTime.className = 'message-time';\n";

  496.   ptr += "            messageTime.textContent = message.timestamp;\n";

  497.   ptr += "            \n";

  498.   ptr += "            messageHeader.appendChild(messageAuthor);\n";

  499.   ptr += "            messageHeader.appendChild(messageTime);\n";

  500.   ptr += "            \n";

  501.   ptr += "            const messageContent = document.createElement('div');\n";

  502.   ptr += "            messageContent.className = 'message-content';\n";

  503.   ptr += "            messageContent.textContent = message.content;\n";

  504.   ptr += "            \n";

  505.   ptr += "            messageItem.appendChild(messageHeader);\n";

  506.   ptr += "            messageItem.appendChild(messageContent);\n";

  507.   ptr += "            \n";

  508.   ptr += "            messageList.appendChild(messageItem);\n";

  509.   ptr += "          });\n";

  510.   ptr += "        })\n";

  511.   ptr += "        .catch(error => {\n";

  512.   ptr += "          console.error('获取留言失败:', error);\n";

  513.   ptr += "          messageList.innerHTML = '<div class="message-item" style="text-align:center;color:#999;">获取留言失败</div>';\n";

  514.   ptr += "        });\n";

  515.   ptr += "    }\n";

  516.   

  517.   ptr += "    // 提交新留言\n";

  518.   ptr += "    function submitMessage() {\n";

  519.   ptr += "      const author = authorInput.value.trim();\n";

  520.   ptr += "      const content = contentInput.value.trim();\n";

  521.   ptr += "      \n";

  522.   ptr += "      if (!author) {\n";

  523.   ptr += "        showStatus('请输入您的名字', 'error');\n";

  524.   ptr += "        return;\n";

  525.   ptr += "      }\n";

  526.   ptr += "      \n";

  527.   ptr += "      if (!content) {\n";

  528.   ptr += "        showStatus('请输入消息内容', 'error');\n";

  529.   ptr += "        return;\n";

  530.   ptr += "      }\n";

  531.   ptr += "      \n";

  532.   ptr += "      // 保存用户名到本地存储\n";

  533.   ptr += "      localStorage.setItem('author', author);\n";

  534.   ptr += "      \n";

  535.   ptr += "      // 禁用提交按钮\n";

  536.   ptr += "      submitBtn.disabled = true;\n";

  537.   ptr += "      \n";

  538.   ptr += "      fetch('/post', {\n";

  539.   ptr += "        method: 'POST',\n";

  540.   ptr += "        headers: {\n";

  541.   ptr += "          'Content-Type': 'application/json',\n";

  542.   ptr += "        },\n";

  543.   ptr += "        body: JSON.stringify({ author, content })\n";

  544.   ptr += "      })\n";

  545.   ptr += "      .then(response => response.json())\n";

  546.   ptr += "      .then(data => {\n";

  547.   ptr += "        if (data.status === 'success') {\n";

  548.   ptr += "          showStatus('留言发布成功!', 'success');\n";

  549.   ptr += "          contentInput.value = '';\n";

  550.   ptr += "          loadMessages();\n";

  551.   ptr += "        } else {\n";

  552.   ptr += "          showStatus('留言发布失败: ' + (data.message || '未知错误'), 'error');\n";

  553.   ptr += "        }\n";

  554.   ptr += "      })\n";

  555.   ptr += "      .catch(error => {\n";

  556.   ptr += "        console.error('提交留言失败:', error);\n";

  557.   ptr += "        showStatus('提交留言失败，请稍后再试', 'error');\n";

  558.   ptr += "      })\n";

  559.   ptr += "      .finally(() => {\n";

  560.   ptr += "        submitBtn.disabled = false;\n";

  561.   ptr += "      });\n";

  562.   ptr += "    }\n";

  563.   

  564.   ptr += "    // 显示状态消息\n";

  565.   ptr += "    function showStatus(message, type) {\n";

  566.   ptr += "      statusDiv.textContent = message;\n";

  567.   ptr += "      statusDiv.className = 'status ' + type;\n";

  568.   ptr += "      statusDiv.style.display = 'block';\n";

  569.   ptr += "      \n";

  570.   ptr += "      setTimeout(() => {\n";

  571.   ptr += "        statusDiv.style.display = 'none';\n";

  572.   ptr += "      }, 3000);\n";

  573.   ptr += "    }\n";

  574.   

  575.   ptr += "    // 事件***\n";

  576.   ptr += "    submitBtn.addEventListener('click', submitMessage);\n";

  577.   ptr += "    refreshBtn.addEventListener('click', loadMessages);\n";

  578.   ptr += "    \n";

  579.   ptr += "    // 回车键提交\n";

  580.   ptr += "    contentInput.addEventListener('keypress', function(e) {\n";

  581.   ptr += "      if (e.key === 'Enter' && !e.shiftKey) {\n";

  582.   ptr += "        e.preventDefault();\n";

  583.   ptr += "        submitMessage();\n";

  584.   ptr += "      }\n";

  585.   ptr += "    });\n";

  586.   

  587.   ptr += "    // 初始加载留言\n";

  588.   ptr += "    loadMessages();\n";

  589.   

  590.   ptr += "    // 定时刷新留言（每30秒）\n";

  591.   ptr += "    setInterval(loadMessages, 30000);\n";

  592.   ptr += "  </script>\n";

  593.   ptr += "</body>\n";

  594.   ptr += "</html>\n";

  595.   

  596.   return ptr;

  597. }
复制代码
具体的arduino的配置可以看我的上一篇内容


回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
撰写新帖
关于楼主

楼主的其它帖子

background 创造力兑换 background 心愿单 background 创客导航
上海智位机器人股份有限公司 沪ICP备09038501号-4 备案 沪公网安备31011502402448

© 2013-2025 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail