wifi类物联产品配网之web

wifi类物联产品配网之web

上接wifi类物联产品配网前言

web配网介绍

web主要连接设备建立的wifi 热点后，以网页的形式，让用户输入wifi ssid和密码，点击提交给设备进行配网。

优点：

不受wifi频段限制。

缺点：

需要用户手动连接设备wifi热点，手动输入wifi ssid和密码。

web配网实现

1. wifi设备初始化进入AP模式，热点ap信息，然后启动http服务器，监听get和post请求；主要代码如下：

   //建立wifi热点，启动http服务器，监听get和post请求；
   void wifi_webConfigNet()
   {
       int i = 0, key;
       const char *ssid = "qytech";
       const char *password = "12345678";
       
       WiFi.forceSleepWake();
       WiFi.disconnect();
       WiFi.enableSTA(false);
       WiFi.setAutoConnect(true);
       WiFi.setAutoReconnect(true);
       WiFi.mode(WIFI_AP_STA);
       WiFi.softAP(ssid, password);
       IPAddress ipAddr = WiFi.softAPIP();
       Serial.println("htmlConfig ,and enter AP mode,wifi info:");
       Serial.printf("ssid:%s\r\n,password:%s\r\n", ssid, password);
       Serial.print("IP address:");
       Serial.println(ipAddr);
   
       if (MDNS.begin("esp8266"))
       {
           Serial.println("MDNS started");
       }
   
       server.on("/", response_index_page);
       server.on("/handleWifiInfo", HTTP_GET, request_handleWifiInfo);
       server.onNotFound(response_404_error);
   
       server.begin();
       Serial.println(">>HTTP server started");
       while (!httpSeverClose)
       {
           ESP.wdtFeed();
           server.handleClient();
           MDNS.update();
       }
       Serial.println(">>HTTP server stoped");
   }
   

   //对应请求响应server.on("/", response_index_page);
   static void response_index_page()
   {
       loadData(wifiConfig_jsonFile, WIFICONFIG, NULL);
       String htmlStr;
       if (readFile("/index.html", &htmlStr))
       {
           htmlStr.replace("{version}", firmwareVersion);
           htmlStr.replace("{ssid}", WiFi.SSID());
           htmlStr.replace("{password}", WiFi.psk());
           server.send(200, "text/html", htmlStr);
       }
   }
   
   //返回handleWifiInfo请求处理结果
   static void response_result_page()
   {
       loadData(wifiConfig_jsonFile, WIFICONFIG, NULL);
       String htmlStr;
       if (readFile("/result.html", &htmlStr))
       {
           htmlStr.replace("{version}", firmwareVersion);
           htmlStr.replace("{ssid}", wifiConfig.ssid);
           htmlStr.replace("{password}", wifiConfig.password);
           htmlStr.replace("{result}", mqttConfig.deviceId+",Config save,ready to reboot after 10s.");
           server.send(200, "text/html", htmlStr);
       }
   ｝
   
   //对应请求响应server.on("/handleWifiInfo", HTTP_GET, request_handleWifiInfo);
   static void request_handleWifiInfo()
   {
       String ssid = "";
       String password = "";
       ssid = server.arg("ssid");
       password = server.arg("password");
       ssid.trim();
       password.trim();
       if ((!ssid.isEmpty()) and (!password.isEmpty()))
       {
           Serial.println("save web wifi config info:");
           Serial.printf("ssid:%s,password:%s\r\n", ssid.c_str(), password.c_str());
           wifiConfig.ssid = ssid;
           wifiConfig.password = password;
           wifiConfig.configNetType = webConfigNet;
           response_result_page();
       }
       else
       {
           Serial.println("ssid or password is null");
           String htmlStr = "406 error,ssid or password is null\n\n";
           htmlStr += "server uri: ";
           htmlStr += server.uri();
           htmlStr += "\nmethod: ";
           htmlStr += (server.method() == HTTP_GET) ? "GET" : "POST";
           htmlStr += "\nargs: ";
           htmlStr += server.args();
           htmlStr += "\n";
           for (uint8_t i = 0; i < server.args(); i++)
           {
               htmlStr += " " + server.argName(i) + ": " + server.arg(i) + "\n";
           }
           server.send(406, "text/plain", htmlStr);
       }
   }
   
   //对应错误页server.onNotFound(response_404_error);
   static void response_404_error()
   {
       String htmlStr = "404 error,request file not exist\n\n";
       htmlStr += "server uri: ";
       htmlStr += server.uri();
       htmlStr += "\nmethod: ";
       htmlStr += (server.method() == HTTP_GET) ? "GET" : "POST";
       htmlStr += "\nargs: ";
       htmlStr += server.args();
       htmlStr += "\n";
       for (uint8_t i = 0; i < server.args(); i++)
       {
           htmlStr += " " + server.argName(i) + ": " + server.arg(i) + "\n";
       }
       server.send(404, "text/plain", htmlStr);
   }
   

2. 用户连接上边的qytech后，在浏览器端输入192.168.4.1，然后在返回的页面中输入wifi名称，密码点击提交

   

3. 设备接收到配网数据，然后连接该wifi，主要代码：

    
      WiFi.persistent(true);
      WiFi.begin(wifiConfig.ssid, wifiConfig.password);
       while (WiFi.status() != WL_CONNECTED)
       {
           count++;
           if (count > 10)
           {
               Serial.println("\r\n>>wifi connect fail");
               return false;
           }
   
           ESP.wdtFeed();
           Serial.print(".");
           delay(500);
       }
        wifiConnected = true;
       Serial.println("\r\n>>wifi connect success");