SkySwitch 云控灯

一、小剧场

准备阶段

  • ESP8266 开发板(带 Wi-Fi 功能)、SG90 舵机、杜邦线若干、电源(5V 锂电池,可配合 Arduino/STM 使用)、Linux 公网服务器
  • Arduino IDE(代码编写与上传)
  • 友善串口调试工具

终极目标

  • 通过 公网 IP:8089 ,实现对 ESP8266 部署页面 的远程访问,点击页面开关灯按钮,控制舵机转动角度,控制开关灯。

二、ESP8266 编程,开关灯功能实现

  1. 硬件连接 将舵机与开发板正确连接。连接成功后,舵机会自动转动一下,发出轻微声音,这是正常现象。
  2. ESP8266 只支持 2.4GHz Wi-Fi,不支持 5GHz。所以Wi-Fi不能选用5G的,否则会出现链接不上
arduino 复制代码
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <Servo.h>

// ==== 用户配置 WiFi ====
const char* ssid = "XXX";
const char* password = "XXX";

// ==== 对象实例 ====
Servo myServo;
ESP8266WebServer server(80);

// ==== 全局变量 ====
int currentAngle = 90;  // 初始角度

// ==== HTML 页面 ====
const char* htmlPage = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>舵机灯光控制</title>
  <style>
    body { font-family: Arial; text-align: center; margin-top: 50px; }
    button { padding: 20px; font-size: 20px; margin: 20px; }
  </style>
</head>
<body>
  <h1>💡 舵机灯光控制</h1>
  <button onclick="fetch('/servo?cmd=on')">开灯</button>
  <button onclick="fetch('/servo?cmd=off')">关灯</button>
</body>
</html>
)rawliteral";

// ==== 初始化 ====
void setup() {
  Serial.begin(9600);
  myServo.attach(2);  // GPIO2 (D4)
  myServo.write(currentAngle);

  // WiFi 连接
  WiFi.begin(ssid, password);
  Serial.print("连接 WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500); Serial.print(".");
  }
  Serial.println("\nWiFi已连接");
  Serial.print("IP地址: "); Serial.println(WiFi.localIP());

  // 设置 Web 路由
  server.on("/", []() {
    server.send(200, "text/html", htmlPage);
  });

  server.on("/servo", []() {
    if (server.hasArg("cmd")) {
      String cmd = server.arg("cmd");

      if (cmd == "on") {
        myServo.write(0);          // 开灯动作
        delay(1000);
        myServo.write(90);         // 复位
        currentAngle = 90;
      } 
      else if (cmd == "off") {
        myServo.write(180);        // 关灯动作
        delay(1000);
        myServo.write(90);         // 复位
        currentAngle = 90;
      }

      server.send(200, "text/plain", "OK");
    } else {
      server.send(400, "text/plain", "缺少参数");
    }
  });

  server.begin();
}

// ==== 主循环 ====
void loop() {
  server.handleClient();  // 处理网页请求
}

三、内网穿透

在公网服务器上运行 FRP (Fast Reverse Proxy)作为中转,实现内网设备的远程访问。不仅需要在安全组中配置规则,还需要手动放行7000,8089 端口, sudo firewall-cmd --zone=public --add-port=8089/tcp --permanent

  1. FRPS(服务器端)配置示例

    ini 复制代码
    ini
    复制编辑
    [common]
    bind_port = 7000
    token = mytoken123
  2. FRPC(客户端)配置示例

    ini 复制代码
    ini
    复制编辑
    [common]
    server_addr = 1.2.3.4       # 你的公网服务器 IP
    server_port = 7000
    token = mytoken123
    
    [esp8266_tcp]
    type = tcp
    local_ip = 192.168.1.50
    local_port = 80
    remote_port = 8089
  3. 访问方式

    部署完成后,可通过 http://公网IP:8089 直接访问 ESP8266 提供的 Web 控制页面


相关推荐
前端一课几秒前
Vue3 的 Composition API 和 Options API 有哪些区别?举例说明 Composition API 的优势。
前端
用户47949283569151 分钟前
都说node.js是事件驱动的,什么是事件驱动?
前端·node.js
晴殇i1 分钟前
前端架构中的中间层设计:构建稳健可维护的组件体系
前端·面试·代码规范
申阳21 分钟前
Day 7:05. 基于Nuxt开发博客项目-首页开发
前端·后端·程序员
Crystal32828 分钟前
App端用户每日弹出签到弹窗如何实现?(uniapp+Vue)
前端·vue.js
摸着石头过河的石头29 分钟前
Service Worker 深度解析:让你的 Web 应用离线也能飞
前端·javascript·性能优化
用户40993225021230 分钟前
Vue 3中watch侦听器的正确使用姿势你掌握了吗?深度监听、与watchEffect的差异及常见报错解析
前端·ai编程·trae
1024小神33 分钟前
Xcode 常用使用技巧说明,总有一个帮助你
前端
政采云技术1 小时前
音视频通用组件设计探索和应用
前端·音视频开发
Hilaku1 小时前
我用AI重构了一段500行的屎山代码,这是我的Prompt和思考过程
前端·javascript·架构