准备

手边有一块WeMos D1，上面是esp8266的wifi模块
arduino官方库提供了esp8266的Broad库，便于快速开发

安装步骤：
文件 -> 首选项 -> 附加开发板管理器网址：http://arduino.esp8266.com/stable/package_esp8266com_index.json
工具 -> 开发板 -> 开发板管理器 -> 选择安装：esp8266 by ESP8266 Community

选择对应开发板：WeMos D1

代码

该示例仅是简单使用esp8266建一个小网页，用网页控制led灯
只是为了用最简单的例子入门

1.作为终端

中文注释为比较重要的操作，关键步骤列有序号
将wemos d1作为终端，连入wifi，用其它设备接入同一wifi下进行控制

/*This sketch demonstrates how to set up a simple HTTP-like server.The server will set a GPIO pin depending on the requesthttp://server_ip/gpio/0 will set the GPIO2 low,http://server_ip/gpio/1 will set the GPIO2 highserver_ip is the IP address of the ESP8266 module, will beprinted to Serial when the module is connected.
*/#include <ESP8266WiFi.h>const char* ssid = "##这里是自己的路由器WIFI名称##";
const char* password = "##WIFI密码##";// Create an instance of the server
// specify the port to listen on as an argument
WiFiServer server(80);void setup() {// 初始化串口，只是显示一些打印的状态消息Serial.begin(115200);delay(10);// prepare GPIO2// 控制片上led灯的引脚pinMode(2, OUTPUT);digitalWrite(2, 0);// Connect to WiFi networkSerial.println();Serial.println();Serial.print("Connecting to ");Serial.println(ssid);// 1.设置wifi模式为终端WiFi.mode(WIFI_STA);// 2.连接wifiWiFi.begin(ssid, password);
//  WiFi.softAP(ssid, password);  // 开AP热点// 显示连接状态while (WiFi.status() != WL_CONNECTED) {delay(500);Serial.print(".");}Serial.println("");Serial.println("WiFi connected");// Start the server// 3.启动服务server.begin();Serial.println("Server started");// Print the IP addressSerial.println(WiFi.localIP());
}void loop() {// Check if a client has connected// 4.循环获取连接到此服务的客户端(就是其它设备的连接对象)WiFiClient client = server.available();if (!client) {return;}// Wait until the client sends some dataSerial.println("new client");while (!client.available()) {delay(1);}// Read the first line of the request// 5.读取请求的地址数据String req = client.readStringUntil('\r');Serial.println(req);client.flush();     // 清空客户端数据// Match the request// 6.在此对不同的请求地址做不同的处理(不同页面地址请求，做出不同的处理)int val;if (req.indexOf("/gpio/0") != -1) { // 硬件控制val = 0;} else if (req.indexOf("/gpio/1") != -1) {  // 硬件控制val = 1;}// 7.控制页面，在此显示一个UI界面页面，点击不同的按键，用一个<iframe>执行一个页面跳转激活上面的相应地址，实现页面请求，控制硬件else if(req.indexOf("/") != -1){  // 控制页面String IPAdress = WiFi.localIP().toString();String html = "<html> <body>";html += "<script>function sendOp(value){document.getElementById('op').src = 'http://" + IPAdress + "/gpio/' + value;}</script>";html += "<button οnclick='sendOp(1)'>led off</button>";html += "<button οnclick='sendOp(0)'>led on</button>";html += "<iframe id='op' src='' width='0' height='0' style='border:0px' />";html += "</body></html>>";// 8.返回html页面给客户端显示client.print(html);}else {Serial.println("invalid request");client.stop(); // 请求完后，可以停止return;}// Set GPIO2 according to the request// 根据val值(上面不同页面请求设置)，控制小灯digitalWrite(2, val);// 清空客户端数据client.flush();// Prepare the response// 通过页面显示灯的状态
//  String s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\nGPIO is now ";
//  s += (val) ? "high" : "low";
//  s += "</html>\n";// Send the response to the client
//  client.print(s);delay(1);Serial.println("Client disonnected");// The client will actually be disconnected// when the function returns and 'client' object is detroyed
}

通过其它设备，连入相同的wifi下，用浏览器访问wemos d1的的ip，即可控制控制板的片上小灯（wemos d1的ip可通过串口查看到我们输出的ip）

2.作为热点

将wemos d1作为热点，用其它设备接入连入该热点的wifi，进行控制

/*This sketch demonstrates how to set up a simple HTTP-like server.The server will set a GPIO pin depending on the requesthttp://server_ip/gpio/0 will set the GPIO2 low,http://server_ip/gpio/1 will set the GPIO2 highserver_ip is the IP address of the ESP8266 module, will beprinted to Serial when the module is connected.
*/#include <ESP8266WiFi.h>const char* ssid = "youmux";
const char* password = "12345678";// Create an instance of the server
// specify the port to listen on as an argument
WiFiServer server(80);void setup() {Serial.begin (115200);pinMode(2, OUTPUT);digitalWrite(2, 0);// 设置内网IPAddress softLocal(192,168,128,1);IPAddress softGateway(192,168,128,1);IPAddress softSubnet(255,255,255,0);WiFi.softAPConfig(softLocal, softGateway, softSubnet);WiFi.softAP(ssid,password);IPAddress myIP = WiFi.softAPIP();Serial.print("AP IP address: ");Serial.println(myIP);server.begin(); // 启动服务
}void loop() {// Check if a client has connectedWiFiClient client = server.available();if (!client) {return;}// Wait until the client sends some dataSerial.println("new client");while (!client.available()) {delay(1);}// Read the first line of the requestString req = client.readStringUntil('\r');Serial.println(req);client.flush();// Match the requestint val;if (req.indexOf("/gpio/0") != -1) { // 硬件控制val = 0;} else if (req.indexOf("/gpio/1") != -1) {  // 硬件控制val = 1;} else if(req.indexOf("/") != -1){  // 控制页面String IPAdress = WiFi.localIP().toString();String html = "<html> <body>";html += "<script>function sendOp(value){document.getElementById('op').src = 'http://" + IPAdress + "/gpio/' + value;}</script>";html += "<button οnclick='sendOp(1)'>led off</button>";html += "<button οnclick='sendOp(0)'>led on</button>";html += "<iframe id='op' src='' width='0' height='0' style='border:0px' />";html += "</body></html>>";client.print(html);}else {Serial.println("invalid request");client.stop();return;}// Set GPIO2 according to the requestdigitalWrite(2, val);client.flush();// Prepare the responseString s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\nGPIO is now ";s += (val) ? "high" : "low";s += "</html>\n";// Send the response to the client
//  client.print(s);delay(1);Serial.println("Client disonnected");// The client will actually be disconnected// when the function returns and 'client' object is detroyed
}

通过其它设备，连入wemos开启的热点的wifi下（wifi名称：youmux wifi密码：12345678），用浏览器访问wemos d1的的ip：192.168.0.1或是192.168.1.1，即可控制控制板的片上小灯

参考：主要参考官方的例程，以及这篇文章: http://www.windworkshop.cn/?p=1215

esp8266基本使用 - WebServer相关推荐

【蒲公英技术征文】如何在 ESP-12F/ESP8266 上实现 webserver
本文将演示如何在一个 ESP-12F 模块上实现webserver,并且可以通过web请求对与模块连接的继电器进行控制. 0.写在前面首先,假设本文的读者了解C语言.逻辑电路和HTTP协议.再次,本 ...
【ESP 保姆级教程】疯狂传感器篇 —— 案例：ESP8266 + MQ2烟雾传感器 + webserver（局域网内曲线变化图）
忘记过去,超越自己 ❤️ 博客主页单片机菜鸟哥,一个野生非专业硬件IOT爱好者 ❤️ ❤️ 本篇创建记录 2022-04-22 ❤️ ❤️ 本篇更新记录 2022-04-22 ❤️
【ESP 保姆级教程】疯狂传感器篇 —— 案例：ESP8266 + MQ2烟雾传感器 + webserver（局域网内曲线变化图）+ 自定义微信告警
忘记过去,超越自己 ❤️ 博客主页单片机菜鸟哥,一个野生非专业硬件IOT爱好者 ❤️ ❤️ 本篇创建记录 2022-05-01 ❤️ ❤️ 本篇更新记录 2022-05-01 ❤️
ESP8266的Web配网以及强制门户的实现（连接wifi自动打开网页）
目录前言 Web配网详解强制门户详解完整代码实验效果前言 1.Web配网概述在应用到esp8266的场景,往往与wifi是离不开的,但用户的wifi账号密码又无从知晓,于是乎有了配网. 目 ...
ESP8266Web配网（连接wifi自动打开网页）
前言 1.Web配网概述在应用到esp8266的场景,往往与wifi是离不开的,但用户的wifi账号密码又无从知晓,于是乎有了配网. 目前,市面上的配网方式多种多样,但其中博主觉得成功率最高,最方便 ...
最简单DIY基于ESP8266的物联网智能小车①（webserver服务器网页简单遥控版）
ESP8266和ESP32物联网智能小车开发系列文章目录第一篇:最简单DIY基于ESP8266的物联网智能小车①(webserver服务器网页简单遥控版) 文章目录 ESP8266和ESP32物联网 ...
ESP8266开发之旅 WebServer篇⑥ DS18B20 Web Server
文章目录 1.前言 2.Installing Libraries for DS18B20 3.代码 4.测试结果授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享 ...
ESP8266开发之旅网络篇⑪ WebServer——ESP8266WebServer库的使用
授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... 共同学习成长QQ群 622368884,不喜勿 ...
ESP8266 webserver
简单测试了一下,还不错.连上ESP8266的热点,打开IE浏览器地址栏输入192.168.4.1回车可看到HTTP测试成功字样.使用其他的浏览器(谷歌)结果会下载一个文件,打开下载的文件可看到成功字 ...
【ESP 保姆级教程】疯狂传感器篇 —— 案例：ESP8266 + MQ3酒精传感器 + webserver（局域网内曲线变化图）+ 自定义飞书告警
忘记过去,超越自己 ❤️ 博客主页单片机菜鸟哥,一个野生非专业硬件IOT爱好者 ❤️ ❤️ 本篇创建记录 2022-05-03 ❤️ ❤️ 本篇更新记录 2022-05-03 ❤️

esp8266基本使用 - WebServer

准备

代码

1.作为终端

2.作为热点

esp8266基本使用 - WebServer相关推荐

最新文章

热门文章