Веб-сервер ESP8266 отображает только текст, даже если тип контента — текст/HTML.

Итак, я только что получил по почте две платы разработки WiFi ESP8266/ESP-12E, поскольку пытаюсь настроить несколько устройств домашней автоматизации в своем доме. Я продвинулся намного дальше, чем думал сегодня, учитывая, что это мой первый опыт работы со схемами, использующими микропроцессоры/Wi-Fi, но я столкнулся с проблемой, которую не могу найти для себя решение. Простите, если есть другой вопрос, похожий на этот, но я не смог его найти, и мне кажется, это лучшее место, чтобы его задать.

Я использую программу-учебник/шаблон, которую любезно создал Руи Сантос из Random Nerd Tutorials ( https://randomnerdtutorials .com/esp8266-web-server/), и хотя у нас (насколько я могу судить) идентичные платы, операционные системы и код Arduino, я продолжаю получать HTML-страницу, состоящую только из текста, без каких-либо отображаются элементы CSS или HTML. Это должно выглядеть так:

ожидаемый результат

Однако я получаю вот такую страницу:

outcome

Его последовательный монитор выдает такой ответ:

его последовательный монитор

Мой последовательный монитор выдает такой ответ:

мой последовательный монитор

Я пробовал поместить client.println("Content-type:text/html"); в несколько мест, чтобы посмотреть, поможет ли это отобразить страницу, но безрезультатно. Будем очень признательны за любую помощь в запуске этой маленькой программы/веб-сайта.

Спасибо, что уделили время!

, 👍0

Обсуждение

очевидно, вы неправильно добавляете тип контента в код, которым вы не поделились, потому что, если вы добавили его правильно, он будет отправлен как **заголовок ответа**, как и ваш код, которого у вас нет. общий - это помещение content-type:...etc в **тело ответа**, но поскольку код, которым вы не поделились, не виден, я могу ошибаться (но это не так), @Jaromanda X

Я пробовал поместить client.println("Content-type:text/html"); как насчет того, чтобы оставить его там, где он есть в учебнике?, @Jaromanda X

Программа не отображала страницу правильно как есть, поэтому я попробовал это, до сих пор у меня не было опыта работы с кодом, поэтому я решил попробовать. Как лучше всего показать вам код?, @Caleb Carroll

Ой. Значит, исходный код сломан?, @Jaromanda X

Возможно, существует проблема совместимости между кодом и моим esp8266 или моей ОС, но я ничего не могу точно определить. В комментариях к этой статье было много проблем, но также было много историй успеха, хотя ни одна проблема не отражала эту проблему., @Caleb Carroll


2 ответа

1

Не используйте инструменты низкого уровня для обработки http, используйте встроенные инструменты http. Они упрощают создание HTTP-ответов. Больше не нужно объединять заголовки или беспокоиться о статусе клиента; он предоставляет красивую чистую функцию, например:server.send(404, "text/plain", message); и удобный метод подписки: server.on().

Оцените его использование на одном из встроенных примеров Arduino ESP8266: https://github.com/esp8266/ESPWebServer/blob/master/examples/HelloServer/ HelloServer.ino

,
0

Использование HTTP здесь довольно простое, поэтому я думаю, что распечатка собственных HTTP-заголовков — это нормально, вам просто нужно очень точно определить порядок и отправлять именно то, что ожидает браузер. Не видя вашего кода, я предполагаю, что вы отправляете пустую строку клиенту где-то до отправки строки Content-type: text/html или что вы не печатаете пустую пустую строку где-то после Строка типа контента отправляется. Если ваш браузер (клиент) не получает команды протокола HTTP, которые он ожидает, в ожидаемом порядке, то по умолчанию он будет отображать ВСЕ, что вы отправляете, в виде обычного текста или HTML-документа. Чтобы проиллюстрировать, что именно должно быть отправлено в браузер в этом примере:

HTTP/1.1 200 OK
Content-type:text/html
Connection: close

<HTML>....

Обратите внимание, что после строки Connection: close и перед отправкой HTML должна быть напечатана пустая строка. Клиенту больше ничего не должно отправляться до отправки строки HTTP/1.1 200 OK и до запуска вашего HTML-кода. Если вы не будете следовать протоколу, ваш браузер, вероятно, по умолчанию будет отображать все в виде обычного текста, как вы видите.

В примере кода я заметил еще одну вещь: между Content-type: и text/html нет пробела. Это необычно, но я думаю, что это не нарушает протокол и Firefox и Chrome справляется с этим нормально в моем тестировании. Тем не менее, это может вызвать проблемы, если браузер не обрабатывает это должным образом, поэтому вы можете просто попробовать добавить пробел между заголовком и его значением.

,
Смотрите также: