在嵌入式设备(ESP32)上构建一套 “局域网内可视化、跨设备兼容” 的硬件控制方案,

  • ESP32 同时启动 AP 模式 + UDP 服务 + Web 服务器

  • Web 服务器提供 HTML 控制页面

  • 网页通过 JavaScript 发送 UDP 指令到 ESP32 的 UDP 端口

  • ESP32 的 UDP 服务接收指令并控制 LED import socket

    import network

    import machine

    import time

    from machine import Pin

    全局变量

    led = Pin(2, Pin.OUT) # 初始化GPIO2为输出模式

    led.value(0) # 默认熄灭LED

    def start_ap():

    """启动ESP32的AP模式"""

    ap = network.WLAN(network.AP_IF)

    ap.active(False)

    time.sleep(0.5)

    ap.active(True)

    AP配置

    ssid = 'ESP32_APTest'

    password = '12345678'

    ap.config(

    essid=ssid,

    password=password,

    authmode=3, # WPA2-PSK

    max_clients=10

    )

    等待AP启动完成

    while not ap.active():

    time.sleep(0.1)

    print('='*20)

    print('AP模式已启动')

    print('SSID:', ssid)

    print('密码:', password)

    ip = ap.ifconfig()[0]

    print('IP地址:', ip) # 通常是192.168.4.1

    print('='*20)

    return ip

    def udp_server():

    """启动UDP服务,监听指令控制LED(修复超时日志)"""

    udp_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)

    udp_socket.bind(("0.0.0.0", 7788))

    udp_socket.settimeout(1) # 超时1秒,避免阻塞

    while True:

    try:

    接收UDP数据

    recv_data, sender_info = udp_socket.recvfrom(1024)

    cmd = recv_data.decode("utf-8").strip()

    执行指令

    if cmd == "light on":

    led.value(1)

    print(f"来自{sender_info}的指令:点亮LED")

    udp_socket.sendto(b"success: LED ON", sender_info)

    elif cmd == "light off":

    led.value(0)

    print(f"来自{sender_info}的指令:熄灭LED")

    udp_socket.sendto(b"success: LED OFF", sender_info)

    else:

    udp_socket.sendto(b"error: unknown command", sender_info)

    关键修复:兼容110和116两种超时错误码,不打印正常超时

    except OSError as e:

    err_code = e.args[0]

    110/116都是超时错误,忽略不打印

    if err_code in (110, 116):

    continue

    其他OSError才打印错误

    else:

    print(f"UDP服务异常: {e}")

    continue

    其他非超时异常才打印

    except Exception as e:

    print(f"UDP服务其他错误: {e}")

    continue

    def get_html_page():

    """单独定义HTML页面,避免格式化冲突"""

    html = """

    <!DOCTYPE html>

    <html lang="zh-CN">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ESP32 LED控制</title>

    <style>

    body {

    font-family: Arial, sans-serif;

    max-width: 400px;

    margin: 50px auto;

    text-align: center;

    }

    .control-btn {

    width: 150px;

    height: 60px;

    font-size: 20px;

    margin: 10px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    color: white;

    }

    #onBtn {

    background-color: #4CAF50;

    }

    #offBtn {

    background-color: #f44336;

    }

    #status {

    margin-top: 20px;

    font-size: 18px;

    color: #333;

    }

    </style>

    </head>

    <body>

    <h1>ESP32 LED控制器</h1>

    <button id="onBtn" class="control-btn">点亮LED</button>

    <button id="offBtn" class="control-btn">熄灭LED</button>

    <div id="status">等待操作...</div>

    <script>

    // 使用HTTP请求控制LED,兼容所有浏览器

    async function sendCommand(cmd) {

    try {

    const response = await fetch(`/light/${cmd}`);

    const result = await response.text();

    document.getElementById('status').textContent = `操作结果: ${result}`;

    } catch (err) {

    document.getElementById('status').textContent = `操作失败: ${err}`;

    }

    }

    // 绑定按钮事件

    document.getElementById('onBtn').addEventListener('click', () => {

    sendCommand("on");

    });

    document.getElementById('offBtn').addEventListener('click', () => {

    sendCommand("off");

    });

    </script>

    </body>

    </html>

相关推荐
我的xiaodoujiao24 分钟前
API 接口自动化测试详细图文教程学习系列16--项目实战演练3
python·学习·测试工具·pytest
ID_1800790547328 分钟前
Python 实现亚马逊商品详情 API 数据准确性校验(极简可用 + JSON 参考)
java·python·json
时空系1 小时前
第10篇:继承扩展——面向对象编程进阶 python中文编程
开发语言·python·ai编程
CHANG_THE_WORLD2 小时前
python 批量终止进程exe
开发语言·python
liann1192 小时前
3.2_红队攻击框架--MITRE ATT&CK‌
python·网络协议·安全·网络安全·系统安全·信息与通信
云天AI实战派2 小时前
AI 智能体问题排查指南:ChatGPT、API 调用到 Agent 上线失灵的全流程修复手册
大数据·人工智能·python·chatgpt·aigc
我的xiaodoujiao3 小时前
API 接口自动化测试详细图文教程学习系列15--项目实战演练2
python·学习·测试工具·pytest
多思考少编码4 小时前
PAT甲级真题1001 - 1005题详细题解(C++)(个人题解)
c++·python·最短路·pat·算法竞赛
ZhengEnCi4 小时前
M5-markconv自定义CSS样式指南 📝
前端·css·python
ZhengEnCi4 小时前
M4-更新日志v0.1.3-Mermaid图表支持 📝
python