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

已于 2022-05-01 15:16:38 修改
阅读量5.7k 收藏 68
点赞数 12
分类专栏： 嵌入式硬件 文章标签： 嵌入式硬件 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页面，你点击浏览器刷新的话会再发送一次你上一次点击的按钮的。

xanadw
关注
  • 12
    点赞
  • 踩
  • 68
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
NodeMCU ESP8266构建Web Server网页端控制设备
一名热爱技术的工程师的博客。分享技术干货，记录美好生活。永远相信美好的事情即将发生。
11-20 3905
内部集成了TCP/IP协议栈，可以快速构建网络功能，搭建联网应用的硬件平台；Station本文我们将把ESP8266配置为接入点（Station），自动连接到局域网中，实现通过网页端控制板载LED的亮和灭。
ESP8266上传DHT11数据给私人javaweb服务器实现网页查询数据的电路方案
niruxi0401的博客
07-03 1381
系列文章目录 第一章ESP8266的java软件仿真测试 第二章ESP8266硬件与软件测试 第三章ESP8266客户端与Java后台服务器联调 第四章ESP8266客户端与JavaWeb服务器联调 第五章ESP8266客户端与JavaWeb服务器网页联调 文章目录系列文章目录前言一、物联网单片机客户端与网站结合是什么？二、使用步骤1.引入库2.读入数据总结 前言 daodanjishui物联网核心原创技术之物联网服务器网站部署 一、物联网单片机客户端与网站结合是什么？ 本文在第四章介绍了ESP
esp8266做网页服务器,ESP8266 – ESP8266WebServer库
weixin_35974411的博客
08-12 2540
位置导航: ESP8266库 / 本页ESP8266WebServer库用于HTTP协议通讯。通过ESP8266WebServer库，我们可以使用ESP8266开发板建立网络服务器,从而允许其它网络设备以及物联网设备通过HTTP协议访问并实现物联网信息交流。假如您需要了解如何使用ESP8266开发板拉通过ESP8266WebServer库建立网络服务器以实现物联网应用，欢迎您收看太极创客团队制作的...
推荐开源项目：ESP8266Web - 超小型ESP8266 Web服务器
最新发布
gitblog_00090的博客
05-28 419
推荐开源项目：ESP8266Web - 超小型ESP8266 Web服务器 项目地址:https://gitcode.com/pvvx/esp8266web 1、项目介绍 ESP8266Web是一个高效而小巧的Web服务器，专为ESP8266 Wi-Fi微控制器设计。它支持HTTP和WebSocket协议，可用于各种I/O、WiFi和系统变量的实时监控与控制。通过TCP2UART或Modbus R...
esp8266网络服务器
m0_67799263的博客
04-06 194
用到的库。
ESP8266--Arduino开发（搭建HTTP网络服务器）
贝勒里恩的博客
11-14 4090
超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上，它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应，，我们使用浏览器打开的网页使用的就是HTTP协议。接下来我们会参数在ESP8266-NodeMCU上建立一个HTTP网络服务器，然后通过浏览器来访问它。
11- ESP8266建立灯控web服务器
dangerqsq的博客
03-02 1252
可以以非常容易的将MCU接入网络，在没有公网（全球访问）资源的情况下，内网直连操作也是比较常见的做法。现在我们来实现，通过在局域网内访问mcu芯片，通过网页对LED灯的开关进行控制，如下图。需要注意的是：当灯光当前为亮起时，页面的灯光状态为开，但按钮显示的应该是关，使得用户知道按下去时的作用。1）新建项目，Lot_web_ctrl_v1.0，修改串口波特率，导入WiFiManager扩展库。配网成功后，当有客户端http请求后，向客户端写HTML代码，客户通过浏览器端显示页面。2）导入DHT传感器库。
TPYBoard v202-Web服务器.rar_TPYBoard_esp8266_esp8266 网页_tpyboard202
09-24
**TPYBoard v202 Web服务器搭建指南** 在物联网(IoT)领域，使用微控制器构建嵌入式Web服务器是一种常见的实践，它允许设备通过网络进行数据交换和远程控制。本指南将深入探讨如何利用MicroPython编程语言和TPYBoard...
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协议与服务器进行可靠的数据交互，并具备断线自动重连的能力。通过深入理解和实践这些文件和代码，开发者可以进一步...
esp8266 web服务器视频
11-21
基于ESP8266的web服务器开发，视频教程，搭建智能家居
ESP8266_WebGen:设计一个网站，然后将其嵌入到ESP8266固件中
04-30
ESP8266_WebGen 设计一个网站，然后将其嵌入到ESP8266固件中。 现在，该项目分为三个不同的草图： AdvancedWebServerHuzzah：这是一个非常基本的示例，可让您选择充当接入点还是wifi客户端。 AdvancedWebServerHuzzah_APandClient：此示例与基本示例类似，不同之处在于它具有在访问点之间切换或提供SSID和（可选）密码的功能。 这也提供了有关如何使用jQuery和代码实现的URL处理程序在网页上包含动态内容的示例。 该技术仍将网页作为C数组嵌入PROGMEM中。 AdvancedWebServerHuzzah_SPIFFS：这最后一种技术使用SPIFFS闪存文件系统在FLASH存储器中实现网站，以便可以像检索外部SD卡上的文件一样检索项目。 SPIFFS编写实用程序（可以按照说明将其添加到ArduinoIDE中）似乎
通过MQTT协议实现STM32+ESP8266和服务器的数据传输.zip
10-17
本项目"通过MQTT协议实现STM32+ESP8266和服务器的数据传输"就是这样一个典型的案例，它利用MQTT（Message Queuing Telemetry Transport）协议，让STM32与服务器进行数据交换。 MQTT是一种轻量级的发布/订阅模型的...
ESP8266离线包3.0.1
11-21
4. **示例项目**：为了帮助初学者快速上手，离线包可能还包括了一些预设的示例代码，涵盖了从简单的LED控制到复杂的Web服务器搭建等应用。 5. **文档**：可能包含ESP8266的官方文档、API参考手册以及一些社区共享的...
11_ESP8266_CSDN_MQTT_2.zip_esp8266_esp8266 mqtt_mqtt_mqtt 服务器_服务
09-15
1. MQTT服务器搭建： - 我们可以使用开源的MQTT服务器软件，例如Mosquitto。首先，从官方网站下载并安装适用于Windows的Mosquitto服务器软件。 - 安装完成后，配置服务器设置，如端口号（默认1883）、访问控制等。...
10_ESP8266_MQTT_CSDN_1.zip_8266_esp8266_mqtt esp8266_mqtt 服务器_mq
09-15
可能还有一个配置文件或README文档，提供了服务器搭建和连接的详细步骤。 总的来说，通过这个教程，你可以学习到如何利用ESP8266和MQTT技术在本地网络中构建一个简单的IoT应用。这不仅有助于理解MQTT协议的工作原理...
esp8266网页服务器,【零知ESP8266】教程：HTTP WEB服务器示例
weixin_29798865的博客
08-05 1406
本帖最后由 lz-esp-link 于 2019-6-20 11:55 编辑1、概述HTTP web server作为ESP8266的一个常用功能，在这里使用零知开源平台进行该示例的演示。2、软件和硬件硬件使用零知-ESP8266；软件使用零知开发工具，自带示例：示例.jpg (133.74 KB, 下载次数: 8)2019-6-20 11:48 上传3、方法步骤(1)先在零知开发工具中打开Adv...
ESP8266 webserver
小赵
12-15 4545
简单测试了一下，还不错。连上ESP8266的热点，打开IE浏览器地址栏输入192.168.4.1回车可看到 HTTP测试成功 字样。使用其他的浏览器(谷歌)结果会下载一个文件，打开下载的文件可看到成功字样，不知道什么情况，我html小白一枚。下面是程序，很简单。 全局变量 uint8_t http_head[] = "HTTP/1.1 200 OK\r\n\r\nHTTP测试成功"; str
ESP8266开发（3）——如何在电脑上搭建简易TCP服务器
qq_41904236的博客
09-26 2905
ESP8266作为一款能直接连接wifi的NodeMCU，常常作为系统中的客户端用以接收服务器发送的信息，因此本文先记录学习如何在个人电脑PC上搭建简易的服务器。
安信可esp8266使用网页代码
05-25
安信可ESP8266可以使用网页代码，可以通过ESP8266的WiFi模块连接网络，然后使用HTML、CSS和JavaScript等前端技术编写网页，再通过ESP8266的Web服务器将网页部署到ESP8266上。 在ESP8266中，可以使用Arduino IDE进行编程，可以通过ESP8266WiFi库来实现WiFi连接和Web服务器功能。通过下面的代码，你可以在ESP8266上搭建一个简单的Web服务器，提供一个网页： ```c++ #include <ESP8266WiFi.h> const char* ssid = "your_SSID"; const char* password = "your_PASSWORD"; WiFiServer server(80); void setup() { Serial.begin(9600); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); server.begin(); Serial.println("Web server started"); } void loop() { WiFiClient client = server.available(); if (client) { Serial.println("New client connected"); client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(""); client.println("<html><body><h1>Hello, world!</h1></body></html>"); delay(10); client.stop(); Serial.println("Client disconnected"); } } ``` 在这个例子中，我们创建了一个Web服务器，当客户端连接到服务器时，服务器会向客户端发送一个包含“Hello, world!”的网页。当客户端断开连接时，服务器会停止。你可以将这个代码上传到ESP8266板子上，然后通过浏览器访问ESP8266的IP地址，就可以看到这个网页了。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

xanadw

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

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

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

打赏作者

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

抵扣说明：

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

余额充值