ESP8266 отправляет веб-страницу клиенту, но html-коды отображаются в браузере вместо веб-страницы

Я использую ESP8266 с Arduino MEGA. ESP8266 питается 3,3 В через делитель напряжения, который берет 5 В от Arduino и преобразует его в 3,3 В с помощью резисторов 5K и 10K. AT-команды работают нормально. Я использую SD_card reader и храню свой файл index.html на SD_card. Я могу установить успешное соединение, и esp также отправляет весь файл index.html, но проблема в том, что мой браузер не показывает страницу в формате html, вместо этого в браузере появляется весь html-код. Может ли кто-нибудь помочь мне разобраться с этой проблемой? Вот весь код;

    #include <SPI.h>
    #include <SD.h>

     #define SSID "Maxcotec"   // измените это, чтобы оно соответствовало вашему SSID WiFi
     #define PASS "qamar0334" // измените это, чтобы оно соответствовало вашему паролю WiFi
     #define PORT "80"      // по умолчанию используется порт 80
    #define DEBUG true
     #define BUFFER_SIZE 1024 
     char buffer[BUFFER_SIZE];  
    //SoftwareSerial Serial2(2,3); // делаем линию RX Arduino пином 2, делаем линию TX Arduino пином 3.
                                 // Это означает, что вам нужно подключить линию TX от esp к контакту 2 Arduino
                                 // и линия RX от esp до контакта 3 Arduino
    File webFile, CSS_file;
    String webpage;
     // По умолчанию ищем OK\r\n
     char OKrn[] = "OK\r\n";  
     byte wait_for_esp_response(int timeout, char* term=OKrn) {  
      unsigned long t=millis();  
      bool found=false;  
      int i=0;  
      int len=strlen(term);  
      // ждем не более тайм-аута в миллисекундах
      // или если найдено OK\r\n
      while(millis()<t+timeout) {  
       if(Serial2.available()) {  
        buffer[i++]=Serial2.read();  
        if(i>=len) {  
         if(strncmp(buffer+i-len, term, len)==0) {  
          found=true;  
          break;  
         }  
        }  
       }  
      }  
      buffer[i]=0;  
      Serial.print(buffer);  
      return found;  
     }  

    void setup()
    {
      Serial.begin(9600);
      Serial2.begin(115200); // скорость передачи данных вашего esp может отличаться

       setupWiFi();  
      // печать IP-адреса устройства
      Serial.print("device ip addr:");  
      //esp.println("AT+CIFSR");


      //sendData("AT+RST\r\n",2000,DEBUG); // сброс модуля
      //sendData("AT+CWMODE=2\r\n",1000,DEBUG); // настроить как точку доступа
      sendData("AT+CIFSR\r",1000,DEBUG); // получаем ip адрес
      sendData("AT+CIPMUX=1\r",1000,DEBUG); // настроить для нескольких подключений
      sendData("AT+CIPSERVER=1,80\r",1000,DEBUG); // включаем сервер на порт 80

        // инициализируем SD-карту
        Serial.println("Initializing SD card...");
        if (!SD.begin(53)) {
            Serial.println("ERROR - SD card initialization failed!");
            return;    // инициализация не удалась
        }
        Serial.println("SUCCESS - SD card initialized.");
        // проверить наличие файла index.htm
        if (!SD.exists("index.htm")) {
            Serial.println("ERROR - Can't find index.htm file!");
            return;  // не удается найти индексный файл
        }
        Serial.println("SUCCESS - Found index.htm file."); 


             // отправляем веб-страницу
        webFile = SD.open("index.htm");        // открыть файл веб-страницы
        if (webFile) {
            while(webFile.available()> 0) {
                //client.write(webFile.read()); // отправляем веб-страницу клиенту
               char ch = webFile.read(); // Чтение символа
               webpage += ch; // Добавляем
            }
            webFile.close();
        }
         Serial.print("file contents>>>");
         //Serial.println(веб-страница);
         // задержка (20000);
    }

    void loop()
    {
      if(Serial2.available()) // проверяем, отправляет ли esp сообщение
      {
        /*
        while(Serial2.available())
        {
          // У esp есть данные, поэтому вывод их в последовательное окно
          char c = Serial2.read(); // прочитать следующий символ.
          Serial.write(c);
        } */

        if(Serial2.find("+IPD,"))
        {
         delay(1000);

         int connectionId = Serial2.read()-48; // вычесть 48, потому что функция read() возвращает значение
                                               // десятичное значение ASCII и 0 (первое десятичное число) начинаются с 48

         //String webpage = "<h1>Hello</h1><h2>World!</h2><button id=\"11\">Переключить контакт 11</button>";//< ;кнопка>светодиод 1</кнопка>";


         //Serial.print("Содержимое файла>>>");
         //Serial.println(веб-страница);
         // задержка (20000);
         String cipSend = "AT+CIPSEND=";
         cipSend += connectionId;
         cipSend += ",";
         cipSend +=webpage.length();
         cipSend +="\r\n";

         sendData(cipSend,1000,DEBUG);
         sendData(webpage,1000,DEBUG);

         //webpage="<кнопка>LED2</button>";

    // cipSend = "AT+CIPSEND=";
    // cipSend += connectionId;
    // cipSend += ",";
    // cipSend +=webpage.length();
    // cipSend +="\r\n";
    //
    // sendData(cipSend,1000,DEBUG);
    // sendData(веб-страница,1000,DEBUG);

         String closeCommand = "AT+CIPCLOSE="; 
         closeCommand+=connectionId; // добавить идентификатор соединения
         closeCommand+="\r\n";

         sendData(closeCommand,3000,DEBUG);
        }
      }
    }

    void setupWiFi() {  
      // пробуем пустую AT-команду
      Serial2.println("AT");  
      wait_for_esp_response(2000);  
      // установить режим 1 (клиент)
      Serial2.println("AT+CWMODE=1");  
      wait_for_esp_response(2000);   
      // сброс WiFi модуля
     /*  
      esp.print("AT+RST\r\n");  
      wait_for_esp_response(3000);  
      delay(5000);  
      */  
      // присоединиться к точке доступа
      Serial2.print("AT+CWJAP=\"");  
      Serial2.print("xxxxxxx");  
      Serial2.print("\",\"");  
      Serial2.print("xxxxxxx");  
      Serial2.println("\"");  
      // это может занять некоторое время, поэтому подождите 5 секунд
      wait_for_esp_response(5000);  
      Serial2.println("AT+CIPSTO=30");   
      wait_for_esp_response(1000);  
      // запускаем сервер
      Serial2.println("AT+CIPMUX=1");  
      wait_for_esp_response(1000);  
      Serial2.print("AT+CIPSERVER=1,"); // включаем службу TCP
      Serial2.println(PORT);  
      wait_for_esp_response(1000);  
     }  

    String sendData(String command, const int timeout, boolean debug)
    {
        String response = "";

        Serial2.print(command); // отправляем прочитанный символ в Serial2

        long int time = millis();

        while( (time+timeout) > millis())
        {
          while(Serial2.available())
          {

            // У esp есть данные, поэтому вывод их в последовательное окно
            char c = Serial2.read(); // прочитать следующий символ.
            response+=c;
          }  
        }

        if(debug)
        {
          Serial.print(response);
        }

        return response;
    }

И это то, что я получаю в веб-браузере;Opera browser

Я использую браузер Opera, но я также пробовал в Chrome и Firefox. когда я открываю эту страницу index.html на своем ноутбуке в том же браузере, она открывается отлично.

, 👍-2

Обсуждение

Вы сказали браузеру, что отправляете ему HTML?, @Ignacio Vazquez-Abrams

Похоже, вам не хватает всей части заголовка для меня..., @Majenko

Я следую [ссылке](http://allaboutee.com/2014/12/30/esp8266-and-arduino-webserver/) этому руководству. Похоже, он также не отправляет часть заголовка., @Anum Sheraz

@AnumSheraz попробуйте использовать инструменты разработчика, чтобы получить заголовки. Для этого, например, в Chrome нажмите F12, перейдите на вкладку сети, загрузите страницу и посмотрите, какие файлы извлекаются. Найдите файл index.html, щелкните его правой кнопкой мыши и нажмите «Копировать заголовки ответа»; затем разместите их в своем вопросе: таким образом мы сможем увидеть, чего не хватает, @frarugi87

Кроме того, пожалуйста, приобретите подходящий стабилизатор на 3,3 В., @3871968

Вам нужно отправить заголовок Content-Type: text/html перед html., @Gerben

Я пытаюсь использовать программу, и теперь я добился хороших результатов. Теперь я пытаюсь отправить текстовый файл клиенту, который подключается к веб-серверу. Когда клиент отправляет запрос на: IP\data.txt, он должен напрямую получить текстовый файл для загрузки. У тебя есть какой-нибудь совет для меня? Спасибо, Риккардо., @Riccardo

Почему вы используете 5 В, а не 3 В от Arduino? Использование разделителя не является хорошей идеей. Ваше напряжение не будет оставаться постоянным, и вы ограничиваете ток с помощью деления напряжения., @Jose Enrique Calderon


4 ответа


Лучший ответ:

4

Похоже, вы не отправили заголовки HTTP. Перед отправкой любого содержимого HTML отправьте следующие строки:

"HTTP/1.1 200 OK\r\n"
"Content-Type: text/html\r\n\r\n"

Убедитесь, что вы отправили все \r\n !

,

2

Посмотрите текст от "HTTP/1.1 200 OK" до "DOCTYPE html" в следующих двух ссылках, которые говорят об одном и том же, и вы можете прочитать остальные страницы:

  • https://www.arduino.cc/en/Tutorial/WebServer
  • http://www.allaboutcircuits.com/projects/using-an -arduino-как-веб-сервер
,

это вопрос HTML, а не вопрос Arduino. Что он здесь делает? Отправка html с esp8266 ничем не отличается от отправки с любого другого устройства., @JayEye

Прежде чем задать вопрос, я не знал, что это может быть проблема с html, я думал, что это может быть проблема с напряжением (так как у многих людей есть эта проблема с esp8266)., @Anum Sheraz


2

Немного не по теме, так как это не является источником вашей проблемы, но, как говорит jBot42, вам нужен правильный регулятор. Когда вы используете делитель напряжения, ваша нагрузка (ESP8266) подключается параллельно одному из резисторов (10K) и эффективно изменяет выходное напряжение регулятора. По мере изменения энергопотребления в ESP8266 (например, когда схема Wi-Fi передает данные), напряжение также будет меняться.

По крайней мере, вы должны поставить электролитический конденсатор параллельно резистору 10K, но даже это не очень хорошее решение.

,

-1

Убедитесь, что вы сохранили файл SD-карты как index.htm.

Это то, к чему вы призываете в своем коде. В вашем описании есть ссылка на index.html. Вы получите тот результат, который видите.

,

Хотя вы правы в том, что существует несоответствие между исходным кодом, вызывающим файл .htm, и OP, говорящим, что файл на SD-карте является файлом .html, это, скорее всего, опечатка в вопрос со стороны ОП. Arduino явно правильно обращается к файлу. Так что, к сожалению, это не решит проблему, с которой сталкивается ОП. Правильный ответ уже был предоставлен: отсутствовали заголовки HTTP., @Greenonline