从零开始的ESP8266探索（1）-使用Server功能搭建Web Server

最新推荐文章于 2023-07-22 21:27:24 发布
最新推荐文章于 2023-07-22 21:27:24 发布
阅读量440 收藏 5
点赞数
原文链接：http://www.cnblogs.com/kekeoutlook/p/9572471.html
版权

https://blog.csdn.net/Naisu_kun/article/details/80398667

 

文件系统

https://blog.csdn.net/solar_Lan/article/details/74231360

 

 学习的网络知识

http://www.runoob.com/ajax/ajax-examples.html

 

#include <ESP8266WiFi.h>

/*** 该工程可以在2.4.0版本esp8266库中运行，没在更高版本库中进行测试 ***/

const char *ssid = "HUAWEI-H3VBKZ";
const char *password = "13991320168";

WiFiServer server(80);

String readString = ""; //建立一个字符串对象用来接收存放来自客户的数据

//响应头
String responseHeaders =
    String("") +
    "HTTP/1.1 200 OK\r\n" +
    "Content-Type: text/html\r\n" +
    "Connection: close\r\n" +
    "\r\n";

//网页
String myhtmlPage =
    String("") +
    "<html>" +
    "<head>" +
    "    <title>ESP8266 Web Server Test</title>" +    
    "    <script defer=\"defer\">" +
    "        function ledSwitch() {" +
    "            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(\"txtState\").innerHTML = xmlhttp.responseText;" +
    "                }" +
    "            }," +
    "            xmlhttp.open(\"GET\", \"Switch\", true);" +
    "            xmlhttp.send(); " +
    "        }" +
    "    </script>" +
    "</head>" +
    "<body>" +
    "    <div id=\"txtState\">Unkwon</div>" +
    "    <input type=\"button\" value=\"Switch\" οnclick=\"ledSwitch()\">" +
    "</body>" +
    "</html>";

bool isLedTurnOpen = false; // 记录LED状态

void setup()
{
    pinMode(D4, OUTPUT);
    digitalWrite(D4, HIGH); // 熄灭LED

    Serial.begin(115200);
    Serial.println();

    Serial.printf("Connecting to %s ", ssid);
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED)
    {
        delay(500);
        Serial.print(".");
    }
    Serial.println(" connected");

    server.begin();
    Serial.printf("Web server started, open %s in a web browser\n", WiFi.localIP().toString().c_str());
}

void loop()
{
    WiFiClient client = server.available(); //尝试建立客户对象
    if (client)                             //如果当前有客户可用
    {
        boolean currentLineIsBlank = true;
        Serial.println("[Client connected]");

        while (client.connected()) //如果客户端建立连接
        {
            if (client.available()) //等待有可读数据
            {
                char c = client.read(); //读取一字节数据
                readString += c;        //拼接数据
                /************************************************/
                if (c == '\n' && currentLineIsBlank) //等待请求头接收完成(接收到空行)
                {
                    //比较接收到的请求数据
                    if (readString.startsWith("GET / HTTP/1.1")) //如果是网页请求
                    {
                        client.print(responseHeaders); //向客户端输出网页响应
                        client.print(myhtmlPage);      //向客户端输出网页内容
                        client.print("\r\n");
                    }
                    else if (readString.startsWith("GET /Switch")) //如果是改变LED状态请求
                    {
                        if (isLedTurnOpen == false)
                        {
                            digitalWrite(D4, LOW); // 点亮LED
                            client.print("LED has been turn on");
                            isLedTurnOpen = true;
                        }
                        else
                        {
                            digitalWrite(D4, HIGH); // 熄灭LED
                            client.print("LED has been turn off");
                            isLedTurnOpen = false;
                        }
                    }
                    else
                    {
                        client.print("\r\n");
                    }
                    break;
                }

                if (c == '\n')
                {
                    currentLineIsBlank = true; //开始新行
                }
                else if (c != '\r')
                {
                    currentLineIsBlank = false; //正在接收某行中
                }
                /************************************************/
            }
        }
        delay(1);      //等待客户完成接收
        client.stop(); //结束当前连接:
        Serial.println("[Client disconnected]");

        Serial.println(readString); //打印输出来自客户的数据
        readString = "";
    }
}

　　

 

 

 

 

 

 

  

改进密码登录模式

 

 

#include <ESP8266WiFi.h>

/*** 该工程可以在2.4.0版本esp8266库中运行，没在更高版本库中进行测试 ***/

const char *ssid = "HUAWEI-H3VBKZ";
const char *password = "13991320168";

WiFiServer server(80);

String readString = ""; //建立一个字符串对象用来接收存放来自客户的数据

//响应头
String responseHeaders =
    String("") +
    "HTTP/1.1 200 OK\r\n" +
    "Content-Type: text/html\r\n" +
    "Connection: close\r\n" +
    "\r\n";

//网页
String myhtmlPage=
    String("") +
    "<html>" +
    "<head>" +
    "<meta charset=\"utf-8\">"+
    "    <title>ESP8266 配置信息</title>" +    
    "    <script defer=\"defer\">" +
    "        function ledSwitch() {" +
    "            var name = document.getElementById(\"wifiname\").value;"+
    "            var psw = document.getElementById(\"wifipwd\").value;"+       
    "            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(\"txtState\").innerHTML = xmlhttp.responseText;" +
    "                }" +
    "            }," +
    "            xmlhttp.open(\"GET\", \"Switch\"+name+psw, true);" +
    "            xmlhttp.send(); " +
    "        }" +
    "    </script>" +
    "</head>" +  
     "<body>" 
     
    "<h3>连接WIFI:</h3>"+
    
    "<form action=\"\"> "+
    "WIFI账号: <input type=\"text\" id=\"wifiname\"  />"+
    "</form>"+
    
    "<form action=\"\"> "+
    "WIFI密码: <input type=\"text\" id=\"wifipwd\"   />"+
    "</form>"+
    
    "<button type=\"button\" οnclick=\"ledSwitch()\"> 连接 </button>"+
    
    "<p>状态消息: <span id=\"txtState\"></span></p> "+

    "</body>" +
    "</html>";



bool isLedTurnOpen = false; // 记录LED状态

void setup()
{
    pinMode(D4, OUTPUT);
    digitalWrite(D4, HIGH); // 熄灭LED

    Serial.begin(115200);
    Serial.println();

    Serial.printf("Connecting to %s ", ssid);
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED)
    {
        delay(500);
        Serial.print(".");
    }
    Serial.println(" connected");

    server.begin();
    Serial.printf("Web server started, open %s in a web browser\n", WiFi.localIP().toString().c_str());
}

void loop()
{
    WiFiClient client = server.available(); //尝试建立客户对象
    if (client)                             //如果当前有客户可用
    {
        boolean currentLineIsBlank = true;
        Serial.println("[Client connected]");

        while (client.connected()) //如果客户端建立连接
        {
            if (client.available()) //等待有可读数据
            {
                char c = client.read(); //读取一字节数据
                readString += c;        //拼接数据
                /************************************************/
                if (c == '\n' && currentLineIsBlank) //等待请求头接收完成(接收到空行)
                {
                    //比较接收到的请求数据
                    if (readString.startsWith("GET / HTTP/1.1")) //如果是网页请求
                    {
                        client.print(responseHeaders); //向客户端输出网页响应
                        client.print(myhtmlPage);      //向客户端输出网页内容
                        client.print("\r\n");
                    }
                    else if (readString.startsWith("GET /Switch")) //如果是改变LED状态请求
                    {
                        if (isLedTurnOpen == false)
                        {
                            digitalWrite(D4, LOW); // 点亮LED
                            client.print("LED has been turn on");
                            isLedTurnOpen = true;
                        }
                        else
                        {
                            digitalWrite(D4, HIGH); // 熄灭LED
                            client.print("LED has been turn off");
                            isLedTurnOpen = false;
                        }
                    }
                    else
                    {
                        client.print("\r\n");
                    }
                    break;
                }

                if (c == '\n')
                {
                    currentLineIsBlank = true; //开始新行
                }
                else if (c != '\r')
                {
                    currentLineIsBlank = false; //正在接收某行中
                }
                /************************************************/
            }
        }
        delay(1);      //等待客户完成接收
        client.stop(); //结束当前连接:
        Serial.println("[Client disconnected]");

        Serial.println(readString); //打印输出来自客户的数据
        readString = "";
    }
}

　　

转载于:https://www.cnblogs.com/kekeoutlook/p/9572471.html

a83025273
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
esp8266-webserver:具有AJAX GPIO切换功能的ESP8266 Web服务器
05-21
## ESP8266具有AJAX GPIO切换功能的Web服务器 GPIO的状态未与用户界面实时同步。 仅在加载页面时才同步。 因此，切换GPIO的多个客户端将看不到GPIO的实际状态。 它只能由一个HTTP客户端操作。
ESP8266WebServer-Bootstrap-Bootswatch：ESP8266 Web服务器+ Bootstrap + Bootswatch
01-30
ESP8266WebServer-Bootstrap-Bootswatch项目是一个集成解决方案，旨在将ESP8266微控制器转变为一个功能齐全的Web服务器，同时利用Bootstrap框架和Bootswatch主题为用户提供美观的界面。这个项目的核心组件包括ESP...
Request Headers 和Response Headers——请求头和响应头
热门推荐
zyz00000000的博客
11-25 2万+
前沿 作为一个前端开发工程师看不懂每条请求的请求头和响应头，实在是一件很难受的事情。最近花了一些时间整理了一篇文档，一起来看看前后端交互时每个资源的信息。 谷歌浏览器调试工具——查看请求资源的信息数据 通过谷歌浏览器的调试工具，我们可以看到请求资源的以下信息： 下面来具体聊聊每个信息代表了什么，有什么作用。 根据上面的那条请求，分析里面一些重要的属性。我访问的是思否上的文章：比如：https://segmentfault.com/a/1190000017787636 一、General 综合
response Headers字段详解
it小白的博客
11-02 4541
在请求中，客户端可以通过设定”Range”头域来通知服务器其只想请求整个资源中某一段数据，而对应的，当服务器响应这种请求，并发送某一段数据到客户端的时候，必须通过Content-Range头来告诉客户端当前的响应数据是整个资源的第几byte到第几byte。Content-MD5 基于base64编码的回应数据的MD5校验和 Content- MD5:Q2hlY2sgSW50ZWdyaXR5IQ==
android 同ESP32进行基于TCP/IP的wifi通信示例
m0_52513940的博客
05-17 1433
请注意，在 `sendMessage()` 和 `appendMessageToTextView()` 方法中，我们都使用 `StandardCharsets.UTF_8` 将字符串编码为字节以支持包含中文字符的 UTF-8 编码消息。在这个示例中，我们使用 `Socket` 类创建了一个客户端套接字，然后连接到 ESP32 的 IP 地址和端口号。这个布局文件包含一个用于显示接收到的消息的 `TextView`、一个用于输入要发送的消息的 `EditText`、以及一个用于发送消息的 `Button`。
ESP8266之Wifi库ESP8266WiFi.h(Arduino)
suke_notes
10-31 1万+
联网功能 IPAddress ip(192, 168, 0, 200)创建一个IP地址，地址为192.68.0.200 WiFi.config(local, gateway, subnet)设置本地local，网关gateway以及子网掩码subnet，其中local, gateway和subnet都是IPAdress格式 WiFi.mode(mode)设置模式，参数mode可以选WIFI_STA也可选WIFI_AP Wifi.begin(ssid,password)启动WiFi功能，如果是STA模式，参
ESP8266-Multiple-Slider-Web-Server:ESP8266带有3个滑块的webserver示例。 可扩展的
04-14
ESP8266带有3个滑块的webserver示例。 可扩展。 来自： ：//randomnerdtutorials.com/esp32-servo-motor-web-server-arduino-ide/ 该示例显示了3个滑块，但是可以将其扩展为任意数量。 滑块的索引方式很粗鲁（为...
esp8266-fastled-webserver：通过Web浏览器或HomeBridge和HomeKit iOS设备使用ESP8266控制可寻址的LED灯条
02-03
使用ESP8266通过Web浏览器或HomeBridge和HomeKit iOS设备控制可寻址的LED灯条。 叉子的变化 为了使该库与HomeKit或更具体地与插件一起使用，需要两个额外的API路由： 一，用于十六进制颜色值（ /solidHexColor ） ...
esp-ota-server：ESP8266 ESP32 HTTP OTA服务器
02-05
ESP-OTA-服务器非常简单的OTA固件服务器，适用于内置和 。 主要目的是提供固件文件并传递MD5哈希值-以验证闪存。 选项： -s --bind监听地址（默认值:8092 ） -d --data-dir数据存储位置。 <data>/<project>/<file> ...
esp8266-fastled-webserver
02-08
FastLED + ESP8266 Web服务器使用ESP8266通过Web浏览器或红外遥控器控制可寻址的LED灯条。硬件ESP8266开发板要么可寻址LED灯条其他硬件： （如果LED“毛刺”，则需要） 由推荐，可帮助保护LED免受电流冲击：可选的...
nodemcu-httpserver：一个用Lua编写的，非常简单的Web服务器，用于ESP8266固件NodeMCU
02-03
用Lua编写的（非常）简单的Web服务器，用于运行NodeMCU固件的ESP8266。 ： 如果您尝试在ESP8266中实现用户界面或HTTP Web服务器，那么您实际上是在滥用其预期用途。 范围界定ESP8266应用程序时，确实有句格言“保持简单愚蠢”。 -Terry ，nodemcu固件维护者 让虐待开始吧。 产品特点 GET，POST，PUT（可以通过较小的更改来支持其他方法） 多种MIME类型 错误页面（404等） Lua脚本的服务器端执行 查询字符串参数解析和参数解码 提供.gz压缩文件 HTTP基本认证 在application / x-www-form-urlencoded和application / json中解码请求主体（如果cjson可用） 如何使用 修改配置文件httpserver-conf.lua的本地副本。 使用上传服务器文件。 最简单的方法是将GNU Make与捆绑的Makefile一起使用。 打开Makefile并修改用户配置，以指向您的nodemcu-uploader脚本和串行端口。 键入以下内容以上传服务器代码，init.lua（您可能要
使用ESP32S3在Arduino框架下通过TCP方式利用浏览器登录网页进行通信与操作
幻酌大大
07-03 1636
ESP32 + Arduino + TCP/IP + HTTP
【史上最全面esp32教程】网络篇和tcp/ip的使用
m0_62599305的博客
03-23 7148
ESP32史上最全面wifi和tcp/ip连接及示例程序
arduino 一次性读取serial_Arduino-Ethernet库学习笔记（3）
weixin_39926394的博客
11-26 778
在此之前可以阅读前篇博文Arduino-Ethernet库学习笔记(1)。这篇博文是关于该库的简介、调试工具之UDP/TCP网络调试助手NetAssist介绍、Postman介绍以及网络方面的小经验。Arduino-Ethernet库学习笔记(2)学习Arduino-Ethernet库中的Ethernet 类。下面来看IPAddress类和Server类。2 IPAddress类IPAddress...
ESP8266基于WebServer实时获取温湿度
GetcharZp的博客
08-29 1716
功能描述：通过在浏览器中访问ESP8266提供的服务来获取其实时的温湿度信息； 操作步骤： 第一步、将下面的代码烧录到Esp中； 第二步、打开串口调试工具查看该ESP8266的IP地址 第三步、访问 IP地址/index.html 这个网址来获取实时的温湿度 #include <ESP8266WiFi.h> const char* ssid = "Wi-Fi名称"; c...
记录使用ESP32做WiFi模块使用的学习
最新发布
qq_63790578的博客
07-22 3475
因为幅频特性题目的任务中要求制作使用WiFi传输的上位机，所以开始学习WiFi模块。这里使用了platform来进行开发，一开始使用了ESP8266但是8266每次掉电代码并不保存，这意味着我每次上电都要重新烧录代码，所以本人转而使用ESP32，二者的写法大同小异。一、WiFi的三种工作模式ESP32有三种工作模式：AP模式、STA模式以及AP+STA模式。简单来说AP模式就是ESP32产生一个WiFi信号，让电脑来连接；
I-002 智能家居系列--ESP8266环境搭建
医疗电子的博客
02-09 2936
NodeMCU简介. NodeMCU ,是一个开源的 物联网 平台。. 它使用 Lua 脚本语言编程。. 该平台基于eLua开源项目,底层使用ESP8266 sdk 0.9.5版本。该平台使用了很多开源项目, 例如 lua-cjson, spiffs. NodeMCU包含了可以运行在esp8266 Wi-Fi SoC 芯片之上的固件,以及基于ESP-12模组的硬件。 ESP8266芯片有17个GPIO引脚（GPIO0～GPIO16）。这些引脚中的GPIO6～GPIO 11被用于连接开发板的闪存（Flash
ESP32 SimpleWiFiServer
sudaroot的博客
04-07 1138
源码路径： C:\Program Files (x86)\Arduino\hardware\espressif\esp32\libraries\WiFi\examples\SimpleWiFiServer 啊啊 分析一下：
ESP32 用WIFi搭建TCP的Server和Client 代码
健忘16的博客
04-28 4986
1、WIFI Server code #include <Arduino.h> #include <wifi.h> #define HEART_PERIOD_SEC 180 #define TASK_PERIOD_SEC 5 #define PAYLOAD_BUFF_SIZE 50 #define SOCKET_RX_BUFF_SIZE 255 #define MAX_SRV_CLIENTS 4 #define MAX_AP_CONNECTS 10 #pragma pac
ESP8266新手快速入门：从零开始的物联网WiFi模块探索
在学习过程中，建议新手先从基础的Wi-Fi连接和串口通信开始实践，然后逐渐挑战更复杂的任务，如通过ESP8266控制GPIO口、实现云平台的接入等。随着对ESP8266的理解加深，你将能够利用它的强大功能，创造出各种创新的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值