devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用Arduino开发ESP32（14）：基于SD卡的Web服务器搭建_esp32 sd卡加载网页

作者：盐析白兔 | 2024-04-23 00:20:31

赞

踩

esp32 sd卡加载网页

文章目录

目的

之前文章里分别单独介绍过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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

在这里插入图片描述
接着把下面代码烧录到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(); //处理来自客户端的请求
}

  • 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
  • 53
  • 54
  • 55
  • 56

在这里插入图片描述
上图中当用户访问服务器的时候，服务器将SD卡中的index.html文件发送给浏览器，并告诉浏览器该内容是text/html类型的，所以浏览器最终将收到的内容以text/html形式进行展现。

完善文件发送功能

上面只是单个文件的传输，事实上一般情况一个网页会有非常多相关联的文件，浏览器在读取html文件后解析过程中会自动请求相关联的其他文件，如果每个文件都要像上面那样单独处理的话那样工作量就很大了，而且换个网页还得重新写，所以得换个方式来处理。
首先准备我们的网页，将下面代码保存为名为index的html文件：

<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
    <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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

将下面代码保存为名为mystyle的css文件：

div {
    background-color: gray;
}

  • 1
  • 2
  • 3

将下面代码保存为名为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();
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

将上面三两个（先不管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(); //处理来自客户端的请求
}

  • 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
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151

上面代码中String getContentType(String path) 用于解析客户端请求的ContentType，可以自行添加更多种类；
html文件中关联的其它文件其实是在server.onNotFound(handleNotFound);这句触发时用handleNotFound()方法获取并发送的；
在这里插入图片描述
上面演示中可以看到，我通过浏览器请求了html文件，然后浏览器解析文件时又请求了js文件，我在点击按钮时可以触发js中的方法。
一般的html中关联的文件可以压缩成.gz格式压缩文件，可以大大提高效率。

存在的问题

在我的电脑上测试时html文件中如果关联多个文件的话，其中一些会读取失败（比如上面例子如果js和css都引用的话，不管怎么调整顺序都只有一个文件可以读取成功），原因估计是因为项目中自带的WebServer是同步单线程的，无法处理客户端同时发起的多个请求。这个问题可以使用第三方的库ESPAsyncWebServer解决，相关内容可以参考下面文章：
《Arduino for ESP8266&ESP32适用库ESPAsyncWebServer：快速入门》
《Arduino for ESP8266&ESP32适用库ESPAsyncWebServer：事件处理绑定》
《Arduino for ESP8266&ESP32适用库ESPAsyncWebServer：请求与响应》
《Arduino for ESP8266&ESP32适用库ESPAsyncWebServer：静态文件和模板引擎》
《Arduino for ESP8266&ESP32适用库ESPAsyncWebServer：WebSocket和EventSource》

总结

上面就是基于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/

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/471245
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号