ESP8266 Веб-сервер - PullRequest
Новая
       71

ESP8266 Веб-сервер

0 голосов
/ 01 августа 2020

Я нашел интересный код при переполнении стека, но единственное, что мне в нем не нравится, так это то, что он использует JQuery, который импортируется через Inte rnet, и мне нужно, чтобы все это работало без подключения к Inte rnet. Подскажите, пожалуйста, как это можно изменить?

Код: 

void handleRoot() {

  snprintf ( htmlResponse, 3000,
"<!DOCTYPE html>\
<html lang=\"en\">\
  <head>\
    <meta charset=\"utf-8\">\
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\
  </head>\
  <body>\
          <h1>Time</h1>\
          <input type='text' name='date_hh' id='date_hh' size=2 autofocus> hh \
          <div>\
          <br><button id=\"save_button\">Save</button>\
          </div>\
    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\    
    <script>\
      var hh;\
      $('#save_button').click(function(e){\
        e.preventDefault();\
        hh = $('#date_hh').val();\       
        $.get('/save?hh=' + hh , function(data){\
          console.log(data);\
        });\
      });\      
    </script>\
  </body>\
</html>"); 
      server.send ( 200, "text/html", htmlResponse );  
}
void handleSave() {
  if (server.arg("hh")!= ""){
    Serial.println("Hours: " + server.arg("hh"));
}
}
void setup() {

  // Start serial
  Serial.begin(115200);
  delay(10);


  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  server.on ( "/", handleRoot );
  server.on ("/save", handleSave);

  server.begin();
}
void loop() {
  server.handleClient();
}

Ответы [ 2 ]

1 голос
/ 03 августа 2020

Уменьшенный jquery javascript может храниться в ESP и обслуживаться модулем, когда браузер запрашивает его.

Один простой способ сделать это - использовать SPI Fla sh Файловая система для обслуживания HTML, а также JQuery javascript.

Это означает создание index.html в подкаталоге data в скетче . Добавьте HTML в исходный эскиз в файл. Также измените исходный код сценария в этом файле на относительный путь: 

<script src="jquery.min.js"></script>

Затем загрузите jquery.min.js и скопируйте его также в подкаталог data.

Пример кода at https://tttapa.github.io/ESP8266/Chap11%20-%20SPIFFS.html можно использовать в качестве отправной точки для остальной части кода. Основные части этого включают инициализацию SPIFFS и настройку обработчика для запроса файла: 

SPIFFS.begin();

server.onNotFound([]() {
  if (!handleFileRead(server.uri()))
    server.send(404, "text/plain", "404: Not Found");
});

// retain the save endpoint
server.on("/save", handleSave);

server.begin();

Затем реализуйте обработчик файла и его обработчик типа содержимого: 

String getContentType(String filename)
{
  if (filename.endsWith(".html")) return "text/html";
  else if (filename.endsWith(".css")) return "text/css";
  else if (filename.endsWith(".js")) return "application/javascript";
  else if (filename.endsWith(".ico")) return "image/x-icon";
  return "text/plain";
}

bool handleFileRead(String path) {
  Serial.println("handleFileRead: " + path);
  if (path.endsWith("/"))
  {
    path += "index.html";
  }

  String contentType = getContentType(path);
  if (SPIFFS.exists(path))
  {
    File file = SPIFFS.open(path, "r");
    size_t sent = server.streamFile(file, contentType);
    file.close();
    return true;
  }

  Serial.println("\tFile Not Found");
  return false;
}

Альтернативный подход: Удалите зависимость JQuery

Альтернативный подход - переписать javascript, чтобы JQuery не требовалось.

Это включает регистрацию обработчика onclick на кнопке ( https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers), получение значения из поля ввода ({ ссылка }) и отправка запроса GET (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send)

0 голосов
/ 01 августа 2020

Вам просто нужно включить его как тег сценария с локальным путем на вашем компьютере. 

<script src="path-to-jquery/jquery.min.js" type="text/javascript"></script>

Изменить: Сначала вам нужно загрузить необходимый файл jquery и сохраните его на своем локальном пути. Необходимый путь к jquery должен быть относительным путем от html -файла к jquery.

...