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

2023-11-12 20:43:28

先看效果

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

那时

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

入门最快的方法

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

我：

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

再然后：给链接！

基本入门，达成。

硬件、环境

硬件：

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终端进行实时互联，当然也可以用其他的，总之就是：起飞

码农公寓