Question

下午好！

我的项目背后的想法是将手工制作的日志发送到网页，这样我就不必完全依赖于串行监视器。

我要将字符串从ESP32发送到由同一ESP32托管的网页。为此，我使用的是ESPAsyncWebServer库，让我们在HTML内部使用placeholders。然后，ESP使用：

String processor(const String& var)

和

server.on("/logs", HTTP_GET, [](AsyncWebServerRequest* request){ request->send(SPIFFS, "/events.html", "text/html", false, processor); });

用我想要的任何数据替换它找到的占位符。

我正在使用循环缓冲区，以免最终不使用所有内存。

我用谷歌搜索了如何刷新html中的div，并且在我看到的每个地方都出现了.load('file.php')。我的项目没有任何.php文件。

问题是，我要加载什么而不是该php文件？

无法加载相同的.html页面。

events.html

<!DOCTYPE html>
<html>    
<head>
    <meta charset = "utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel = "stylesheet" type = "text/css" href = "master.css">   
    <title>Events Log</title>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script>
$(document).ready( function(){
$('#big-box').load('events.html');
refresh();
});

function refresh()
{
    setTimeout( function() {
      $('#big-box').fadeOut('slow').load('events.html').fadeIn('slow');
      refresh();
    }, 2000);
}
</script>
</head>


<body>
    <div id="big-box">
        <div class="textbox">%PLACEHOLDER_1%</div>
        <div class="textbox">%PLACEHOLDER_2%</div>
        <div class="textbox">%PLACEHOLDER_3%</div>
        <div class="textbox">%PLACEHOLDER_4%</div>
        <div class="textbox">%PLACEHOLDER_5%</div>
    </div>

</body>

main.cpp

#include <Arduino.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
#include <cstdio>
#include <memory>
#include <mutex>

void logOutput(String string);


//---------- Circular Buffer
template <class T>
class circular_buffer {
public:
    explicit circular_buffer(size_t size) :
        buf_(std::unique_ptr<T[]>(new T[size])),
        max_size_(size)
    {

    }

    void put(T item){
        std::lock_guard<std::mutex> lock(mutex_);

        buf_[head_] = item;

        if(full_){
            tail_ = (tail_ + 1) % max_size_;
        }
        head_ = (head_ + 1) % max_size_;
        full_ = head_ == tail_;
    }

    T get() {
        std::lock_guard<std::mutex> lock(mutex_);

        if(empty()) {
            return T();
        }
        //Read data and advance the tail (we now have a free space)
        auto val = buf_[tail_];
        full_ = false;
        tail_ = (tail_ + 1) % max_size_;

        return val;
    }

    T get2() {
        std::lock_guard<std::mutex> lock(mutex_);
        if(empty()) {
            return T();
        }
        auto val = buf_[tail_];
        return val;
    }

    void reset() {
        std::lock_guard<std::mutex> lock(mutex_);
        head_ = tail_;
        full_ = false;
    }

    bool empty() const {
        //if head and tail are equal, we are empty
        return (!full_ && (head_ == tail_));
    }

    bool full() const   {
        //If tail is ahead the head by 1, we are full
        return full_;
    }

    size_t capacity() const {
        return max_size_;
    }

    size_t size() const {
        size_t size = max_size_;

        if(!full_)  {
            if(head_ >= tail_)  {
                size = head_ - tail_;
            } else {
                size = max_size_ + head_ - tail_;
            }
        }
        return size;
    }

private:
    std::mutex mutex_;
    std::unique_ptr<T[]> buf_;
    size_t head_ = 0;
    size_t tail_ = 0;
    const size_t max_size_;
    bool full_ = 0;
}; //---------- Circular Buffer

circular_buffer<String> circle(20);

void logOutput(String string) {
    delay(2000);
    circle.put(string);
    Serial.println(string); 
}

AsyncWebServer server(80);

const char* ssid = "metrici.ro";
const char* password = "cocoscocos";

String processor(const String& var) { 
           if(var == "PLACEHOLDER_1"){
        return circle.get();
    } else if(var == "PLACEHOLDER_2") {
        return circle.get();
    } else if(var == "PLACEHOLDER_3") {
        return circle.get();
    } else if(var == "PLACEHOLDER_4") {
        return circle.get();
    } else if(var == "PLACEHOLDER_5") {
        return circle.get();
    }
    return String();
}

void setup() {
    Serial.begin(115200);
    delay(2000);

    if(!SPIFFS.begin(true)) {
        logOutput("ERROR ! SPIFFS file system was not mounted. Reformatting !");
    }

    WiFi.begin(ssid, password);
    delay(1000);
    int k = 0;
    while(WiFi.status() != WL_CONNECTED && k<20) {
        delay(1000);
        k++;
        logOutput("Connecting to WiFi");
    }
    if(WiFi.status() == WL_CONNECTED) {
        logOutput((String)"Connected to: " + ssid + " with IP: " + WiFi.localIP().toString());
    } else {
        logOutput("Couldn't connect to WiFi ! Restarting in 5 seconds");
        delay(5000);
        ESP.restart();
    }

    server.on("/logs", HTTP_GET, [](AsyncWebServerRequest* request){
        request->send(SPIFFS, "/events.html", "text/html", false, processor);
    });
    server.on("/master.css", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/master.css", "text/css");
    }); 
    server.on("/back-image.jpg", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/back-image.jpg", "image/jpeg");
    });
    server.on("/logo.png", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/logo.png", "image/png");
    });

    server.begin();
    delay(5000);

    logOutput("After server.begin()");
    for(int i = 1; i<=10;i++){
        logOutput((String)"Linia " + i);
    }
}

void loop() {
    logOutput("Beginning the loop()");
    logOutput("\n");
    delay(10000);
}

Answer 1

TL; DR ESP服务器不提供原始HTML引用的/jquery-1.9.0.min.js和/events.html文件。继续阅读以获取详细信息。

执行$('#big-box').load('events.html')代码时，浏览器会在后台{ESP1}处向ESP服务器发出HTTP GET调用。该路径上的请求似乎未在ESP端处理。要处理该路径上的请求，您需要以下内容：

/event.html

此外，您需要创建具有以下内容（基本上是server.on('/event.html`, [](AsyncWebServerRequest *request) { request->send(SPIFFS, "/events-log.html", "text/html", false, processor); })`. div包含的所有内容）的events-log.html文件：

big-box

还请注意，由于相同的原因，不会加载您包含在HTML文件中（使用脚本标签）的<div class="textbox">%PLACEHOLDER_1%</div> <div class="textbox">%PLACEHOLDER_2%</div> <div class="textbox">%PLACEHOLDER_3%</div> <div class="textbox">%PLACEHOLDER_4%</div> <div class="textbox">%PLACEHOLDER_5%</div>文件。浏览器将尝试向jquery-1.9.0.min.js发送HTTP GET请求，由于未处理该路径上的请求，因此浏览器将收到404错误。

如果您正在访问此页面的计算机具有互联网访问权限，则可以通过将脚本标签更改为以下代码段来从CDN加载jQuery。如果机器无法访问互联网，则需要下载jQuery文件，将其保存到SPIFFS，并以与其他文件相同的方式提供该文件。

/jquery-1.9.0.min.js

在没有任何PHP的HTML中刷新div？

问题是，我要加载什么而不是该php文件？

events.html

main.cpp

1 个答案: