当前位置：首页 > web >正文

esp12f-实现远程控制

web 2025/8/20 11:31:03

一、项目概述

本方案基于ESP8266（ESP-12F模块）实现了一个可通过Web界面远程控制的智能继电器系统。项目通过WiFi接入局域网，用户可通过任意设备的浏览器进行继电器状态控制和实时状态查看，典型应用场景包括智能家居设备控制、工业设备远程操作等。

二、开发环境准备

所需硬件
ESP-12F开发板
5V继电器模块（光耦隔离型）
杜邦线若干
220V负载设备（灯泡/插座等）
软件依赖
必装库文件：
ESP8266WiFi (内置)
ESP8266WebServer (内置)
3 引脚图

开发工具：

Arduino IDE 2.3+
ESP8266开发板支持包（3.1.2+）安装步骤：
Arduino IDE → 文件 → 首选项
附加开发板管理器URL添加：
http://arduino.esp8266.com/stable/package_esp8266com_index.json
工具 → 开发板 → 开发板管理器 → 搜索安装esp8266

三、测试步骤

1 在Arduino IDE中上传代码到开发板
2 打开串口监视器（波特率115200）查看连接信息（获取开发板获得的ip地址）
3 在PC端浏览器或手机端浏览器访问第二步得到的ip地址即可看见控制网页
4 测试
界面如下

四、项目源代码

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>const char* ssid = "WiFi名称"; // 替换成你的WiFi名称
const char* password = "WiFi密码"; // 替换成你的WiFi密码#define RELAY_PIN 5 // GPIO5 控制继电器
ESP8266WebServer server(80); // Web服务器端口80// 网页HTML代码
const char* htmlPage = R"=====(
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>设备控制</title><style>body {font-family: Arial, sans-serif;text-align: center;margin: 20px;}.status-box {padding: 15px;margin: 20px auto;width: 80%;border-radius: 8px;font-size: 1.2em;}.status-on {background: #4CAF50;color: white;}.status-off {background: #f44336;color: white;}.btn-group {margin: 30px 0;}button {padding: 15px 32px;font-size: 18px;margin: 10px;border: none;border-radius: 4px;cursor: pointer;min-width: 120px;}.btn-on {background: #45a049;color: white;}.btn-off {background: #d32f2f;color: white;}</style>
</head>
<body><h1>设备状态控制</h1><div id="status" class="status-box status-off">状态：未连接</div><div class="btn-group"><button class="btn-on" onclick="controlDevice('on')">启 动</button><button class="btn-off" onclick="controlDevice('off')">关 闭</button></div><script>// 获取设备状态function updateStatus() {fetch('/status').then(response => response.json()).then(data => {const statusDiv = document.getElementById('status');statusDiv.className = `status-box ${data.status === 'on' ? 'status-on' : 'status-off'}`;statusDiv.textContent = `当前状态：${data.status === 'on' ? '运行中' : '已关闭'}`;});}// 控制设备function controlDevice(action) {fetch(`/relay/${action}`).then(() => {updateStatus(); // 操作后立即更新状态}).catch(err => {console.error('控制失败:', err);});}// 每2秒更新状态setInterval(updateStatus, 2000);updateStatus(); // 初始加载</script>
</body>
</html>
)=====";void setup() {Serial.begin(115200);pinMode(RELAY_PIN, OUTPUT);digitalWrite(RELAY_PIN, LOW);WiFi.begin(ssid, password);while (WiFi.status() != WL_CONNECTED) {delay(500);Serial.print(".");}Serial.println("\nWiFi已连接");Serial.print("IP地址: ");Serial.println(WiFi.localIP());// 新增状态查询接口server.on("/status", []() {String state = (digitalRead(RELAY_PIN) == HIGH) ? "on" : "off";server.send(200, "application/json", "{\"status\":\"" + state + "\"}");});server.on("/", handleRoot);server.on("/relay/on", handleOn);server.on("/relay/off", handleOff);server.begin();
}void loop() {server.handleClient(); // 处理客户端请求
}// 处理主页请求
void handleRoot() {server.send(200, "text/html", htmlPage);
}// 打开继电器
void handleOn() {digitalWrite(RELAY_PIN, HIGH);server.send(200, "text/plain", "Relay ON");
}// 关闭继电器
void handleOff() {digitalWrite(RELAY_PIN, LOW);server.send(200, "text/plain", "Relay OFF");
}