ESP32: Webserver using esp-idf SDK

Web-Server or Web-socket oe http socket is most commonly used method to read or write data from Ethernet or now as we move to new technology WiFi in embedded universe. It was already there, but with cheap and easily available ESP modules it has taken a big leap forward.

Here in this topic, i will explain you to added Web Server to ESP32 module using eclipse.

If you are new to ESP32 using eclipse you start from here for adding ESP32 in eclipse.

Ok lets start with ESP32 Webserver, initialization,

       

        struct netconn *conn, *newconn;
 err_t err;
 conn = netconn_new(NETCONN_TCP); // Create TCP socket
 netconn_bind(conn, IP_ADDR_ANY, 80); // bind socket
 netconn_listen(conn);

       
 

Now, write the main body to accept web client connection and to decrypt http frame.

       
     do {
  err = netconn_accept(conn, &newconn); // accept incoming connection
  if (err == ERR_OK) {
   ESP_LOGI(TAG, "Accepted Conn %d\n", err);
   http_server_netconn_serve(newconn); // decrypt packet 
   netconn_delete(newconn);
  }
  vTaskDelay( (TickType_t)10); /* allows the freeRTOS scheduler to take over if needed */
 } while(err == ERR_OK);
 

Now writing the http decryption code,

       
   void http_server_netconn_serve(struct netconn *conn) {

 struct netbuf *inbuf;
 char *buf = NULL;
 u16_t buflen;
 err_t err;
 const char new_line[2] = "\n";

 err = netconn_recv(conn, &inbuf);
 if (err == ERR_OK) {

  netbuf_data(inbuf, (void**)&buf, &buflen);
  /* extract the first line of the request */
  char *save_ptr = buf;
  char *line = strtok_r(save_ptr, new_line, &save_ptr);
  if(line) {

   // default page
   if(strstr(line, "GET / ")) {
    ESP_LOGI(TAG, "Index page \n");
    netconn_write(conn, http_html_hdr, sizeof(http_html_hdr) - 1, NETCONN_NOCOPY);
    netconn_write(conn, index_html_start, index_html_end - index_html_start, NETCONN_NOCOPY);
   }
   else{
    netconn_write(conn, http_400_hdr, sizeof(http_400_hdr) - 1, NETCONN_NOCOPY);
   }
                }
  else{
   netconn_write(conn, http_404_hdr, sizeof(http_404_hdr) - 1, NETCONN_NOCOPY);
  }
 }

 /* free the buffer */
 netbuf_delete(inbuf);
}
 

Adding index.htm file to project, You use this method embedding-binary-data
follow these steps,
1. You can set a variable COMPONENT_EMBED_FILES in component.mk, giving the names of the files to embed in this way:

       
     COMPONENT_EMBED_FILES := index.html
 

2.The file’s contents will be added to the .rodata section in flash, and are available via symbol names as follows: 

       
extern const uint8_t index_html_start[] asm("_binary_index_htm_start");
extern const uint8_t index_html_end[] asm("_binary_index_htm_end");
 

Reference: 

1. esp32 wifi manager 

2. Setting up Eclipse for ESP-IDF