{"id":620,"date":"2018-02-17T22:48:11","date_gmt":"2018-02-17T21:48:11","guid":{"rendered":"https:\/\/sharedinventions.com\/?p=620"},"modified":"2018-02-17T22:54:41","modified_gmt":"2018-02-17T21:54:41","slug":"esp32-with-bounded-resources","status":"publish","type":"post","link":"https:\/\/sharedinventions.com\/?p=620","title":{"rendered":"Esp32 server with bounded resources"},"content":{"rendered":"

If you have a web server set up in your ESP32 device, you might want to add resources like images or java-scripts, that are referenced from your web documents.<\/p>\n

I can imagine, that a quite few people does not know, that ESP32 (and ESP8266 as well) has a built in file storage area in the flash memory. For a web server context, the idea is that you can upload your binary content into this file area, where your web server can forward these files to the client requests.<\/p>\n

You can access files in this area with the SPIFFS library.<\/p>\n

This is an example as matters stands in February 2018.<\/p>\n

\r\n#include <FS.h>;\r\n#include <SPIFFS.h>;\r\n#include <WiFi.h>;\r\n#include <WiFiClient.h>;\r\n\r\n#define BUF_LEN 512\r\n\r\nconst char* ssid = "Free WiFi";\r\nconst char* password = "***for connecting***";\r\n\r\n\/\/ TCP server at port 80 will respond to HTTP requests\r\nWiFiServer server(80);\r\n\r\n\/\/ Our local FS will be the internal SPIFFS of the esp32\r\nfs::FS localFs = SPIFFS;\r\nstatic uint8_t buf[BUF_LEN];\r\n\r\nvoid setup(void)\r\n{\r\n  Serial.begin(115200);\r\n\r\n  \/\/ Set up SPIFFS\r\n  if (!SPIFFS.begin())\r\n  {\r\n    Serial.println("SPIFFS Mount Failed");\r\n  }\r\n\r\n  setupWifi();\r\n\r\n  \/\/ Start TCP (HTTP) server\r\n  server.begin();\r\n  Serial.println("TCP server started");\r\n}\r\n\r\nvoid setupAP()\r\n{\r\n  \/\/ Set up access point\r\n  WiFi.softAP(ssid);\r\n\r\n  Serial.print("Created ");\r\n  Serial.println(ssid);\r\n  Serial.print("IP address: ");\r\n  Serial.println(WiFi.softAPIP());\r\n}\r\n\r\nvoid setupWifi()\r\n{\r\n  \/\/ Connect to WiFi network\r\n  WiFi.begin(ssid, password);\r\n\r\n  while (WiFi.status() != WL_CONNECTED)\r\n  {\r\n    delay(500);\r\n    Serial.print(".");\r\n  }\r\n\r\n  Serial.println();\r\n  Serial.println("WiFi connected.");\r\n  Serial.println("IP address: ");\r\n  Serial.println(WiFi.localIP());\r\n}\r\n\r\nvoid loop(void)\r\n{\r\n  \/\/ Check if a client has connected\r\n  WiFiClient client = server.available();\r\n  if (!client)\r\n  {\r\n    return;\r\n  }\r\n  Serial.println("");\r\n  Serial.println("New client");\r\n\r\n  \/\/ Wait for data from client to become available\r\n  while (client.connected() &amp;&amp; !client.available())\r\n  {\r\n    delay(1);\r\n  }\r\n\r\n  \/\/ Read the first line of HTTP request\r\n  String req = client.readStringUntil('\\r');\r\n\r\n  \/\/ First line of HTTP request looks like "GET \/path HTTP\/1.1"\r\n  \/\/ Retrieve the "\/path" part by finding the spaces\r\n  int addr_start = req.indexOf(' ');\r\n  int addr_end = req.indexOf(' ', addr_start + 1);\r\n  if (addr_start == -1 || addr_end == -1)\r\n  {\r\n    Serial.print("Invalid request: ");\r\n    Serial.println(req);\r\n    return;\r\n  }\r\n  req = req.substring(addr_start + 1, addr_end);\r\n  Serial.print("Request: ");\r\n  Serial.println(req);\r\n  client.flush();\r\n\r\n  String s;\r\n  if (req == "\/")\r\n  {\r\n    IPAddress ip = WiFi.softAPIP();\r\n    String ipStr = String(ip[0]) + '.' + String(ip[1]) + '.' + String(ip[2]) + '.' + String(ip[3]);\r\n    s = "HTTP\/1.1 200 OK\\r\\n";\r\n    s += "Content - Type: text \/ html\\r\\n";\r\n    s += "\\r\\n"; \/\/ End of header block\r\n    s += "<!DOCTYPE HTML>\\r\\n";\r\n    s += "<html>Hello from ESP32";\r\n    s += "<img src='\/sample.jpg'\/>";\r\n    s += "<\/html>\\r\\n\\r\\n";\r\n    Serial.println("Sending 200");\r\n  }\r\n  else\r\n  {\r\n    Serial.print("Sending ");\r\n    Serial.println(req);\r\n\r\n    \/\/ Open file from FS\r\n    File file = localFs.open(req);\r\n    if(!file || file.isDirectory()){\r\n      \/\/ File not found\r\n      Serial.println("Sending 404");\r\n      s = "HTTP \/ 1.1 404 Not Found\\r\\n";\r\n      s += "\\r\\n"; \/\/ End of header block\r\n      s += "Resource not found\\r\\n";\r\n    }\r\n    else\r\n    {\r\n      int toSend = file.size();\r\n      Serial.print("Reading bytes ");\r\n      Serial.println(toSend);\r\n      client.println("HTTP \/ 1.1 200 OK");\r\n      \/\/ TODO: Handle content type\r\n\/\/      client.println("Content - Type: image \/ jpeg");\r\n      client.print("Content - Length: ");\r\n      client.println(toSend);\r\n      client.println(); \/\/ End of header block\r\n      \/\/ Copy file content to client via buffer\r\n      while(toSend > 0)\r\n      {\r\n        size_t len = toSend > BUF_LEN ? BUF_LEN : toSend;\r\n        file.read(buf, len);\r\n        client.write(buf, len);\r\n        toSend -= len;\r\n        Serial.print(".");\r\n      }\r\n      file.close();\r\n      s = ""; \/\/ Request already served no more lines to send.\r\n    }\r\n  }\r\n\r\n  \/\/ Send content to client\r\n  client.print(s);\r\n  Serial.println("Done with client");\r\n}\r\n<\/pre>\n
As you can see in the code we handle unidentified URLs as resources can be found on the file system.<\/p>\n
To upload files to this flash area you will need to use the “Arduino ESP32 filesystem uploader” from https:\/\/github.com\/me-no-dev\/arduino-esp32fs-plugin<\/a><\/p>\n
\"\"<\/a><\/p>\n
The idea is that you have “data” folder inside your current sketch folder, and you can upload all files in this folder with the tool.<\/p>\n
\"\"<\/a><\/p>\n
I have personally faced with some issues around this tool, as some files was not uploaded correctly to the flash with this tool.<\/p>\n","protected":false},"excerpt":{"rendered":"
If you have a web server set up in your ESP32 device, you might want to add resources like images or java-scripts, that are referenced from your web documents. I can imagine, that a quite few people does not know, that ESP32 (and ESP8266 as well) has a built in file storage area in the\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":628,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,15,16],"tags":[],"class_list":["post-620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arduino","category-explained","category-tipps-and-tricks"],"_links":{"self":[{"href":"https:\/\/sharedinventions.com\/index.php?rest_route=\/wp\/v2\/posts\/620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sharedinventions.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sharedinventions.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sharedinventions.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sharedinventions.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=620"}],"version-history":[{"count":11,"href":"https:\/\/sharedinventions.com\/index.php?rest_route=\/wp\/v2\/posts\/620\/revisions"}],"predecessor-version":[{"id":634,"href":"https:\/\/sharedinventions.com\/index.php?rest_route=\/wp\/v2\/posts\/620\/revisions\/634"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sharedinventions.com\/index.php?rest_route=\/wp\/v2\/media\/628"}],"wp:attachment":[{"href":"https:\/\/sharedinventions.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sharedinventions.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sharedinventions.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}