网站添加从浏览器向ESP32上传MicroPython代码功能的最佳方案问询

以下是几种实用的实现方案，可根据场景需求选择：

方案1：Web Serial API 直接串口通信 #

利用浏览器原生的Web Serial API，直接与ESP32的USB串口建立连接，通过MicroPython的REPL完成代码上传。

实现步骤： #

1. 前端处理：

   • 请求用户授权访问串口，选择ESP32对应的串口设备
   • 发送指令进入MicroPython的Raw REPL模式（\x03\x01）
   • 将代码封装为文件写入命令，通过串口发送
   • 可选：发送重启指令让代码生效

   示例前端代码：

   async function uploadViaSerial(code) {
     try {
       // 请求串口权限
       const port = await navigator.serial.requestPort();
       await port.open({ baudRate: 115200 });
       
       const writer = port.writable.getWriter();
       const encoder = new TextEncoder();
       
       // 进入Raw REPL
       await writer.write(encoder.encode('\x03\x01'));
       await new Promise(resolve => setTimeout(resolve, 100));
       
       // 写入代码到main.py
       const writeCmd = `with open("main.py", "w") as f: f.write("""${code}""")\r\n`;
       await writer.write(encoder.encode(writeCmd));
       await new Promise(resolve => setTimeout(resolve, 200));
       
       // 重启设备生效
       await writer.write(encoder.encode('import machine; machine.reset()\r\n'));
       
       writer.releaseLock();
       await port.close();
       alert('代码上传成功');
     } catch (err) {
       console.error('上传失败:', err);
     }
   }
   

2. ESP32端：无需额外代码，保持默认的MicroPython REPL即可。

优缺点： #

• ✅ 无需中间服务器，直接本地通信
• ✅ 无需ESP32联网
• ❌ 仅支持Chrome、Edge等现代浏览器
• ❌ 用户需手动选择串口设备

方案2：ESP32 HTTP服务器 无线上传 #

让ESP32作为HTTP服务器，前端通过局域网发送POST请求上传代码，ESP32接收后写入文件系统。

实现步骤： #

1. ESP32端代码：

   import network
   import socket
   from machine import Pin
   
   # 配置WiFi
   SSID = "你的WiFi名称"
   PASSWORD = "你的WiFi密码"
   
   # 连接WiFi
   wlan = network.WLAN(network.STA_IF)
   wlan.active(True)
   wlan.connect(SSID, PASSWORD)
   while not wlan.isconnected():
       pass
   print(f"ESP32 IP地址: {wlan.ifconfig()[0]}")
   
   # 启动HTTP服务器
   def start_server():
       addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
       s = socket.socket()
       s.bind(addr)
       s.listen(1)
       
       while True:
           cl, addr = s.accept()
           print(f"客户端连接: {addr}")
           req = cl.recv(1024).decode('utf-8')
           
           # 处理上传请求
           if 'POST /upload' in req:
               # 提取请求体中的代码
               code = req.split('\r\n\r\n')[1]
               # 写入文件
               with open('main.py', 'w', encoding='utf-8') as f:
                   f.write(code)
               # 返回成功响应
               cl.send('HTTP/1.1 200 OK\r\nContent-Type: text/plain\r\n\r\n上传成功')
           else:
               cl.send('HTTP/1.1 404 Not Found\r\nContent-Type: text/plain\r\n\r\n无效请求')
           
           cl.close()
   
   start_server()
   

2. 前端处理：
   通过fetch发送POST请求到ESP32的IP地址：

   async function uploadViaHTTP(code) {
     const esp32Ip = "ESP32的IP地址"; // 替换为实际IP
     try {
       const res = await fetch(`http://${esp32Ip}/upload`, {
         method: 'POST',
         body: code
       });
       const msg = await res.text();
       alert(msg);
     } catch (err) {
       console.error('上传失败:', err);
     }
   }
   

优缺点： #

• ✅ 无线传输，无需USB连接
• ✅ 操作简单，用户只需输入ESP32 IP
• ❌ 需ESP32和浏览器处于同一局域网
• ❌ 大文件上传需处理分片（当前示例仅支持小文件）

方案3：WebSocket 实时双向传输 #

通过WebSocket建立浏览器与ESP32的双向连接，适合大文件分块上传，或需要实时反馈上传进度的场景。

实现步骤： #

1. ESP32端：使用MicroPython的websocket库（需先安装：pip install micropython-websocket）

   import network
   import websocket
   from machine import Pin
   
   # 连接WiFi（同方案2）
   SSID = "你的WiFi名称"
   PASSWORD = "你的WiFi密码"
   wlan = network.WLAN(network.STA_IF)
   wlan.active(True)
   wlan.connect(SSID, PASSWORD)
   while not wlan.isconnected():
       pass
   print(f"ESP32 IP: {wlan.ifconfig()[0]}")
   
   # 启动WebSocket服务器
   def ws_server():
       server = websocket.server.WebSocketServer(8080, accept_handler=handle_client)
       server.run_forever()
   
   def handle_client(ws):
       print('客户端连接')
       code_buffer = []
       while True:
           data = ws.recv()
           if not data:
               break
           if data == '__END__':
               # 合并代码并写入文件
               full_code = ''.join(code_buffer)
               with open('main.py', 'w') as f:
                   f.write(full_code)
               ws.send('上传完成')
               break
           code_buffer.append(data)
       ws.close()
   
   ws_server()
   

2. 前端处理：

   async function uploadViaWebSocket(code) {
     const esp32Ip = "ESP32的IP地址";
     const ws = new WebSocket(`ws://${esp32Ip}:8080`);
     
     ws.onopen = () => {
       // 分块发送代码（每1024字节一块）
       const chunkSize = 1024;
       for (let i = 0; i < code.length; i += chunkSize) {
         const chunk = code.slice(i, i + chunkSize);
         ws.send(chunk);
       }
       // 发送结束标记
       ws.send('__END__');
     };
     
     ws.onmessage = (event) => {
       if (event.data === '上传完成') {
         alert('代码上传成功');
         ws.close();
       }
     };
     
     ws.onerror = (err) => {
       console.error('WebSocket错误:', err);
       ws.close();
     };
   }
   

优缺点： #

• ✅ 支持大文件分块上传
• ✅ 实时反馈上传状态
• ❌ 代码复杂度高于HTTP方案
• ❌ 需ESP32联网

方案4：MQTT 异步多设备上传 #

通过MQTT broker实现异步通信，适合需要同时管理多个ESP32设备的场景。前端将代码发布到指定MQTT主题，ESP32订阅该主题并接收代码。

实现步骤： #

1. 部署MQTT Broker：可使用本地的Mosquitto或云服务。

2. ESP32端：使用MicroPython的umqtt.simple库

   import network
   from umqtt.simple import MQTTClient
   
   # WiFi配置
   SSID = "你的WiFi名称"
   PASSWORD = "你的WiFi密码"
   # MQTT配置
   MQTT_BROKER = "Broker的IP或域名"
   MQTT_TOPIC = "esp32/upload/code"
   CLIENT_ID = "esp32_device_01"
   
   # 连接WiFi
   wlan = network.WLAN(network.STA_IF)
   wlan.active(True)
   wlan.connect(SSID, PASSWORD)
   while not wlan.isconnected():
       pass
   
   # 处理MQTT消息
   def on_message(topic, msg):
       print('收到代码')
       code = msg.decode('utf-8')
       with open('main.py', 'w') as f:
           f.write(code)
       # 可选：发布上传成功消息
       client.publish("esp32/upload/status", "success")
   
   # 连接MQTT Broker并订阅主题
   client = MQTTClient(CLIENT_ID, MQTT_BROKER)
   client.set_callback(on_message)
   client.connect()
   client.subscribe(MQTT_TOPIC)
   
   # 保持监听
   while True:
       client.check_msg()
   

3. 前端处理：使用MQTT.js库发送代码

   import mqtt from 'mqtt';
   
   function uploadViaMQTT(code) {
     const client = mqtt.connect('mqtt://Broker的IP或域名');
     const topic = 'esp32/upload/code';
     
     client.on('connect', () => {
       client.publish(topic, code, () => {
         alert('代码已发布到MQTT主题');
         client.end();
       });
     });
     
     client.on('error', (err) => {
       console.error('MQTT连接失败:', err);
       client.end();
     });
   }
   

优缺点： #

• ✅ 支持多设备批量上传
• ✅ 异步通信，无需实时保持连接
• ❌ 需要额外部署MQTT Broker
• ❌ 代码复杂度较高

内容的提问来源于stack exchange，提问作者Ajay Ramprasad