0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

基于ESP32的简易web服务器设计

jf_eqg0Ui2u 来源:懂事电子设计 2023-01-05 10:49 次阅读

本文介绍一下如何使用ESP32快速方便的搭建一个简易的web服务器。

45e7f236-8c42-11ed-bfe3-dac502259ad0.png

使用ESP32或ESP8266搭建web服务器的方式有很多,但是大多数都的web页面代码都是内嵌在程序中的,这样如果要修改web页面就十分的不方便。今天介绍一种方法将web页面的代码以文件的形式上传到存储器中,然后在程序中直接利用文件搭建web服务器。 这里首先介绍一下SPIFFS。SPIFFS又叫SPI闪存文件系统。是一种小型嵌入式系统专用的文件系统。它支持用户创建文件和目录。

SPIFFS的主要特点: 专为微控制器上的低 RAM 使用场景而设计; 使用固定大小的 RAM 缓冲区; Posix-like api:打开,关闭,读取,写入,搜索,统计等; POSIX:Portable Operating System Interface 可移植操作系统接口; 不仅仅是SPI闪存 (SPI Flash:Serial Peripheral interface 串行外围设备接口, 串行通信接口的NOR FLASH),它可以在任何 非易失闪存(NOR Flash)上运行,多个 SPIFFS 配置可以在同一目标上运行甚至可以在同一个 SPI 闪存设备上运行; 实现静态磨损均衡; 内置的系统一致性检查; 高度可配置,可适用于各种闪存类型。

使用Arduino进行ESP32开发时,开发套件中集成有SPIFFS可以直接使用。但是开发工具中不具有文件上传功能,所以首先需要给ArduinoIDE添加SPIFFS文件上传插件。 首先下载文件上传工具,可以在下面的链接处下载,也可以在文末分享的链接处下载。 GitHub - me-no-dev/arduino-esp32fs-plugin: Arduino plugin for uploading files to ESP32 file system
461469ec-8c42-11ed-bfe3-dac502259ad0.png
将所下载的文件“esp32fs.jar”放置到Arduino安装目录下的工具文件夹中。如F:arduino-1.8.19 oolsESP32FS ool。然后重启Arduino IDE。
462f1b5c-8c42-11ed-bfe3-dac502259ad0.png
重启Arduino IDE后在工具菜单下就可以看到“ESP32 Sketch Data Upload”选项,通过该选项就可以将工程目录下data文件夹中的文件上传到ESP32的文件存储系统中。上传过程中一定要关闭ESP32的串口监视器窗口,否则会导致上传失败。

464cb144-8c42-11ed-bfe3-dac502259ad0.png

文件上传工具安装完成后,接下来需要安装异步web服务器库。主要包括ESPAsyncWebServer和AsyncTCP两个库。通过这两个库可以实现简单的异步web服务器的搭建。 异步web服务器有以下优点: 使用异步意味着服务器可以同时处理来自客户端的多个连接; 一旦请求准备好并被解析,您就会被调用; 当您发送响应时,您可以立即准备好处理其他连接,而服务器会在后台处理发送响应 速度很快; 易于使用的 API、HTTP Basic 和 Digest MD5 身份验证(默认)、ChunkedResponse; 易于扩展以处理任何类型的内容; 支持继续 100; 异步 WebSocket 插件提供不同的位置,无需额外的服务器或端口; Async EventSource (Server-Sent Events) 插件向浏览器发送事件; 用于条件和永久 URL 重写的 URL 重写插件; 支持缓存、Last-Modified、默认索引等的 ServeStatic 插件; 处理模板的简单模板处理引擎; 两个库的下载地址如下:

ESPAsyncWebServer

https://github.com/me-no-dev/ESPAsyncWebServer

AsyncTCP

https://github.com/me-no-dev/AsyncTCP

两个库安装完成后就可以开始创建web页面了。web前端页面的开发工具有很多,自行选择一种喜欢的方式就可以了。编写一个简单的web页面。



  
    
    
    懂事<a href="https://www.hqchip.com/ask/" target="_blank"><u>电子</u></a>设计
  
  
    

懂事电子设计

这是一个测试网页

Pulpit rock

466a7ea4-8c42-11ed-bfe3-dac502259ad0.png

使用Arduino IDE创建ESP32工程。在工程下创建data文件夹,并将创建的HTML程序文件放到data文件夹内。然后依次点击”工具”->”ESP32 Sketch Data Upload”将WEB程序文件上传到ESP32存储器中。

468ad3d4-8c42-11ed-bfe3-dac502259ad0.png

修改程序中的WIFI信息,点击上传到ESP32即可。

#include 
#include 
#include "ESPAsyncWebServer.h"
AsyncWebServer server(80);
//连接WIFI
void connect_wifi(){
  const char* wifi_ssid = "***";
  const char* wifi_password = "********";
  Serial.begin(115200);
  WiFi.begin(wifi_ssid, wifi_password);         //连接WIFI
  Serial.print("Connected");
  //循环,直到连接成功
  while(WiFi.status() != WL_CONNECTED){
    Serial.print(".");
    delay(500);
  }
  Serial.println();
  IPAddress local_IP = WiFi.localIP();
  Serial.print("WIFI is connected,The local IP address is "); //连接成功提示
  Serial.println(local_IP); 
}


void web_server(){
 if(!SPIFFS.begin(true)){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }
  server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");
  server.begin();                       //初始化
}


void setup() {
  connect_wifi();
  web_server();
}
 
void loop() {


}

46a05aa6-8c42-11ed-bfe3-dac502259ad0.png

上传完成后可以打开串口监视窗口,等ESP32完成网络连接后会输出对应的IP地址。使用同一网络下的PC或手机的浏览器访问该IP即可进入到web页面。

需要对web页面进行修改时,只需将对应的.html程序文件修改后重新上传即可,可以最大程度的简化复杂度。

审核编辑:汤梓红

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • Web
    Web
    +关注

    关注

    2

    文章

    1230

    浏览量

    68380
  • 服务器
    +关注

    关注

    12

    文章

    8013

    浏览量

    82209
  • ESP32
    +关注

    关注

    12

    文章

    888

    浏览量

    15693

原文标题:基于ESP32的简易web服务器

文章出处:【微信号:懂事电子设计,微信公众号:懂事电子设计】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    【FireBeetle ESP32-E开发板免费试用】+wifi功能测试&搭建web服务器

    本帖最后由 dql2016 于 2021-9-15 21:11 编辑 ESP32具有wifi功能,可作为AP使用。本帖利用esp32的wifi功能搭建一个简单的web服务器实现传
    发表于 09-14 21:51

    如何在单片机跑裸机的环境下实现简易web服务器

    。本人介绍,如何在单片机跑裸机的环境下实现简易web服务器,并可通过电脑、手机上传、下载资源。前提条件1、单片机(最好4+32及以上资源)+ 以太网模块/WIFI模块二选一。2、已能正常的进行TCP传输(这里不讲述如何实现TC
    发表于 01-26 07:23

    使用rt-thread studio创建esp32 web服务器

    1、使用rt-thread studio创建esp32 web服务器  实验步骤:  ESP32-Ethernet-Kit_A_V1.1 评估板板载
    发表于 09-29 14:38

    ESP8266 WEB智能小后台 ,采电压,绘曲线,向服务器传信息

    ESP8266 WEB小后台 ,采电压,绘曲线,向服务器传信息一个月前,自己想设计一个不用安装应用程序的智能手机控制的硬件。是否有人有兴趣?有兴趣的可以联系我,朝“自带智能使用程序的智能硬件,或是有
    发表于 11-25 22:15

    ESP32 Web服务器可以向外部Rest API发起HTTP请求吗?

    -IDF 服务器 API 也可以发起/发出请求?3)传入和传出请求的流量是否由同一个端口处理(出于端口转发的原因)?举个例子,考虑一下自动化中使用的 ESP32,它有自己的 WEB UI,可以向 Shelly 产品轮询传感
    发表于 03-01 06:22

    如何实现ESP32上运行运行HTTP服务器

    我正在努力了解如何与我的网络服务器建立连接。我正在做一个项目,在 ESP32 上运行,它运行着一个 HTTP 服务器。我需要从世界任何地方访问该 HTTP 服务器,但我不知道如何实现。
    发表于 03-02 07:25

    ESP32 TLS RADIUS服务器连接问题求解

    我们正在尝试使用 TLS 协议通过ESP32wifi 网络连接到 RADIUS 服务器,但它不起作用。我们使用 AT 命令与 ESP32 通信,因此在我们的系统中,它作为从设备工作。通过
    发表于 03-08 07:28

    制作带有BME280的ESP32 Web服务器

    DIY视频配套资料制作带有BME280的ESP32 Web服务
    发表于 09-28 06:25

    ESP8266可作为Web服务器吗?怎么实现?

    ESP8266可作为Web服务器吗怎么实现
    发表于 10-24 08:17

    带有BME280的ESP32 Web服务器的高级气象站

    介绍一款带有BME280的ESP32 Web服务器的高级气象站。
    发表于 03-17 11:15 18次下载
    带有BME280的<b class='flag-5'>ESP32</b> <b class='flag-5'>Web</b><b class='flag-5'>服务器</b>的高级气象站

    使用ESP32-CAM板访问网络

    在这个项目中,我们将使用ESP32-CAM板。 ESP32相机将托管视频流Web服务器您可以使用网络中的任何设备进行访问。
    发表于 04-06 11:45 42次下载
    使用<b class='flag-5'>ESP32</b>-CAM板访问网络

    ESP32 CAM WEB服务器及入门指南

    电子发烧友网站提供《ESP32 CAM WEB服务器及入门指南.zip》资料免费下载
    发表于 11-17 10:44 0次下载
    <b class='flag-5'>ESP32</b> CAM <b class='flag-5'>WEB</b><b class='flag-5'>服务器</b>及入门指南

    基于ESP8266的Web服务器

    项目将告诉你如何在不使用 Arduino 的情况下使用 ESP8266 构建 Web 服务器
    发表于 12-07 11:02 1次下载

    使用基于ESP32Web服务器的互联网控制LED

    电子发烧友网站提供《使用基于ESP32Web服务器的互联网控制LED.zip》资料免费下载
    发表于 12-20 10:09 2次下载
    使用基于<b class='flag-5'>ESP32</b>的<b class='flag-5'>Web</b><b class='flag-5'>服务器</b>的互联网控制LED

    使用ESP32 Web服务器进行家庭自动化设置

    电子发烧友网站提供《使用ESP32 Web服务器进行家庭自动化设置.zip》资料免费下载
    发表于 07-03 10:49 0次下载
    使用<b class='flag-5'>ESP32</b> <b class='flag-5'>Web</b><b class='flag-5'>服务器</b>进行家庭自动化设置