• Система автоматизации с открытым исходным кодом на базе esp8266/esp32 микроконтроллеров и приложения IoT Manager. Наша группа в Telegram

Проблема с WiFiClient client = server.available(); и браузером Гугл хром

P

PichBah

New member
Делаю дома WiFi сервер на esp8266, в качестве отправной точки использую код
  1. /*********
  2. Руи Сантос
  3. Более подробно об этом проекте на: Random Nerd Tutorials | Learn ESP32, ESP8266, Arduino, and Raspberry Pi
  4. *********/

  6. // загружаем библиотеку для WiFi и другие библиотеки:
  7. //#include <WiFi.h> //Это выключаем
  8. #include <ESP8266WiFi.h> //Это добавляем
  9. #include <Wire.h>
  10. #include <Adafruit_BME280.h>
  11. #include <Adafruit_Sensor.h>

  13. // при использовании SPI убираем комментарии у строчек ниже:
  14. /*#include <SPI.h>
  15. #define BME_SCK 18
  16. #define BME_MISO 19
  17. #define BME_MOSI 23
  18. #define BME_CS 5*/

  20. #define SEALEVELPRESSURE_HPA (1013.25)

  22. Adafruit_BME280 bme; // I2C
  23. // аппаратный SPI:
  24. //Adafruit_BME280 bme(BME_CS);
  25. // программный SPI:
  26. //Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);

  28. // ставим здесь учетные данные своей сети:
  29. const char* ssid = "";
  30. const char* password = "";

  32. // выставляем номер порта на «80»:
  33. WiFiServer server(80);

  35. // создаем переменную для хранения HTTP-запроса:
  36. String header;

  38. void setup() {
  39. Wire.begin(2, 0); //Включаем I2C на пинах 2 и 0
  40. Serial.begin(115200);
  41. bool status;

  43. // настройки по умолчанию
  44. // (вы также можете использовать объект библиотеки Wire):
  45. //status = bme.begin();
  46. if (!bme.begin(0x76)) {
  47. Serial.println("Could not find a valid BME280 sensor, check wiring!");
  48. // "Невозможно найти корректный датчик BME280,проверьте подключение!"
  49. while (1);
  50. }

  52. // подключаемся к WiFi-сети при помощи SSID и пароля:
  53. Serial.print("Connecting to "); // "Подключение к"
  54. Serial.println(ssid);
  55. WiFi.begin(ssid, password);
  56. while (WiFi.status() != WL_CONNECTED) {
  57. delay(500);
  58. Serial.print(".");
  59. }
  60. // печатаем локальный IP-адрес и запускаем веб-сервер:
  61. Serial.println("");
  62. Serial.println("WiFi connected."); // "WiFi подключен."
  63. Serial.println("IP address: "); // "IP-адрес: "
  64. Serial.println(WiFi.localIP());
  65. server.begin();
  66. }

  68. void loop(){
  69. // начинаем прослушивать входящих клиентов:
  70. WiFiClient client = server.available();

  72. if (client) { // если подключился новый клиент,
  73. Serial.println("New Client."); // печатаем сообщение
  74. // «Новый клиент.»
  75. // в мониторе порта;
  76. String currentLine = ""; // создаем строку для хранения
  77. // входящих данных от клиента;
  78. while (client.connected()) { // цикл while() будет работать
  79. // все то время, пока клиент
  80. // будет подключен к серверу;
  81. if (client.available()) { // если у клиента есть данные,
  82. // которые можно прочесть,
  83. char c = client.read(); // считываем байт, а затем
  84. Serial.write(c); // печатаем его в мониторе порта
  85. header += c;
  86. if (c == '\n') { // если этим байтом является
  87. // символ новой строки
  88. // если мы получим два символа новой строки подряд,
  89. // то это значит, что текущая строчка пуста;
  90. // это конец HTTP-запроса клиента,
  91. // а значит – пора отправлять ответ:
  92. if (currentLine.length() == 0) {
  93. // HTTP-заголовки всегда начинаются
  94. // с кода ответа (например, «HTTP/1.1 200 OK»)
  95. // и информации о типе контента
  96. // (чтобы клиент понимал, что получает);
  97. // в конце пишем пустую строчку:
  98. client.println("HTTP/1.1 200 OK");
  99. client.println("Content-type:text/html");
  100. client.println("Connection: close");
  101. // "Соединение: отключено"
  102. client.println();
  104. // показываем веб-страницу с помощью этого HTML-кода:
  105. client.println("<!DOCTYPE html><html>");
  106. client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
  107. client.println("<link rel=\"icon\" href=\"data:,\">");
  108. // задаем CSS-стили для таблицы:
  109. client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial;}");
  110. client.println("table { border-collapse: collapse; width:35%; margin-left:auto; margin-right:auto; }");
  111. client.println("th { padding: 12px; background-color: #0043af; color: white; }");
  112. client.println("tr { border: 1px solid #ddd; padding: 12px; }");
  113. client.println("tr:hover { background-color: #bcbcbc; }");
  114. client.println("td { border: none; padding: 12px; }");
  115. client.println(".sensor { color:white; font-weight: bold; background-color: #bcbcbc; padding: 1px; }");
  117. // заголовок веб-страницы:
  118. client.println("</style></head><body><h1>ESP32 with BME280</h1>");
  119. client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");
  120. client.println("<tr><td>Temp. Celsius</td><td><span class=\"sensor\">");
  121. client.println(bme.readTemperature());
  122. client.println(" *C</span></td></tr>");
  123. client.println("<tr><td>Temp. Fahrenheit</td><td><span class=\"sensor\">");
  124. client.println(1.8 * bme.readTemperature() + 32);
  125. client.println(" *F</span></td></tr>");
  126. client.println("<tr><td>Pressure</td><td><span class=\"sensor\">");
  127. client.println(bme.readPressure() / 100.0F);
  128. client.println(" hPa</span></td></tr>");
  129. client.println("<tr><td>Approx. Altitude</td><td><span class=\"sensor\">");
  130. client.println(bme.readAltitude(SEALEVELPRESSURE_HPA));
  131. client.println(" m</span></td></tr>");
  132. client.println("<tr><td>Humidity</td><td><span class=\"sensor\">");
  133. client.println(bme.readHumidity());
  134. client.println(" %</span></td></tr>");
  135. client.println("</body></html>");
  137. // конец HTTP-ответа задается
  138. // с помощью дополнительной пустой строки:
  139. client.println();
  140. // выходим из цикла while():
  141. break;
  142. } else { // если получили символ новой строки,
  143. // очищаем переменную «currentLine»
  144. currentLine = "";
  145. }
  146. } else if (c != '\r') { // если получили любые данные,
  147. // кроме символа возврата каретки,
  148. currentLine += c; // добавляем эти данные
  149. // в конец строки «currentLine»
  150. }
  151. }
  152. }
  153. // очищаем переменную «header»:
  154. header = "";
  155. // отключаем соединение:
  156. client.stop();
  157. Serial.println("Client disconnected.");
  158. // "Клиент отключился.")
  159. Serial.println("");
  160. }
  161. }
Код написан для ESP32, поэтому меняю #include <WiFi.h> на #include <ESP8266WiFi.h>, включаю
I2C. Прописываю свои ssid и password. WiFi роутер по MAC адресу выдает статический IP. Подключаюсь по нему и все работает, но! Если в Хроме открыть IPадрес в режиме инкогнито все хорошо, открывается страница и клиент отключается, тоже самое если открыть страницу с телефона. Но если открыть страничку в хроме не инкогнито, страница открывается, клиент отключается и сразу подключается новый клиент. И при этом он молчит, контроллер зависает на строке 78. Чего такого отправляет Хром, что клиент создается вновь и как это исправить?
 
Алексей.

Алексей.

Active member
PichBah написал(а):
Чего такого отправляет Хром, что клиент создается вновь и как это исправить?
Нажмите для раскрытия...
Вы в отладчике в хроме смотрели?
Ничего он не отправляет, только ещё одно соединение устанавливает.
Может ещё favicon запрашивать.
 
P

PichBah

New member
Алексей. написал(а):
Вы в отладчике в хроме смотрели?
Ничего он не отправляет, только ещё одно соединение устанавливает.
Может ещё favicon запрашивать.
Нажмите для раскрытия...
В отладчике Хрома и сообщениях в SerialPort была замечена разница, но после добавления строки
client.println("<meta http-equiv=\"cache-control\" content=\"max-age=0\">"); сообщения в порт стали одинаковыми.
Судя по тому что выдал гугл на запрос "favicon ESP8266" очень похоже на то что у меня.
 
P

PichBah

New member
Точно не уверен, есть мысли что данная проблема возникает из за
GET /favicon.ico HTTP/1.1 запроса (Спасибо @Алексей.). Который идет следом за GET / HTTP/1.1 запросом. favicon.ico это иконка странички на вкладке в браузере. Этот запрос видно только если сменить порт сервера со стандартного 80го на любой другой. Тогда адрес страницы в локальной сети имеет вид http//ip:port. В любом случае от подхода описанного в примере вынужден отказаться в пользу библиотек #include <ESPAsyncWebServer.h> или #include <ESP8266WebServer.h>. На первый взгляд библиотеки очень похожи, хотя первая и поддерживает одновременное подключение нескольких клиентов, автор настаивает на использовании platformio для работы с ней. Оставлю это здесь, мб кому нибудь пригодится.
 
pvvx

pvvx

Активный участник сообщества
@PichBah вы указали HTTP1.1 и [inline]client.println("Connection: close");[/inline] без указания длины context, что уже неверно. А далее закрываете соединение [inline]client.stop();[/inline]. Для TCP это тоже неверно. Клиент должен произвести отключение, иначе у вас метрика TCP (структура в памяти) перейдет в состояние TIME_WAIT на 120 сек и порт соединения будет занят всё это время. Так вы ограничиваете память приложения набором структур с таймерами у Lwip на каждое неправильно закрытое соединение.
Короче Ардуино для детсада...
 
P

PichBah

New member
pvvx написал(а):
Короче Ардуино для детсада...
Нажмите для раскрытия...
Спасибо за пояснения что я все делаю не верно (а то я и без вас не знал, иначе бы не стал спрашивать на форуме, л - логика?) да я еще учусь...
pvvx написал(а):
вы указали HTTP1.1 и client.println("Connection: close"); без указания длины context, что уже неверно. А далее закрываете соединение client.stop();. Для TCP это тоже неверно. Клиент должен произвести отключение
Нажмите для раскрытия...
Начнем с того что не я указал, а Руи Сантоси и его примеры цитируют очень многие. А вы могли бы не умничать и более глубже объяснить эти моменты.
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу