ESP8266 服务 HTML+js

Question

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

“未找到：dygraph.min.js。”

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

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

以前有人经历过类似的事情吗？完整代码可以在这里找到： https: //github.com/JohnnyMoonlight/esp8266-AccessPoint-Logger-OfflineVisualization

我期待您的意见！

谢谢，最好的！

Answer 1

仔细阅读您的代码，想象一下将对您的 Web 服务器发出的请求。

您的代码是为了处理两个 URL 的请求而编写的：/和/temp.csv- 就是这样。

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

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

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会提供逗号分隔值文件。我看到你在存储库中有一个，并且有代码可以向其中添加数据；你只是不服务它。现在你就有了那个服务index.html。一旦你开始成功加载 JavaScript，你就会遇到问题。

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

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

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

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

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

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

祝你好运！