如何用MicroWebSrv构建ESP32 captive portal：5分钟实现设备配网页面

如何用MicroWebSrv构建ESP32 captive portal5分钟实现设备配网页面【免费下载链接】MicroWebSrvA micro HTTP Web server that supports WebSockets, html/python language templating and routing handlers, for MicroPython (used on Pycom modules ESP32)项目地址: https://gitcode.com/gh_mirrors/mi/MicroWebSrvMicroWebSrv是一款轻量级HTTP Web服务器专为MicroPython设计特别适用于Pycom模块和ESP32等嵌入式设备。它支持WebSockets、HTML/Python模板渲染和路由处理是构建嵌入式Web应用的理想选择。本文将详细介绍如何利用MicroWebSrv快速搭建ESP32 captive portal实现设备配网功能。什么是Captive PortalCaptive Portal强制门户是一种网络技术当用户连接到特定Wi-Fi网络时会自动重定向到一个网页通常用于认证、信息展示或设备配置。在ESP32等物联网设备中Captive Portal常被用于设备首次配网用户无需手动输入设备IP地址即可通过自动弹出的网页完成Wi-Fi信息配置。MicroWebSrv核心功能解析要构建Captive Portal我们需要利用MicroWebSrv的以下核心功能1. 路由处理MicroWebSrv提供了灵活的路由装饰器允许开发者将特定URL路径映射到处理函数。在main.py中我们可以看到路由定义的示例MicroWebSrv.route(/test) def func_test(httpClient, httpResponse) : # 处理逻辑通过这种方式我们可以轻松定义Captive Portal所需的各个页面路由如配网表单页面、提交结果页面等。2. WebSocket支持MicroWebSrv内置了WebSocket支持通过microWebSocket.py实现。这使得设备与配网页面之间可以建立实时双向通信便于动态反馈配网进度和结果。在main.py中通过设置AcceptWebSocketCallback来处理WebSocket连接srv.AcceptWebSocketCallback _acceptWebSocketCallback3. HTTP服务器配置MicroWebSrv的核心配置在microWebSrv.py中实现。我们可以设置服务器端口、最大WebSocket接收长度、是否启用多线程WebSocket处理等参数srv MicroWebSrv() srv.MaxWebSocketRecvLen 256 srv.WebSocketThreaded False5分钟快速实现Captive Portal步骤步骤1准备MicroWebSrv环境首先将MicroWebSrv库克隆到本地git clone https://gitcode.com/gh_mirrors/mi/MicroWebSrv然后将库文件上传到ESP32设备中确保以下核心文件存在microWebSrv.pyWeb服务器核心实现microWebSocket.pyWebSocket支持main.py应用入口文件步骤2配置ESP32为接入点模式在main.py中首先需要将ESP32配置为Wi-Fi接入点模式让用户设备能够连接import network ap network.WLAN(network.AP_IF) ap.active(True) ap.config(essidESP32-Captive-Portal, password12345678)步骤3实现Captive Portal路由利用MicroWebSrv的路由功能定义Captive Portal的主要页面MicroWebSrv.route(/) # 根路径Captive Portal入口 def handle_root(httpClient, httpResponse): # 返回配网表单页面 httpResponse.WriteResponseOk( headers { Content-Type: text/html }, content html body h1ESP32设备配网/h1 form action/configure methodPOST labelWi-Fi名称:/label input typetext namessidbr labelWi-Fi密码:/label input typepassword namepasswordbr input typesubmit value配置 /form /body /html ) MicroWebSrv.route(/configure, POST) # 处理配网数据提交 def handle_configure(httpClient, httpResponse): # 解析表单数据 formData httpClient.ReadRequestPostedFormData() ssid formData.get(ssid, ) password formData.get(password, ) # 连接到用户Wi-Fi # ... 连接逻辑 ... # 返回配置结果 httpResponse.WriteResponseOk( headers { Content-Type: text/html }, content htmlbodyh1配网成功/h1/body/html )步骤4启动Web服务器在main.py的最后创建并启动MicroWebSrv实例srv MicroWebSrv(webPath/www) # 指定网页文件目录 srv.Start(threadedTrue) # 以线程方式启动服务器 print(Web server started)步骤5测试Captive Portal功能上电启动ESP32使用手机或电脑搜索并连接ESP32-Captive-Portal Wi-Fi网络系统会自动弹出配网页面或手动打开浏览器访问任意网址输入Wi-Fi名称和密码点击配置等待ESP32连接到指定Wi-Fi完成配网进阶优化使用HTML模板和WebSocket使用HTML模板MicroWebSrv支持Python模板渲染可以将配网页面的HTML代码分离到单独的模板文件中。在www目录下创建portal.html文件然后在路由处理函数中渲染模板from microWebTemplate import render_template MicroWebSrv.route(/) def handle_root(httpClient, httpResponse): content render_template(portal.html) httpResponse.WriteResponseOk(headers{Content-Type: text/html}, contentcontent)添加WebSocket实时反馈利用microWebSocket.py提供的WebSocket功能可以实时反馈配网进度def _acceptWebSocketCallback(webSocket, httpClient): webSocket.RecvTextCallback _recvTextCallback webSocket.RecvBinaryCallback _recvBinaryCallback webSocket.ClosedCallback _closedCallback def _recvTextCallback(webSocket, msg): # 处理来自网页的消息 print(Received message: %s % msg) # 发送配网进度 webSocket.SendText(Connecting to Wi-Fi...)在前端页面www/wstest.html中可以参考WebSocket测试页面的实现添加实时进度显示var websocket new WebSocket(ws:// window.location.host /ws); websocket.onmessage function(evt) { document.getElementById(status).innerText evt.data; };总结通过MicroWebSrv我们可以快速构建功能完善的ESP32 Captive Portal实现设备的便捷配网。MicroWebSrv的路由处理、WebSocket支持和模板渲染等功能为嵌入式Web应用开发提供了强大而灵活的工具。无论是简单的配网页面还是复杂的嵌入式Web应用MicroWebSrv都是一个值得尝试的选择。希望本文能够帮助你快速掌握MicroWebSrv的使用为你的ESP32项目添加便捷的配网功能。如果需要更详细的API文档和示例可以参考项目中的源代码和示例文件。【免费下载链接】MicroWebSrvA micro HTTP Web server that supports WebSockets, html/python language templating and routing handlers, for MicroPython (used on Pycom modules ESP32)项目地址: https://gitcode.com/gh_mirrors/mi/MicroWebSrv创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考