首页 > 其他分享> 文章详细

简单实现Web控制ESP32，附入门最快的方式

2021-12-20 09:35:21 阅读：266 来源： 互联网

标签：Web 入门 ESP32 server println ajax test Serial

先看效果

typecho的markdown用不了html标签，只能放个直链了
视频直链

那时

很早以前就想玩这种东西了，那时候还没有5G，现在……我来了！

入门最快的方法

要问怎样入门最快？直接找好兄弟！

我：

QQ图片20211126224957.png

然后我就得到了：需要什么（硬件）、用什么（软件）……

再然后：给链接！

基本入门，达成。

硬件、环境

硬件：

ESP32开发板一块 cp2102
数据线一根，能传输数据的。
其他硬件还没到，需要什么得看想做什么

软件：

VSCode
VSCode插件：PlatformIO IDE

PlatformIO IDE安装好后新建项目，Board选择DOIT ESP32 DEVKIT V1,然后Aruino的库就自动安装好了

（原本我用的AruinoIDE，各种错误各种坑，得亏好兄弟了）

ESP32程序编写

platformio.ini 加一个配置项 monitor_speed = 115200

开发是使用的C++

引入头文件：

#include <Arduino.h>
#include <WebServer.h>
#include <WiFi.h>

连接WiFi我就不描述了。

再创建一个WebServer对象：

WebServer server(80);

注册uri，并启动Web服务器：

//客户端访问回调函数
void indexHandler()
{
  server.send(200, "text/html", "index");
}
//客户端访问回调函数
void testHandler(){
  server.send(200, "text/html", "test seccess");
  Serial.print("test Controller | Time:");
  Serial.println(millis());
}

//注册URI
server.on("/", indexHandler);
server.on("/test", testHandler);
//启动WebServer
server.begin();

loop函数中处理请求：

server.handleClient();

ESP32 完整代码

#include <Arduino.h>
#include <WebServer.h>

#include <WiFi.h>
// #include <string>
const char *ssid = "wifi";
const char *password = "wifi";
WebServer server(80);

String indexHtml = String("") + "<!DOCTYPE html>" +
                   "<html>" +
                   "	<head>" +
                   "		<meta charset=\"utf-8\">" +
                   "		<title>ESP32 WebController</title>" +
                   "	</head>" +
                   "	<body>" +
                   "		<h1>Web Controller</h1>" +
                   "		<button onclick=\"test()\" type=\"button\" style=\"height: 100px;width: 200px;background-color: #1aa6f67d;border: 0px;\">Test</button>" +
                   "	</body>" +
                   "	<script type=\"text/javascript\">" +
                   "		function test() {" +
                   "			var ajax = new XMLHttpRequest();" +
                   "			ajax.open(\'get\', \'/test\');" +
                   "			ajax.send();" +
                   "			ajax.onreadystatechange = function() {" +
                   "				if (ajax.readyState == 4 && ajax.status == 200) {" +
                   "					console.log(ajax.responseText);" +
                   "				}" +
                   "			}" +
                   "		}" +
                   "	</script>" +
                   "</html>";

void indexHandler()
{
  server.send(200, "text/html", indexHtml);
}

void testHandler()
{
  server.send(200, "text/html", "test seccess");
  Serial.print("test Controller | Time:");
  Serial.println(millis());
}

void setup()
{
  // put your setup code here, to run once:
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(2000);
    Serial.println(WiFi.status());
    Serial.println("Connecting to WiFi..");
  }
  Serial.println(WiFi.status());
  Serial.println("Connected.");
  Serial.println(WiFi.localIP().toString());

  server.on("/", indexHandler);
  server.on("/test", testHandler);
  server.begin();
}

void loop()
{
  // put your main code here, to run repeatedly:
  server.handleClient();
}

Web页面

主要就是使用了个原生Ajax向esp32程序注册的URI发出请求，再由esp32程序的请求回调函数进行处理

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ESP32 WebController</title>
	</head>
	<body>
		<h1>Web Controller</h1>
		<button onclick="test()" type="button" style="height: 100px;width: 200px;background-color: #1aa6f67d;border: 0px;">Test</button>
	</body>
	<script type="text/javascript">
		function test() {
			var ajax = new XMLHttpRequest();
			ajax.open('get', '/test');
			ajax.send();
			ajax.onreadystatechange = function() {
				if (ajax.readyState == 4 && ajax.status == 200) {
					console.log(ajax.responseText);
				}
			}
		}
	</script>
</html>

万丈高楼平地起

这是第一步，可以说是很简单了，但这又是最重要的一环。

之后可以使用websocket与云服务器+控制端+esp终端进行实时互联，当然也可以用其他的，总之就是：起飞

标签：Web,入门,ESP32,server,println,ajax,test,Serial
来源： https://www.cnblogs.com/somurim/p/15709500.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9