esp32C3部署网站内网穿透点亮LED灯教程

首先请参考我前面写的文章《基于esp32 C3的micropython开热点web配置无线网络保姆级教程》,学会如何在esp32c3上部署网站,本文只讲关键代码。

首先说下templates文件夹里面的html代码:

<!doctype html>
<html lang="en">
<html>
  <head>
    <title>点亮led灯</title>
    <meta charset="UTF-8">
  </head>
  <body>

<button id="myButton" value="myValue">让灯闪烁</button>  
  
<script>  
document.getElementById('myButton').addEventListener('click', function(event) {  
    // 阻止按钮的默认行为(如果有的话)  
    event.preventDefault();  
      
    // 获取按钮的值  
    var buttonValue = this.value;  
      
    // 创建一个新的XMLHttpRequest对象  
    var xhr = new XMLHttpRequest();  
      
    // 定义请求完成后的回调函数  
    xhr.onload = function() {  
        if (this.status === 200) {  
            // 请求成功,处理响应数据  
            console.log(this.responseText);  
        } else {  
            // 请求失败,处理错误情况  
            console.error('AJAX请求失败: ' + this.statusText);  
        }  
    };  
      
    // 定义请求发生错误时的回调函数  
    xhr.onerror = function() {  
        console.error('AJAX请求发生错误');  
    };  
      
    // 打开请求,指定请求方法和URL  
    // 这里的URL应该替换为你想要发送请求的服务器端脚本的URL  
    xhr.open('POST', '/receive_ajax', true);  
      
 
    xhr.send('buttonValue=' + encodeURIComponent(buttonValue));  
});  
</script>  


  </body>
</html>

在本教程中,我们使用AJAX方法,向后端发送信号。

后端主程序:

from microdot import Microdot, Response
from microdot_utemplate import render_template
import uos
import network
import utime
import machine  
import time  

LED_PIN = 2  
  
# 初始化 GPIO 引脚为输出模式  
led = machine.Pin(LED_PIN, machine.Pin.OUT)  

app = Microdot()
Response.default_content_type = 'text/html'

def write_ini_file(filename, config_dict):  
    with open(filename, 'w') as f:  
        for key, value in config_dict.items():  
            f.write(f'{key} = {value}\n')  

def read_ini_file(filename):  
    config_dict = {}  
    with open(filename, 'r') as f:  
        for line in f:  
            line = line.strip()  # 去除行尾的换行符和空格  
            if line and not line.startswith('#'):  # 忽略空行和注释行(以 # 开头的行)  
                key, value = line.split('=')  # 分割键和值  
                config_dict[key.strip()] = value.strip()  # 将键和值添加到字典中,并去除前后的空格  
    return config_dict



def connect_wifi(ssid, password):  
    wlan = network.WLAN(network.STA_IF)  # 创建WLAN对象,STA模式表示Station模式,即客户端模式  
    wlan.active(True)  # 激活接口  
    if not wlan.isconnected():  # 检查是否已经连接
        wlan.scan()
        print('connecting to network...')  
        wlan.connect(ssid, password)  # 连接到指定的SSID和密码  
        while not wlan.isconnected():  # 等待连接成功  
            print('.', end='')  
            utime.sleep(1)  
    print('network config:', wlan.ifconfig())  # 打印网络配置信息  
    



@app.route('/')
def index(req):
    return render_template('lightled.html')

@app.post('/receive_ajax')
def submit_form(req):
    for i in range(8):  
        led.value(not led.value())  # 切换 LED 的状态  
        time.sleep(1)  # 等待一
    led.value(0)
    return 'wifi信息已配置'




if __name__ == '__main__':
    wlan = network.WLAN(network.STA_IF)  # 创建WLAN对象,STA模式表示Station模式,即客户端模式  
    wlan.active(True)  # 激活接口
    config = read_ini_file('wificonfig.ini')
        # 检查是否已经连接  
    print('connecting to network...')
    print((config['wifissid'],config['wifipassword']))
          # 连接到指定的SSID和密码

    wlan.connect(config['wifissid'],config['wifipassword'])
    print('network config:', wlan.ifconfig())

    print('wifi已连接')
    app.run(debug=True)

运行之后,控制台会打印esp3c3的IP地址,比如我的是:

Network config: ('192.168.4.1', '255.255.255.0', '192.168.4.1', '0.0.0.0')
Starting sync server on 0.0.0.0:5000...

那么我们再在电脑上打开我们的极点云(注意!电脑要和esp32c3在同一网络),再参考我之前写的文章《树莓派部署网站(内网穿透)点亮LED灯保姆级教程(五)》,

点击左侧仪表盘的隧道管理——创建隧道:

  • 隧道名称:可自定义,注意不要重复
  • 协议:http
  • 本地地址:
  • 端口类型:随机域名
  • 地区:China vip

输入ip地址和端口(比如我是:192.168.4.1:5000),填写完毕后点击创建,隧道创建成功后,点击左侧的状态——在线隧道列表,可以看到刚刚创建的隧道已经有生成了相应的公网地址,将其复制下来,即可测试访问。

  • 17
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大初哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值