[ESP8266网页服务器](一)搭建网页服务器

已于 2022-05-01 15:16:38 修改
阅读量6.2k 收藏 77
点赞数 14
分类专栏： 嵌入式硬件 文章标签： 嵌入式硬件 c语言 单片机
于 2022-04-02 22:02:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xanadw/article/details/123883095
版权

系列文章目录

[ESP8266网页服务器](一):搭建网页服务器

[ESP8266网页服务器](二):串口控制Arduino板

目录

系列文章目录

[ESP8266网页服务器](一):搭建网页服务器

[ESP8266网页服务器](二):串口控制Arduino板

前言

 一、Arduino添加ESP8266开发板

二、修改页面

总结

前言

        ESP8266可以算是比较常见的带有wifi功能的开发板了，关键是这个是真的便宜，某宝12块左右。不过这个系列的板子型号是真的多，我用的是下面这款，可以直接使用Generic ESP8266 Module这个型号。

 一、Arduino添加ESP8266开发板

        首先，需要在Arduino中增加ESP8266的开发板信息网址。

http://arduino.esp8266.com/stable/package_esp8266com_index.json

        然后，需要在Arduino开发板管理器中增加ESP8266。搜索栏直接输入ESP8266，搜索完毕后选择最新的版本安装。 

安装完毕后，在开发板管理器里面选择ESP8266 Boards，并且选择第一种型号。

二、修改页面

        ESP8266在Arduino自带一个HelloServer的例子，我们可以基于这个例子进行修改成我们想要的程序。

        初始化配置我们的参数，记得修改我们的wifi名称STASSID和密码STAPSK。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

#ifndef STASSID
#define STASSID "*"
#define STAPSK  "*"
#endif

const char* ssid = STASSID;
const char* password = STAPSK;

//建立80端口的server服务
ESP8266WebServer server(80);

        接着我们需要对我们的setup()函数进行处理。配置串口的波特率，以及wifi的相关配置，最主要是需要配置我们网页页面的处理函数，通过server.on(,)这个函数配置完毕后，点击相应的按钮就能触发相应的页面处理。

void setup(void) {
  //配置串口波特率
  Serial.begin(9600);
  WiFi.mode(WIFI_STA);
  //配置wifi名称和密码
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  //配置默认页面的处理函数
  server.on("/", MotorControllPage);
  //配置点击相应的按钮跳转页面处理函数
  server.on("/MOTOR_CONTROL", MotorControl);
  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTP server started");
}

        对应的默认页面"/"的处理函数MotorControllPage。

void MotorControllPage() {
  server.send(200, "text/html", motor_html);
}

        我们如果要发送页面文件到对应终端的话，需要用text/html格式发送数据。这里我把控制页面motor_html转换成字符串存储到我们代码里面。

const String motor_html = "<html>\
  <head>\
    <meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\">\
    <title>照明系统</title>\
    <style>\
      body { background-color: #FFFFFF; font-family: Arial, Helvetica, Sans-Serif; Color: #1E90FF; }\
    </style>\
  </head>\
  <body>\
    <h1 style=\"font-size:60px;text-align:center;\">ESP8266电机控制</h1>\
    <div align=\"center\">\
      <form action=\"MOTOR_CONTROL\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_1_FWD\" value=\"电机一正转\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_1_REV\" value=\"电机一反转\">\
      </form>\
      <form action=\"MOTOR_CONTROL\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_2_FWD\" value=\"电机二正转\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_2_REV\" value=\"电机二反转\">\
      </form>\
      <form action=\"MOTOR_CONTROL\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_3_FWD\" value=\"电机三正转\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_3_REV\" value=\"电机三反转\">\
      </form>\
      <form action=\"MOTOR_CONTROL\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_STOP\" value=\"停止电机\">\
      </form>\
    </div>\
  </body>\
</html>";

        这里需要注意是页面的所有双引号转换成字符串的时候都需要使用转义字符\，然后我这边增加了8个按钮，所有按钮点击之后都统一跳转到/MOTOR_CONTROL页面进去处理，所以需要在setup()函数里面配置这个页面的处理，也就是说你在终端点击之后，服务器所有要干的事情都可以在这个函数里面做，我这边是在串口输出终端input标签的name数据，因为我是通过esp8266的串口跟其它芯片通信，控制步进电机，我只需要name就知道是控制哪个电机，并且是让电机正转还是反转。

void MotorControl(void) {
  Serial.println(server.argName(0));
  //把页面重新发送给终端，保持相同的网页
  server.send(200, "text/html", motor_html);
}

        最后增加一个页面如果没有找到的处理函数。

void handleNotFound() {
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
}

        主函数的话只需要很少的操作，一直处理终端发送过来的信息，如果有匹配的页面调取相应的处理函数。

void loop(void) {
  server.handleClient();
}

        最后附上一个完整的程序代码。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

#ifndef STASSID
#define STASSID "*"
#define STAPSK  "*"
#endif

const char* ssid = STASSID;
const char* password = STAPSK;

//建立80端口的server服务
ESP8266WebServer server(80);

const String motor_html = "<html>\
  <head>\
    <meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\">\
    <title>照明系统</title>\
    <style>\
      body { background-color: #FFFFFF; font-family: Arial, Helvetica, Sans-Serif; Color: #1E90FF; }\
    </style>\
  </head>\
  <body>\
    <h1 style=\"font-size:60px;text-align:center;\">ESP8266电机控制</h1>\
    <div align=\"center\">\
      <form action=\"MOTOR_CONTROL\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_1_FWD\" value=\"电机一正转\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_1_REV\" value=\"电机一反转\">\
      </form>\
      <form action=\"MOTOR_CONTROL\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_2_FWD\" value=\"电机二正转\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_2_REV\" value=\"电机二反转\">\
      </form>\
      <form action=\"MOTOR_CONTROL\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_3_FWD\" value=\"电机三正转\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_3_REV\" value=\"电机三反转\">\
      </form>\
      <form action=\"MOTOR_CONTROL\">\
        <input type=\"submit\" style=\"margin-top:50px;font-style:italic;font-size:60px;text-align:center;color:#EE9A00\" name=\"MOTOR_STOP\" value=\"停止电机\">\
      </form>\
    </div>\
  </body>\
</html>";

void MotorControllPage() {
  server.send(200, "text/html", motor_html);
}

void MotorControl(void) {
  Serial.println(server.argName(0));
  //把页面重新发送给终端，保持相同的网页
  server.send(200, "text/html", motor_html);
}

void handleNotFound() {
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
}

void setup(void) {
  //配置串口波特率
  Serial.begin(9600);
  WiFi.mode(WIFI_STA);
  //配置wifi名称和密码
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  //配置默认页面的处理函数
  server.on("/", MotorControllPage);
  //配置点击相应的按钮跳转页面处理函数
  server.on("/MOTOR_CONTROL", MotorControl);
  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
}

总结

         以上就是我通过esp8266里面HelloServer的示例，搭建一个控制步进电机的页面服务器，不过还存在一个问题，就是如果我们点击一个按钮之后，没等这个页面刷新或者另外一个单片机执行完毕这个动作，继续一直点击这个按钮，你点多少次，它就会发送多少次给我们另外的一个单片机。另外一点就是你点击按钮之后，页面已经跳转到了MOTOR_CONTROL页面，你点击浏览器刷新的话会再发送一次你上一次点击的按钮的。

NodeMCU ESP8266构建Web Server网页端控制设备
一名热爱技术的工程师的博客。分享技术干货，记录美好生活。永远相信美好的事情即将发生。
11-20 4490
内部集成了TCP/IP协议栈，可以快速构建网络功能，搭建联网应用的硬件平台；Station本文我们将把ESP8266配置为接入点（Station），自动连接到局域网中，实现通过网页端控制板载LED的亮和灭。
esp8266搭建web服务器
weixin_55838038的博客
04-07 1348
esp8266搭建web服务器
ESP8266搭建简易web服务器
热门推荐
一个人要像一支队伍
10-18 3万+
ESP8266是个集成了LWIP协议栈的WIFI模块，利用它很容易就完成了物联网的功能。 要搭建web服务器就必须支持HTTP协议。 但是ESP8266官网提供的例子只能支持TCP，不直接支持HTTP。 那么，就需要自己利用TCP来完成HTTP的请求包和响应包。 一、搭建ESP8266的SDK开发环境。 下载并安装集成IDE，AiThinkerIDE_V0.5。 下载并安装Flash下...
ESP8266 ArduinoIDE 搭建web服务器与客户端开发
nullccc的博客
01-15 4813
在 2.2 的点灯案例中，我们编写了 handleLED 函数。对于这个库来说，POST 请求枚举类型是 3，所以返回了method:3，auth 也验证通过。在之前我们基本使用了 ESP8266WebServer 库的功能，下面我们来配合案例详细了解这个库的 API。在这里改写了根目录，他会向客户端发送一个按钮的页面，点击即向 "/LED" 路由下发送 POST 请求。此模式中，esp8266 会开启一个指定名称和密码的热点进行工作。他在给 LED 取反后又重定向到根目录，即可实现我们的效果。
学习使用ESP8266进行MQTT通信并在网页上可视化显示
最新发布
2301_76165902的博客
03-06 713
ESP8266 可以利用串口与单片机进行通讯， 可以访问一些 API，获取天气信息也可以连接云平台进行开发。有很高的开发效益，以及可玩性
使用ESP8266/ESP8285做一个WIFI中继（WiFi信号放大器）
lsalp的博客
07-03 8320
准备一个深圳四博智联科技有限公司的ESP-F 模组。或者四博智联科技的NODEMCU 当我们拿到ESP-F模块后，可以按照以下接线进行测试： 即VCC、EN 接 3.3v、GPIO15 GND 接地、模块的 TX、RX 接串口工具的 RX、TX、RST 引脚低电平复位，不需要的IO脚位可以悬空、如果要下载模块里面的固件请把GPIO0做拉低处理（温馨提示：如果您购买的是ESP...
基于esp8266的精简web服务器
02-07
此代码为基于esp8266的web服务器，使用的是Free RTOS实时操作系统，以web页面控制led灯为例子，适合于毕业设计加分
ESP8266（NodeMCU）建立最简单的网页
青烨慕容
05-11 3685
  通常承担网络服务器工作的设备都是运算能力比较强大的F服务器电脑。ESP866-NodeMCU虽然也能实现网络服务器的一些功能，但是毕竟它的运算能力是无法与那些昂贵的服务器电脑相媲美的，因此ESP8266-NodeMCU只能实现一些基本的网络服务功能。   下面例程使用ESP8266建立最简单的网页，在串口输出相关的IP信息，通过浏览器访问地址查看网页。 代码来源，太极创客： #include <ESP8266WiFi.h> // 本程序使用 ESP8266WiFi库 #inc
esp8266做网页服务器,ESP8266 – ESP8266WebServer库
weixin_35974411的博客
08-12 2729
位置导航: ESP8266库 / 本页ESP8266WebServer库用于HTTP协议通讯。通过ESP8266WebServer库，我们可以使用ESP8266开发板建立网络服务器,从而允许其它网络设备以及物联网设备通过HTTP协议访问并实现物联网信息交流。假如您需要了解如何使用ESP8266开发板拉通过ESP8266WebServer库建立网络服务器以实现物联网应用，欢迎您收看太极创客团队制作的...
ESP8266学习（二）——ESP8266创建网络服务器
weixin_68362857的博客
12-18 1759
先是设置当前环境下可以连接的wifi信号，包括其WIFI名称以及密码，这里列出三个。handleroot函数中通过html超文本代码，在网页中创建了一个按钮，为“light LED”，用户按下按钮时，会不断刷新会主页面。由下图可知esp8266所在IP地址为：192.168.148.163，后续通过浏览器访问该地址即可获得相应服务。首先开启网站服务，在设置打开时位于根目录，接着创建一个操作，用来应对浏览器的POST操作。是否连接成功，成功后通过串口输出响应的IP地址以便后续的操作。
TPYBoard v202-Web服务器.rar_TPYBoard_esp8266_esp8266 网页_tpyboard202
09-24
**TPYBoard v202 Web服务器搭建指南** 在物联网(IoT)领域，使用微控制器构建嵌入式Web服务器是一种常见的实践，它允许设备通过网络进行数据交换和远程控制。本指南将深入探讨如何利用MicroPython编程语言和TPYBoard...
Esp8266进阶之路【小实战上篇】Windows系统搭建8266的本地Mqtt服务器，局域网点亮一盏LED灯。CSDN博客
12-11
Esp8266进阶之路【小实战上篇】Windows系统搭建8266的本地Mqtt服务器，局域网点亮一盏LED灯。CSDN博客 http://blog.csdn.net/xh870189248/article/details/78761948
esp8266 web服务器视频
11-21
基于ESP8266的web服务器开发，视频教程，搭建智能家居
stm32与esp8266搭建tcp服务器
10-16
使用到的设备有：stm32f103c8t6、esp826601s模块、usb转TTL模块 stm32与esp8266搭建tcp服务器 可看到esp8266建立WiFi热点为：Mypro Ip地址：192.168.1.1
ESP8266开发，实现MQTT客户端，与MQTT服务器通信，断线重连
08-30
总之，本项目提供了一套完整的解决方案，使开发者能够利用ESP8266快速搭建物联网系统，通过MQTT协议与服务器进行可靠的数据交互，并具备断线自动重连的能力。通过深入理解和实践这些文件和代码，开发者可以进一步...
espws_server:支持多连接的 ESP8266 Websocket 服务器
06-12
支持多连接的 ESP8266 Websocket 服务器 这是一个轻量级的 websocket 服务器库。 适用于 ESP8266 - 小巧但功能强大的 wifi SoC！ 它实际上是从许多优秀的参考资料中移植过来的： （主要基于） - 一个轻量级的 ...
11- ESP8266建立灯控web服务器
dangerqsq的博客
03-02 1466
可以以非常容易的将MCU接入网络，在没有公网（全球访问）资源的情况下，内网直连操作也是比较常见的做法。现在我们来实现，通过在局域网内访问mcu芯片，通过网页对LED灯的开关进行控制，如下图。需要注意的是：当灯光当前为亮起时，页面的灯光状态为开，但按钮显示的应该是关，使得用户知道按下去时的作用。1）新建项目，Lot_web_ctrl_v1.0，修改串口波特率，导入WiFiManager扩展库。配网成功后，当有客户端http请求后，向客户端写HTML代码，客户通过浏览器端显示页面。2）导入DHT传感器库。
esp8266 利用HTTPD建立WEB服务器
08-25 1077
写该博客，目的就是纪念一下，自己成功的在8266设备内部集成WEB管理功能，类似于家用路由器，通过网页浏览器登陆设备，实现对设备进行状态监视、参数设置、固件升级等功能。在这过程中，让我深入的了解到web服务器的前端和后端开发，我采用的是HTML+CSS+JavaScript开发前端，用AJax与服务器交互，不用整体刷新页面，而后端处理，采用的是CGI; ...
ESP8266 webserver
小赵
12-15 4630
简单测试了一下，还不错。连上ESP8266的热点，打开IE浏览器地址栏输入192.168.4.1回车可看到 HTTP测试成功 字样。使用其他的浏览器(谷歌)结果会下载一个文件，打开下载的文件可看到成功字样，不知道什么情况，我html小白一枚。下面是程序，很简单。 全局变量 uint8_t http_head[] = "HTTP/1.1 200 OK\r\n\r\nHTTP测试成功"; str
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xanadw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值