使用esp32+micropython+microdot搭建web(http+websocket)服務(wù)器（超詳細(xì)）第一部分

• microdot文檔速查 什么是Microdot?Microdot是一個(gè)可以在micropython中搭建物聯(lián)網(wǎng)web服務(wù)器的框架
• micropyton文檔api速查 Quick reference for the ESP32

先來個(gè)小demo先體驗(yàn)一下

演示視頻鏈接

視頻中我們簡單的實(shí)現(xiàn)了

• 使用esp32搭建web服務(wù)器
• 實(shí)現(xiàn)get請求
• 上傳網(wǎng)頁到服務(wù)器
• 手機(jī)打開網(wǎng)址訪問該網(wǎng)頁
• 服務(wù)器處理請求，實(shí)現(xiàn)開燈關(guān)燈操作

準(zhǔn)備工作

百度網(wǎng)盤：https://pan.baidu.com/s/1ZKbaGjdjuBMJgK9l6w9mdg?pwd=1234 提取碼：1234

• esp32開發(fā)板一個(gè)
• micro數(shù)據(jù)線一條（支持?jǐn)?shù)據(jù)傳輸，有些只能充電）
• micropython固件，下載地址MicroPython - Python for microcontrollers或者網(wǎng)盤中獲?。╡sp32-20220618-v1.19.1.bin）
• esp32電腦驅(qū)動(dòng)(沒有他電腦不能識別esp32)，網(wǎng)盤中獲?。╡sp32usbDriver.zip）
• Thonny，下載地址Thonny, Python IDE for beginners 或者網(wǎng)盤中獲取（thonny-4.1.1.exe）
• vscode，下載地址Documentation for Visual Studio Code 或者網(wǎng)盤中獲取（VSCodeUserSetup-x64-1.79.2.exe）
• microdot Microdot是一個(gè)可以在micropython中搭建物聯(lián)網(wǎng)web服務(wù)器的框架(點(diǎn)擊查看)

安裝esp32電腦驅(qū)動(dòng)

• 解壓該文件

• 點(diǎn)擊安裝該驅(qū)動(dòng)（64位電腦選擇上面，32位電腦選擇下面）
• 安裝完記得重啟電腦，不然可能不生效

安裝Thonny

• 點(diǎn)擊安裝

• thonny切換中文，點(diǎn)擊tools

  • 
  • 點(diǎn)擊options
  • 選擇language，中文
  • 重啟就漢化成功

• 新建一個(gè)空文件夾，然后新建一個(gè)main.py文件

• 使用thonny打開它

給esp32刷入micropython固件

• micro數(shù)據(jù)線連接電腦，然后連接esp32
• 
• 點(diǎn)擊配置解釋器

• 選擇Micropython（esp32）解釋器和選擇端口，這個(gè)端口就安裝電腦驅(qū)動(dòng)之后生成的，名字可能不一樣（如果沒有端口，可能是驅(qū)動(dòng)沒裝上或者線沒連好）[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-dUJJotD8-1687272884567)(<轉(zhuǎn)存失敗，建議直接上傳圖片文件 >)]

• 點(diǎn)擊Install or update MicroPython選擇端口和固件（網(wǎng)盤里面有）

• 等待進(jìn)度條走完就好了

• 如果一直不顯示百分比 按住 esp32上的boot鍵

  • ESP32開發(fā)板上有2個(gè)按鍵,分別是boot和EN。燒錄前需要先打開Download模式:長按boot鍵,按一下EN鍵,即可燒錄。燒錄完畢,按EN返回運(yùn)行模式。

• 完成！

• 右下角已經(jīng)可選esp32開發(fā)板了

• esp32首先執(zhí)行的是boot.py文件。該文件是由MicroPython系統(tǒng)創(chuàng)建的。因此您無需自己創(chuàng)建該文件就可以在剛剛刷好固件的NodeMCU開發(fā)板根目錄下找到它。我不建議MicroPython的初學(xué)者對該文件進(jìn)行修改，因?yàn)閎oot.py文件出現(xiàn)問題能會(huì)導(dǎo)致MicroPython無法正常啟動(dòng)，嚴(yán)重的會(huì)導(dǎo)致系統(tǒng)崩潰。要修復(fù)可能只有重新刷固件才行。所以除非您很了解MicroPython，否則請不要自行修改該文件。

  執(zhí)行完boot.py以后，啟動(dòng)中的NodeMCU接下來將會(huì)執(zhí)行main.py文件。如果您希望NodeMCU在每次啟動(dòng)后都執(zhí)行一系列操作的話，可以將您的指令代碼寫入該文件。由于main.py文件是用戶自己建立的而不是MicroPython系統(tǒng)建立的，因此在剛剛刷好固件的開發(fā)板根目錄下是不存在該文件的。假如MicroPython在啟動(dòng)中找不到main.py文件，它會(huì)在系統(tǒng)啟動(dòng)時(shí)報(bào)錯(cuò)（如下圖所示）。

• 所以我們新建main.py,刪除boot.py，main.py作為項(xiàng)目的主入口文件

安裝vscode

• 雙擊（VSCodeUserSetup-x64-1.79.2.exe）文件

esp32web服務(wù)器接口的搭建

• 解壓網(wǎng)盤中的microdot-main.zip

  • microdot-main\src下面有我們需要的文件

• 在MicroPython設(shè)備 新建目錄結(jié)構(gòu)

  • lib 存放一些庫文件

    • microdot.py （microdot-main\src中）

  • common

    • connect_wifi.py （連接熱點(diǎn)）

  • public 存放網(wǎng)頁內(nèi)容

    • index.html 網(wǎng)頁

  • main.py （程序主入口）

connect_wifi.py

# 操作esp32引腳
from machine import Pin
?
# 操作時(shí)間 延遲幾秒等
import time
?
# 網(wǎng)絡(luò)相關(guān)的函數(shù)
import network
?
# esp32 引腳2是一顆自帶的 led的燈
light = Pin(2,Pin.OUT)
def do_connect():
    # wifi模式
    wlan = network.WLAN(network.STA_IF)
    # 激活
    wlan.active(True)
    print("開始連接...")
    print("連接中...")
    #  連接超時(shí)設(shè)置
    start_time = time.time()
    if not wlan.isconnected():
        # 自家的wifi名和密碼        
        wlan.connect("Xiaomi_A246","zy415415666")
        while not wlan.isconnected():
            # 燈亮
            light.value(1)
            # 延遲一秒
            time.sleep(1)
            # 燈滅
            light.value(0)
            time.sleep(1)
            # 15秒內(nèi)沒連接上就是超時(shí)了
            if time.time() - start_time > 15:
                print("wifi連接超時(shí)?。?！")
                break
        return False
    else:
        print("連接成功！?。。?)
        light.value(0)
        # 打印 網(wǎng)絡(luò)信息
        print("網(wǎng)絡(luò)配置:",wlan.ifconfig())
        return True
?

main.py

# 導(dǎo)入Microdot
from lib.microdot import Microdot
# 連接wifi
from common.connect_wifi import do_connect
# 導(dǎo)入引腳
from machine import Pin
# esp32 引腳2是一顆自帶的 led的燈
light = Pin(2,Pin.OUT)
?
# 開始連接wifi
do_connect()
# 實(shí)例化這個(gè)類
app = Microdot()
?
# 設(shè)置一個(gè)get請求 如果
@app.get('/on')
def index(request):
    # 如果收到get請求on就開燈
    light.value(1)
    return "開燈了"
?
@app.get('/off')
def index(request):
    # 如果收到get請求off就關(guān)燈
    light.value(0)
    return "關(guān)燈了"
# 端口號為5000
app.run(host='0.0.0.0', port=5000, debug=False, ssl=None)

執(zhí)行main.py

• esp32指示燈閃爍
• 控制臺打印ip地址等信息 就表示服務(wù)器已經(jīng)啟動(dòng)好了

• 打開瀏覽器輸入ip+端口 成功啦?。。?img src="https://imgs.yssmx.com/Uploads/2023/10/714915-17.png" alt="esp32 websocket,物聯(lián)網(wǎng),服務(wù)器,前端,http,websocket,物聯(lián)網(wǎng),esp32,microdot" referrerpolicy="no-referrer" />

新建網(wǎng)頁

打開vscode編寫一個(gè)網(wǎng)頁

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>esp32服務(wù)器網(wǎng)頁</title>
    <style>
        *{margin: 0;
        padding: 0;}
        button{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <h1>開燈小網(wǎng)頁</h1>
    <button class="on">
        開燈
    </button>
    <button class="off">
        關(guān)燈
    </button>
    <script>
        const onBtn = document.querySelector(".on");
        const offBtn = document.querySelector(".off");
        // 監(jiān)聽按鈕點(diǎn)擊事件
        onBtn.addEventListener("click",(e)=>{
            fetch("/on",{
                method:"get",
            }).then(e=>{
                console.log("消息",e);
            }).catch(error=>{
                console.log("報(bào)錯(cuò)了",error);
            })
        })
        offBtn.addEventListener("click",(e)=>{
            fetch("/off").then(e=>{
                console.log("消息",e);
            }).catch(error=>{
                console.log("報(bào)錯(cuò)了",error);
            })
        })
?
    </script>
</body>
?
</html>

esp32部署網(wǎng)頁

• 將index.html文件放在public文件下面

• 修改main.py

  # 導(dǎo)入Microdot
  from lib.microdot import Microdot,send_file
  # 連接wifi
  from common.connect_wifi import do_connect
  # 導(dǎo)入引腳
  from machine import Pin
  # esp32 引腳2是一顆自帶的 led的燈
  light = Pin(2,Pin.OUT)
  ?
  # 開始連接wifi
  do_connect()
  # 實(shí)例化這個(gè)類
  app = Microdot()
  ?
  # 返回一個(gè)網(wǎng)頁
  @app.route('/')
  def index(request):
      return send_file('public/index.html')
  ?
  # 設(shè)置一個(gè)get請求 如果
  @app.get('/on')
  def index(request):
      # 如果收到get請求on就開燈
      light.value(1)
      return "開燈了"
  ?
  @app.get('/off')
  def index(request):
      # 如果收到get請求off就關(guān)燈
      light.value(0)
      return "關(guān)燈了"
  ?
  # 端口號為5000
  app.run(host='0.0.0.0', port=5000, debug=False, ssl=None)
  ?
  

開發(fā)完成

• 重新運(yùn)行main.py,
• 打開瀏覽器輸入地址
• 
• 點(diǎn)擊網(wǎng)頁上的開燈和關(guān)燈按鈕，可以看到esp32上面的燈亮和燈滅
• 
• 開發(fā)結(jié)束！?。。?！

第二部分馬上就來！文章來源地址http://www.zghlxwxcb.cn/news/detail-714915.html

到了這里，關(guān)于使用esp32+micropython+microdot搭建web(http+websocket)服務(wù)器（超詳細(xì)）第一部分的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！