目的
之前文章里分别单独介绍过WebServer和SD卡的使用，在这篇文章中将把两个功能结合起来使用，这是一种比较合适的使用方式，可以实现更加实用的Web服务器，对于开发来说也更加便利（前端和后台分离）。
基础功能可以参考：
《使用Arduino开发ESP32（09）：WebServer使用演示与说明》
《使用Arduino开发ESP32（13）：SD卡的使用》
搭建演示
基础测试
基于SD卡的Web服务器简单来说就是把静态网页的相关文件放到SD卡中，用户访问Web服务器的时候把SD卡中对应的文件发送给用户，这里面关键用到的是WebServer中下面的这个方法：
template<typename T>
size_t streamFile(T &file, const String& contentType)
通过上面方法就可以把文件发送给客户端，下面就是基础的测试。
将下面代码保存为名为index的html文件，然后放到SD卡根目录：
<!DOCTYPE html>
<head>
<title>SD WebServer Test</title>
</head>
<body>
<p style="background-color:gray">这是来自SD卡的html文件</p>
</body>
</html>
接着把下面代码烧录到ESP32模块中：
#include <WiFi.h>
#include <WebServer.h>
#include <SD_MMC.h>
const char *ssid = "********";
const char *password = "********";
WebServer server(80); //声明WebServer对象
void handleRoot() //回调函数
{
File contentFile = SD_MMC.open("/index.html"); //从SD卡读取文件
if (!contentFile)
{
Serial.println("读取文件失败");
server.send(404, "text/plain", "访问失败");
return;
}
String contentType = "text/html"; //Content-Type
server.streamFile(contentFile, contentType); //向客户端发送文件
contentFile.close();
}
void setup()
{
Serial.begin(115200);
Serial.println();
WiFi.mode(WIFI_STA);
WiFi.setSleep(false);
WiFi.begin(ssid, password); //连接到无线网络
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println("Connected");
Serial.print("IP Address:");
Serial.println(WiFi.localIP());
if (!SD_MMC.begin()) //挂载SD卡
{
Serial.println("存储卡挂载失败");
return;
}
server.on("/", handleRoot); //注册链接和回调函数
server.begin(); //启动Web服务器
Serial.println("Web服务器启动");
}
void loop()
{
server.handleClient(); //处理来自客户端的请求
}
上图中当用户访问服务器的时候，服务器将SD卡中的index.html文件发送给浏览器，并告诉浏览器该内容是text/html类型的，所以浏览器最终将收到的内容以text/html形式进行展现。
完善文件发送功能
上面只是单个文件的传输，事实上一般情况一个网页会有非常多相关联的文件，浏览器在读取html文件后解析过程中会自动请求相关联的其他文件，如果每个文件都要像上面那样单独处理的话那样工作量就很大了，而且换个网页还得重新写，所以得换个方式来处理。
首先准备我们的网页，将下面代码保存为名为index的html文件：
<!DOCTYPE html>
<head>
<title>SD WebServer Test</title>
<!-- <link rel="stylesheet" type="text/css" href="mystyle.css"> -->
<script src="myscript.js" type="text/javascript"></script>
</head>
<body>
<div id="txtRandomData">Unkwon</div>
<input type="button" value="random" onclick="getData()">
</body>
</html>
将下面代码保存为名为mystyle的css文件：
div {
background-color: gray;
}
将下面代码保存为名为myscript的js文件：
function getData() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtRandomData").innerHTML = xmlhttp.responseText;
}
},
xmlhttp.open("GET", "getRandomData", true); //以GET方法打开getRandomData
xmlhttp.send();
}
将上面三两个（先不管css）文件放到SD卡根目录：
接着把下面代码烧录到ESP32模块中：
#include <WiFi.h>
#include <WebServer.h>
#include <SD_MMC.h>
const char *ssid = "********";
const char *password = "********";
WebServer server(80); //声明WebServer对象
String getContentType(String path) //解析客户端请求的ContentType
{
if (path.endsWith(".htm"))
{
return "text/html";
}
else if (path.endsWith(".html"))
{
return "text/html";
}
else if (path.endsWith(".css"))
{
return "text/css";
}
else if (path.endsWith(".js"))
{
return "text/javascript";
}
else if (path.endsWith(".png"))
{
return "image/png";
}
else if (path.endsWith(".gif"))
{
return "image/gif";
}
else if (path.endsWith(".jpg"))
{
return "image/jpeg";
}
else if (path.endsWith(".ico"))
{
return "image/x-icon";
}
else if (path.endsWith(".xml"))
{
return "text/xml";
}
else if (path.endsWith(".pdf"))
{
return "application/pdf";
}
else if (path.endsWith(".zip"))
{
return "application/zip";
}
else if (path.endsWith(".gz"))
{
return "application/x-gzip";
}
// else if (server.hasArg("download"))
// {
// return "application/octet-stream";
// }
return "text/plain";
}
bool loadFromSdCard(String path) //从SD卡读取文件发送给客户端
{
String contentType = getContentType(path);
// if (path.endsWith(".src"))
// {
// path = path.substring(0, path.lastIndexOf("."));
// }
// if (SD_MMC.exists(path + ".gz"))
// {
// path += ".gz";
// }
File contentFile = SD_MMC.open(path);
if ((!contentFile) || contentFile.isDirectory())
{
Serial.print("读取文失败：");
Serial.println(path);
return false;
}
Serial.print("读取到文件：");
Serial.println(path);
server.streamFile(contentFile, contentType);
contentFile.close();
return true;
}
void handleRoot() //回调函数
{
loadFromSdCard("/index.html");
}
void handleNotFound() //未知链接回调函数，在这里相当于所有html文件相关联的内容都通过这里访问
{
if (loadFromSdCard(server.uri()))
{
return;
}
server.send(404, "text/plain", "访问的内容不存在");
}
void handleAjax() //回调函数
{
String message = "随机数据：";
message += String(random(10000)); //取得随机数
server.send(200, "text/plain", message); //将消息发送回页面
}
void setup()
{
Serial.begin(115200);
Serial.println();
WiFi.mode(WIFI_STA);
WiFi.setSleep(false);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println("Connected");
Serial.print("IP Address:");
Serial.println(WiFi.localIP());
if (!SD_MMC.begin()) //挂载SD卡
{
Serial.println("存储卡挂载失败");
return;
}
server.on("/", handleRoot); //注册链接和回调函数
server.onNotFound(handleNotFound); //未知链接回调函数注册
server.on("/getRandomData", HTTP_GET, handleAjax); //注册网页js中ajax发送的get方法的请求和回调函数
server.begin(); //启动Web服务器
Serial.println("Web服务器启动");
}
void loop()
{
server.handleClient(); //处理来自客户端的请求
}
上面代码中String getContentType(String path) 用于解析客户端请求的ContentType，可以自行添加更多种类；
html文件中关联的其它文件其实是在server.onNotFound(handleNotFound);这句触发时用handleNotFound()方法获取并发送的；
上面演示中可以看到，我通过浏览器请求了html文件，然后浏览器解析文件时又请求了js文件，我在点击按钮时可以触发js中的方法。
一般的html中关联的文件可以压缩成.gz格式压缩文件，可以大大提高效率。
存在的问题
在我的电脑上测试时html文件中如果关联多个文件的话，其中一些会读取失败（比如上面例子如果js和css都引用的话，不管怎么调整顺序都只有一个文件可以读取成功），目前不知道具体原因和解决办法。
总结
上面就是基于SD卡的Web服务器基础实现演示了，有兴趣的话可以基于原理自行完善更多功能，比如官方的例程中就演示了通过网页管理SD卡的功能（显示文件列表、建立文件、删除文件等操作），另外也可以结合DNSServer用过域名去访问。
更多内容可以参考：
https://github.com/espressif/arduino-esp32/tree/master/libraries/WebServer/examples/SDWebServer
《使用Arduino开发ESP32（10）：DNSServer使用演示与说明》
http://tool.oschina.net/commons/