如何使用支持多个文件的 arduino 创建 Web 服务器？

Question

我想知道如何为 arduino 创建一个 http 服务器，但是我遇到的问题是我不明白如何在其上服务器静态 html 文件。我看过的所有教程都直接通过这样的代码加载了 html：

/*
  Web Server

 A simple web server that shows the value of the analog input pins.
 using an Arduino Wiznet Ethernet shield.

 Circuit:
 * Ethernet shield attached to pins 10, 11, 12, 13
 * Analog inputs attached to pins A0 through A5 (optional)

 created 18 Dec 2009
 by David A. Mellis
 modified 9 Apr 2012
 by Tom Igoe
 modified 02 Sept 2015
 by Arturo Guadalupi
 
 */

#include <SPI.h>
#include <Ethernet.h>

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
};
IPAddress ip(192, 168, 1, 177);

// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);

void setup() {
  // You can use Ethernet.init(pin) to configure the CS pin
  //Ethernet.init(10);  // Most Arduino shields
  //Ethernet.init(5);   // MKR ETH shield
  //Ethernet.init(0);   // Teensy 2.0
  //Ethernet.init(20);  // Teensy++ 2.0
  //Ethernet.init(15);  // ESP8266 with Adafruit Featherwing Ethernet
  //Ethernet.init(33);  // ESP32 with Adafruit Featherwing Ethernet

  // Open serial communications and wait for port to open:
  Serial.begin(9600);
  while (!Serial) {
    ; // wait for serial port to connect. Needed for native USB port only
  }
  Serial.println("Ethernet WebServer Example");

  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);

  // Check for Ethernet hardware present
  if (Ethernet.hardwareStatus() == EthernetNoHardware) {
    Serial.println("Ethernet shield was not found.  Sorry, can't run without hardware. :(");
    while (true) {
      delay(1); // do nothing, no point running without Ethernet hardware
    }
  }
  if (Ethernet.linkStatus() == LinkOFF) {
    Serial.println("Ethernet cable is not connected.");
  }

  // start the server
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}


void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");  // the connection will be closed after completion of the response
          client.println("Refresh: 5");  // refresh the page automatically every 5 sec
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          // output the value of each analog input pin
          for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
            int sensorReading = analogRead(analogChannel);
            client.print("analog input ");
            client.print(analogChannel);
            client.print(" is ");
            client.print(sensorReading);
            client.println("<br />");
          }
          client.println("</html>");
          break;
        }
        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        } else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
    Serial.println("client disconnected");
  }
}

该代码导致了一个问题，您无法在不存储在另一台服务器上的情况下旁加载图像。事实上，我希望我可以从像 sd 卡这样的存储介质加载多个文件，我可以在其中使用 <script src="app.js></script> 标签从 sdcard 上的某个位置加载内容。

我难以接受的解决方案之一是使用 SD card arduino 库。但是，这给我带来了一个问题，因为我不确定我是否可以从网页上的 html 文件加载位于 sdcard 中的样式表、脚本和其他资源（<img src="logo.jpg alt="logo />。我很难通过位于 sdcard 中的文件加载网页来实现。

Answer 1

抱歉，我没有任何具体的答案给你。但是看看 here 或网络上的其他示例程序应该会有所帮助。

虽然我认为我会选择 Raspberry Pi 作为嵌入式网络服务器，因为它有操作系统。

Answer 2

要从网络服务器提供文件，您必须查看 HTTP 请求 headers 以查看请求的文件。

您应该已经能够在串行监视器中看到那些 headers，因为您正在使用：

    char c = client.read();
    Serial.write(c);

GET 请求的第一行如下所示：

GET /test.html HTTP/1.1

或者只是：

GET / HTTP/1.1

你通常 return index.html.

所以在这里您可以 return test.html 的内容（例如来自内存或 SD 卡）。

如果您的 test.html 文件包含对其他文件的引用（例如 logo.jpg），浏览器将自动为 logo.jpg 发送新的 GET 请求（随后是其他 header 字段）：

GET /logo.jpg HTTP/1.1

您还必须调整 Content-Type 响应 header 字段：

Content-Type: image/jpeg

文件（或数据）的长度应包含在响应 headers 中，例如：

Content-Length: 520

或者可以使用 chunked transfer encoding（主要用于预先不知道总大小的动态内容）。

Answer 3

您可以使用awot 库。它基本上是 arduino 的 express js，这意味着您可以轻松地执行 restful api。在 awot 的网站上，他们有关于如何在 awot 网站上的 arduino 上部署 React 应用程序的教程。

这是awot的link：https://awot.net/

Answer 4

您不必在服务器端（Arduino）决定发送哪些文件；网络浏览器本身将为每个图像、脚本、样式表等发送 GET。它在 HTML 页面中遇到并希望拥有。

服务器所要做的就是用正确的文件响应每个 GETs，所有单独的文件都必须存在于 Arduino 的内存中，或者存储在 SD 卡等外部存储中.

您可以采取的一种捷径是制作独立的网页，将所有图像、脚本和样式表包含在一个文件中，就像我所做的那样 here。做起来很痛苦，但是它简化了网络服务器代码，因为只有一个文件可以服务，如果你使用的Arduino内存足够大，它的内容可以放在代码中的一个变量中。

如果您不关心自己编写网络服务器，您可以使用网络服务器库，并将您需要的文件放在 SD 卡上。库中实现的网络服务器将响应浏览器发送的每个 GET 正确的文件，仅此而已。

如果这不能回答您的问题，请告诉我，我将进行编辑或扩展。

PS。我举了一个例子，说明如何提供一个独立的网页，该网页经过 gzip 压缩和 Base64 编码，然后作为 const char* 变量放入 Arduino 代码，在 Github 上。实际的 gzip 压缩、Base64 编码的网页是 here, the webserver part of the code is here, the function to send a gzipped, Base64-encoded web page to the browser is here.

如何使用支持多个文件的 arduino 创建 Web 服务器？

How can I make a web server with arduino that support multiple file?

c++

arduino

server

esp8266