ESP32 webserver框架

嵌入式工程师/汽车电子/电竞爱好者

这里简单介绍一下esp32轻量级webserver的框架的使用，此框架必须有TF卡支持，所以HTML文件和static文件都存在TF卡中，此框架的所有数据返回都采用chunked编码方式传输。

使用指南:

typedef struct
{
  char* url;
  void(*handle)(http_parser* a,char*url,char* body);
}HttpHandleTypeDef;

1.增加URL：

const HttpHandleTypeDef http_handle[]={
	{"/",web_index},
	{"/api/led/",led_ctrl},
	{"/static/logo.png",load_logo},
	{"/static/esp32.png",load_esp32},
};

上面增加了4个要处理的URL

介绍其中两个：

void web_index(http_parser* a,char*url,char* body){
	char *request;
  	asprintf(&request,RES_HEAD,"text/html");//html
  	write(client_fd, request, strlen(request));
  	free(request);
  	return_file("/sdcard/www/index.html");
}

web_index直接返回index.html文件。

led_ctrl是一个post json字符串的处理。

void led_ctrl(http_parser* a,char*url,char* body){
	char *request;
  	asprintf(&request,RES_HEAD,"application/json");//json
  	write(client_fd, request, strlen(request));
  	free(request);
  	cJSON *root=NULL;
        root= cJSON_Parse(body);
        uint8_t led=cJSON_GetObjectItem(root,"led")->valueint;
        cJSON_Delete(root);
        gpio_set_level(GPIO_OUTPUT_IO_0,led);
  	root=NULL;
	root=cJSON_CreateObject();
	if(root==NULL){
		ESP_LOGI(TAG,"cjson root create failed\n");
		return NULL;
	}
	cJSON_AddNumberToObject(root,"err",0);
	char* out = cJSON_PrintUnformatted(root);
	sprintf(chunk_len,"%x\r\n",strlen(out));
	write(client_fd, chunk_len, strlen(chunk_len));
	write(client_fd, out, strlen(out));
  	write(client_fd,"\r\n",2);
  	chunk_end(client_fd);
	//send(client,out,strlen(out),MSG_WAITALL);
	//printf("handle_return: %s\n", out);
	cJSON_Delete(root);
}

index的页面是这样的：

<body>
	<div class="container">
		<h1 class="display-3">WhyEngineer-ESP32</h1>
		<div style="text-align:center">
			<img src="/static/logo.png" class="img-fluid img-thumbnail" alt="...">
			<img src="/static/esp32.png" class="img-fluid img-thumbnail" alt="...">
		</div>
		<h3>This is a lightweight webserver framework for esp32</h3>
		<h3>github: <a href="https://github.com/whyengineer/esp32"><i class="fa fa-github fa-lg"></i></a></h3>
		<button type="button" class="btn btn-primary btn-lg btn-block" id="on">Turn On Led</button>
		<button type="button" class="btn btn-secondary btn-lg btn-block" id="off">Turn Off Led</button>
	</div>
</body>
<script type="application/javascript">
	$("#on").click(function(event) {
		console.log("click on") ;
                $.ajax({
                    type: 'POST',
		    data: "{\"led\":1}",
                    url: "/api/led/",
                    dataType: "json"
                }).done(function (data) {
                   console.log(data.err) ;
                   if(data.err==0){
                       console.log("led on");
                    }
                });
            });
	$("#off").click(function(event) {
		console.log("click off") ;
                $.ajax({
                    type: 'POST',
		    data: "{\"led\":0}",
                    url: "/api/led/",
                    dataType: "json"
                }).done(function (data) {
                   console.log(data.err) ;
                   if(data.err==0){
                       console.log("led off");
                    }
                });
            });
</script>

上面的index.html当点开灯或者关灯会分别用ajax给server发送json字符传{"led":0},{"led":1},服务器处理完后，会返回json字符串{"err":0}

总的来说，用这个框架可以快速开发简单的web应用，框架可以方便快速添加要处理的url，可以处理post get请求。可以直接return file，处理json格式的数据。用时页面可以先在pc端验证完毕，再复制到TF卡里。

源码：whyengineer/esp32_webserver 讲www的文件复制到TF卡根目录访问ip就可以访问。

最后，如果你需要带TF卡的ESP32开发板，可以访问下面这个链接购买。

esp32开发板,wifi,蓝牙,ble,以太网，音频codec，双核MCU,物联网-淘宝网

简单的演示视频：

esp32-webserver

发布于 2017-09-03 20:14

Web 开发

物联网

智能硬件

文章被以下专栏收录

WhyEngineer