javascript - ESP8266 服务于 HTML+js

Question

我尝试在 esp8266 接入点上托管一个 HTML 文件。我可以正确显示 .html 文件。不幸的是，当访问 html 页面时，我的浏览器无法显示 javascript 内容。奇怪的是，当我在我的机器上本地工作时 - 它工作得很好。当我访问 esp8266 上的页面时，我收到错误

"Not found: dygraph.min.js."

很明显，浏览器没有找到javascript源。我想知道为什么。我尝试了几种命名和引用方式，但直到现在我并不幸运。

我使用 ESP8266 草图数据上传工具将文件上传到 SPIFFS。在 html 文件中，我将 js 引用为 <script type="text/javascript" src="dygraph.min.js"></script> .

有没有人遇到过这样的事情？整个代码可以在这里找到: https://github.com/JohnnyMoonlight/esp8266-AccessPoint-Logger-OfflineVisualisation

我期待着您的意见!

谢谢，最好!

Answer 1

通读您的代码，并想象将对您的网络服务器发出的请求。

您编写的代码是为了处理对两个 URL 的请求:/ 和 /temp.csv - 仅此而已。

当访问 /temp.csv 时，您将提供 index.html 的内容。当浏览器解释该文件时，它将尝试从您的 ESP 加载 /dygraph.min.js。您没有该文件的处理程序。所以加载失败。

您需要为其添加一个处理程序，然后提供该文件。所以你需要添加一行:

server.on("/dygraph.min.js", handleJS);

并定义函数 void handleJS() 来执行 handleFile() 的操作。

您需要为 /dygraph.css 做同样的事情；你也没有它的处理程序。

我会这样做:

void handleHTML() {
  handleFile("index.html");
}

void handleJS() {
  handleFile("dygraph.min.js");
}

void handleCSS() {
  handleFile("dygraph.css");
}

void handleFile(char *filename) {
  File f = SPIFFS.open(filename, "r");
  // the rest of your handleFile() code here
}

在你的setup()中:

  server.on("/", handleRoot);
  server.on("/temp.csv", handleHTML);
  server.on("/dygraph.css", handleCSS);
  server.on("/dygraph.min.js", handleJS);

分别:

您的文件映射的 URL 搞砸了。我上面分享的代码与你现在拥有的是一致的，但通常你会希望 / 为 index.html 提供服务；你让它提供一段 HTML。

通常 /temp.csv 会提供逗号分隔值文件。我看到你有一个，在 repo 协议(protocol)中，你有向它添加数据的代码；你只是不服务它。现在你有服务 index.html。一旦开始成功加载 Javascript，就会遇到问题。

您需要解决这些问题才能正常工作。

此外，在 loop() 中，您应该将 server.handleClient(); 移动到循环中的第一件事。按照您编写的方式，您只是检查是否有网络请求是否需要再读取一次温度读数。您应该始终检查是否有 Web 请求，否则您会不必要地减慢 Web 服务。

最后一件事，与网络服务器代码完全分开，在您让其余代码正常工作之前我不会担心这个:您的代码大约每 5 秒写入一次 SPIFFS . SPIFFS 存储在 ESP8266 的闪存中。 ESP8266 板使用不会持续很长时间的廉价闪存 - 它在大约 10,000 到 100,000 次写入周期后就会磨损(这有点复杂；它被分成“页面”并且页面中的各个单元会磨损，但你必须同时写入整个页面)。

很难确定它的生命周期是多少；这取决于所涉及的特定 ESP8266 板和闪存芯片。 10,000 次写入周期意味着电路板上的闪存可能会在 50,000 秒后开始出现故障 - 100,0000 次写入周期会给你大约 500,000 次写入 - 如果你继续写入同一个位置。这取决于闪存中同一位置被写入的频率。如果这对您来说是个问题，您可能希望增加写入之间的延迟或对数据执行其他操作。

您可能不会遇到这种情况，因为您正在附加到一个文件 - 您仍然会多次重写相同的闪存 block ，但不会重写 10,000 次 - 除非您经常删除 CSV 文件并重新开始。因此，从长远来看，这对您来说可能是个问题，也可能不是。

您可以在 https://design.goeszen.com/mitigating-flash-wear-on-the-esp8266-or-any-other-microcontroller-with-flash.html 阅读有关这些问题的更多信息

祝你好运!