ESP8266实现联网配置

搬砖道人

已于 2023-02-04 19:22:39 修改

阅读量2.2k

点赞数 2

分类专栏： ESP01S 文章标签：网络 java 开发语言 c++ ESP8266

于 2023-02-04 18:54:28 首次发布

本文链接：https://blog.csdn.net/lovehuanhuan1314/article/details/128883812

版权

ESP01S 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

ESP8266的wifi设置网上已经很多文章，本文也是配置wifi信息，但是是一种自定义的通用方式而不仅仅用来配置wifi设置。本文通过使用ESP8266WebServer来实现一个网页配置。

先上代码

class CAutoConnect
{
    CConfigMgr m_configMgr;
    ESP8266WebServer m_autoConfigWebServer;
    bool m_bRunFirst = true;

    void TryConnect(const char *SSID, const char *PSW)
    {
        int tryCount = 0;
        WiFi.begin(SSID, PSW);
        while ((tryCount < MAX_TRY_COUNT) && (WiFi.status() != WL_CONNECTED))
        {
            delay(1000);
            tryCount++;
        }
    }

    void HandleHtmlRoot()
    {
        m_autoConfigWebServer.send(200, "text/html", AutoConfigHTML);
    }

    void HandleHtmlAutoConfig()
    {
        String ssid, psw;
        ssid = m_autoConfigWebServer.arg("ssid");
        psw = m_autoConfigWebServer.arg("psw");
        Serial.println("尝试连接路由器，SSID: " + ssid + "密码: " + psw);

        TryConnect(ssid.c_str(), psw.c_str());

        if (WiFi.status() == WL_CONNECTED)
        {
            m_autoConfigWebServer.send(200, "text/html", "hello esp8266");

            Serial.println("----------连接路由器成功");
            m_configMgr.SetSSID(ssid.c_str());
            m_configMgr.SetPSW(psw.c_str());
            // 保存一下，这玩意儿一般就是拔电。要自动析构保存怕是比较难
            m_configMgr.SaveConfig();
        }
        else
        {
            Serial.println("连接路由器失败------------");
        }
    }

    void HtmlConfigInit()
    {
        WiFi.mode(WIFI_AP_STA); // 双模式
        IPAddress ip, gateway, subnet;
        ip.fromString("192.168.1.1");
        gateway.fromString("192.168.1.1");
        subnet.fromString("255.255.255.0");
        WiFi.softAPConfig(ip, gateway, subnet);

        WiFi.softAP(AUTOCFGSSID, AUTOCFGPSW);

        m_autoConfigWebServer.on("/", std::bind(&CAutoConnect::HandleHtmlRoot, this));
        m_autoConfigWebServer.on("/AutoConfig", HTTP_GET, std::bind(&CAutoConnect::HandleHtmlAutoConfig, this));
        m_autoConfigWebServer.begin(80);
    }

    void HtmlConfig(bool useTimeout=false)
    {

        unsigned long start = millis();

        while (true)
        {
            m_autoConfigWebServer.handleClient();
            if (WiFi.status() == WL_CONNECTED)
            {
                Serial.println("----配网成功----");
                m_autoConfigWebServer.close();
                break;
            }
            // 60秒还没有连接则退出
            if (useTimeout&&(millis() - start >= 60 * 1000))
            {
                break;
            }
        }
    }

public:
    CAutoConnect() : m_configMgr()
    {
        HtmlConfigInit();
    }

    ~CAutoConnect() {}

    void AutoConnect()
    {
        if (m_bRunFirst)
        {
            HtmlConfig(true);
            m_bRunFirst = false;
        }

        // wifi已经连接直接退出
        if (WiFi.status() == WL_CONNECTED)
            return;

        if ( m_configMgr.IsValid())
        {
            TryConnect(m_configMgr.SSID().c_str(), m_configMgr.PSW().c_str());
            if (WiFi.status() == WL_CONNECTED)
                return;
        }
        Serial.println("进入HTML配网模式");
        HtmlConfig();
    }
};

CConfigMgr 是一个配置保存和读取类，这个另外说。

CAutoConnect的AutoConnect方法来实现自动配置和连接wifi（当然也可以配置其它参数）；如果是开机启动则进入60秒配网模式，这个时候在192.168.1.1即可打开网页配置。AutoConfigHTML 为配置网页。如果60秒没有通过网页配置，它则从保存的配置来设置wifi。当然保存的连接不可用也会进入网页配网模式。

const char *AutoConfigHTML = u8R"esp8266_html(<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF8">
    <title>ESP8266自动配置</title>
</head>

<body style="font-size: 30px">

    <style>
        .inputText{
            height: 38px;
            font-size: 30px;
            line-height: 30px;
            padding-left: 15px;
            border-radius: 10px;
            background-color: #dff1f7;
            border: 2;
        }
        .inputText:focus{
            outline: none;
            background-color: #d6e4eb;
        }
        .buttonText{
            height: 38px;
            font-size: 30px;
            line-height: 30px;
            padding-left: 15px;
            border-radius: 10px;
            background-color: #FE5E08;
            border: none;
        }
        .buttonText:focus{
            outline: none;
            background-color: #FE5E08;
        }
    </style>

    <center>
        <form>
            <table>
                <tr>
                    <td>Wifi SSID:</td>
                    <td><input type="text" class="inputText" id="SSID" placeholder="WIFI SSID"></td>
                </tr>
                <tr>
                    <td>Wifi 密码:</td>
                    <td><input type="text" class="inputText" id="PSW" placeholder="WIFI PASSWORD"></td>
                </tr>
            </table>
            <input type="button" class="buttonText" value="连接到WIFI" onclick="configWifi()">
        </form>
    </center>
    <script language="javascript">
        function isNotEmptyStr(s) {
            if (typeof s == 'string' && s.length > 0) {
                return true
            }
            return false
        }
        function configWifi() {
            var ssid = SSID.value;
            var psw = PSW.value;
            if (!isNotEmptyStr(ssid)) {
                alert("请输入有效的SSID");
                return;
            }
            if (!isNotEmptyStr(psw)) {
                alert("请输入有效的Wifi密码");
                return;
            }
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", "/AutoConfig?ssid=" + ssid + "&psw=" + psw, true);
            xmlhttp.send();
        }
    </script>
</body>

</html>)esp8266_html";