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-OfflineVisualisation

我期待着您的投入！

谢谢，最好！

Answer 1

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

编写代码是为了处理两个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将提供以逗号分隔的值文件。 我看到你有一个，在回购中你有代码来添加数据; 你只是没有服务它。 现在你有服务index.html 。 一旦你开始成功加载Javascript，你就会遇到问题。

你需要对它们进行排序以使其正常工作。

另外，在loop()你应该移动server.handleClient(); 成为循环中的第一件事。 你写它的方式你只是检查是否有网页请求，如果它是时候采取另一个温度读数。 您应该始终检查是否有Web请求，否则您将不必要地减慢Web服务的速度。

最后一件事 ，完全独立于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上阅读有关这些问题的更多信息。

祝好运！