部分内容 引用自 InfiniteYuan ESP32 开发笔记（十一）使用 ESP32 做为 WebServer

ESP32 嵌入网页的三种方法

ESP32 是一款功能强大的微控制器，具有 WiFi 和蓝牙连接功能，因此可以将其用于各种物联网项目。在 ESP32 上嵌入网页可以通过以下三种方法来实现：

一、使用 c 语言字符串存储 html 网页内容

可以使用 ESP32 的 WiFi 功能来创建一个 HTTP 服务器，将网页文件放置在 c 语言字符串中，并通过 HTTP 协议向客户端（如智能手机或计算机）提供网页文件。可以使用 Arduino IDE 中提供的 ESP32 Web Server 库来实现此目的。当客户端访问 ESP32 的 IP 地址时，服务器将返回存储器中的网页文件，浏览器将解析并显示网页。优点是简单使用，缺点是没有压缩比较占空间。

示例

1
2
3
4
5
String ROOT_HTML = "<!DOCTYPE html><html><body><h1>Web Server with ESP32 -Station Mode</h1></body></html>";
void handleRoot()
{
    server.send(200, "text/html", ROOT_HTML);
}

二、压缩成gz文件，生成c数组。

开启gzip后，浏览器接收到服务器发送的压缩数据，然后进行解析和显示。这可以减少网络实际传输数据的大小，从而提高浏览速度。特别是对于纯文本文件，gzip压缩可以使其大小缩小到原大小的30%～40%，大大提高了传输效率。

工作流程

  1. 首先通过 gzip 将 HTML 文件压缩为 .gz 文件
  2. 使用 filetoarray 工具将 .gz 文件转为头文件
  3. 在 ESP32 程序中将头文件中的数组发送出去

fileToArray 工具

使用这个工具将 .gz 文件转换为包含十六进制数组和其长度的头文件。

源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#include <stdio.h>
#include <stdarg.h>
#include <stdlib.h>
#include <string.h>

int main(int argc, char *argv[])
{
    FILE *fp;
    char *buffer;
    long flen;
    char *fname;
    char pname[1024];

    if ( argc == 2 ) {
        fname = argv[1];
        strcpy(pname, fname);
        char *dot = strchr(pname, '.');
        while (dot != NULL) {
            *dot = '_';
            dot = strchr(pname, '.');
        }
    } else {
        printf("Filename not supplied\n");
        return 1;
    }

    fp = fopen(fname, "rb");
    fseek(fp, 0, SEEK_END);
    flen = ftell(fp);
    rewind(fp);

    buffer = (char *)malloc((flen + 1) * sizeof(char));
    fread(buffer, flen, 1, fp);
    fclose(fp);

    printf("\n//File: %s, Size: %lu\n", fname, flen);
    printf("#define %s_len %lu\n", pname, flen);
    printf("const uint8_t %s[] PROGMEM = {\n", pname);
    long i;
    for (i = 0; i < flen; i++) {
        printf(" 0x%02X", (unsigned char)(buffer[i]));
        if (i < (flen - 1)) {
            printf(",");
        }
        if ((i % 16) == 15) {
            printf("\n");
        }
    }
    printf("\n};\n\n");
    free(buffer);
    return 0;
}

详细使用方式

  1. 使用 gzip 将 HTML 文件转换为 .gz 文件
1
gzip index.html
  1. 编译 fileToArray.c 源文件，生成可执行文件
1
gcc fileToArray.c -o fileToArray
  1. 使用 fileToArray 将 .gz 文件转为头文件
1
./fileToArray index.html.gz > index.h

示例

1
2
3
4
5
6
#include "index.h"
void handleRoot()
{
    server.sendHeader("Content-Encoding", "gzip");
    server.send_P(200, "text/html", (const char*)index_html_gz, index_html_gz_len);
}

把gzip压缩的网页直接嵌入固件中

该方法效果与方法二一致且稍微麻烦，故在此不再介绍

结语

以上是三种常见的在 ESP32 上嵌入网页的方法，每种方法都有其优缺点和使用场景。根据实际需求选择最适合的方法来实现网页嵌入。