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 控制页面


相关推荐
snow@li1 天前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
浪裡遊1 天前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz1 天前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom1 天前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1231 天前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023371 天前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦1 天前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir1 天前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
peachSoda71 天前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序