时间戳

首页 > 解决方案 > 如何使用支持多个文件的 arduino 创建 Web 服务器？

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

问题描述

我想知道如何为 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>标签从 sd 卡上的某个位置加载内容。

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

标签： c++serverarduinoesp8266

解决方案

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

服务器所要做的就是GET用正确的文件响应每个 ot，所有单独的文件都必须存在于 Arduino 的内存中，或者像 SD 卡这样的外部存储上。

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

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

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

PS。const char*我在 Github 上放了一个如何提供自包含网页的示例，该网页经过 gzip 和 Base64 编码，然后作为变量放入 Arduino 代码中。实际 gzip 压缩的 Base64 编码网页在这里，webserver 部分代码在这里，将 gzip 压缩的 Base64 编码网页发送到浏览器的功能在这里。

推荐阅读