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

通读您的代码，想象一下将对您的 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 服务器代码，在您让其余代码正常工作之前我不会担心这个：您的代码正在写入SPIFFS 大约每 5 秒一次。 SPIFFS 存储在 ESP8266 的闪存中。 ESP8266 板使用便宜的闪存，不会持续很长时间 - 它在大约 10,000 到 100,000 次写入周期后就会磨损（这有点复杂；它被分解成 "pages" 并且页面中的各个单元磨损，但你必须同时写下整个页面）。

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

你可能不会运行因为你正在追加到一个文件 - 你仍然会多次重写相同的闪存块，但不会重写 10,000 次 - 除非你经常删除 CSV 文件并重新开始。所以这对你来说可能是一个长期问题，也可能不是。

您可以在 https://design.goeszen.com/mitigating-flash-wear-on-the-esp8266-or-any-other-microcontroller-with-flash.html

阅读有关这些问题的更多信息

祝你好运！

ESP8266 服务 HTML+js

ESP8266 serving HTML+js

html

javascript

nodemcu

esp8266