WiFi-ESP8266入門http(3-4)網頁一鍵配網(1若為普通wifi直連 2若為西電網頁認證自動網頁post請求連接)+網頁按鈕燈控+MQTT通信


 

網頁一鍵配網(1若為普通wifi直連  2若為西電網頁認證自動網頁post請求連接)+網頁按鈕燈控+MQTT通信

 

工程連接:https://github.com/Dongvdong/ESP8266_HTTP_WEB_MQTT/tree/master/MQTT_http

 

主要目標

  1. 網頁動態配網
  2. 網頁認證模式的WIFI也能讓ESP8266上網

未來完善:

1 加入網頁判斷,若為網頁認證WIFI需要手動文本框輸入 學號和密碼(簡單)

  修改html加入兩個文本框和一個判斷,用於返回消息

  

2 現在固定測試的西電網頁認證上網,其他的學校可能返回請求數據和http應該都不一樣

 

http://10.255.44.33/srun_portal_pc.php?action=login&ac_id=1&user_ip=&nas_ip=&user_mac=&url=&username=+你的學號+&password=+你的密碼;

藍色是地址  紅色是請求數據

這個數據是用電腦抓包軟件得到的。

解決方法1: 每次有一個新的需要網頁認證上網的WIFI,抓包分析,修改程序,新增網頁請求

商用不可行---自己用隨意

解決方法2: 遠程OTA升級ESP8266程序固件

:商用也不可以,需要維護一個服務器,麻煩,總不能每次問下客戶你要連的是哪個學校的,新增加這個學校的

解決方案3: 最好手機有個抓包軟件,自動截取這些信息,網頁返回給ESP8266構造新的HTTp請求。

前面藍色地址,用戶自己手機網頁登陸認證上網成功后,網頁框里就是這個地址,復制走就行了。

后面請求數據,鬼知道這些變量名都是什么。----暫時無解,先卡到這吧。有空在搞。

問題: 手機有個游覽器,自動完成這些http請求和解析。 ESP8266只是一個10元的WIFI芯片,上面哪有游覽器。

但是若是搞定了,10元就能擁有一個在wifi下隨意部署的物聯網節點。

(折騰這么多,還不如買個4g模塊??? )

不,根據應用場景,選這個優勢

1 價格便宜,且不用管電話卡短信月費

2 這本身就是個單片機,可以開發,還有WIFI,背后有arduino開源社區,各種現成的庫調用,各種傳感器模塊對接教程。 4G模塊只能轉發給別的芯片來執行,然后又的對那個執行芯片(stm32等)開發寫程序,研發成本高和時間長。

3 網絡通信庫強悍。   http,tcp/ip .mqtt,udp ,web 等網路通信庫現成直接調用

4 懶,習慣了一個芯片,在滿足需要求前提下,沒那么多時間。

 

---------------------------------------------------------------------------------------------------------

構造這一樣一個請求需要的數據

  • /*網頁認證上網post*/
  • // String Referer="http://10.255.44.33/srun_portal_pc.php?ac_id=1&";
  • // char* host = "10.255.44.33";
  • // int httpPort = 80;
  • // String host_ur = "srun_portal_pc.php";
  • /*網頁認證上網模式 */
  • // String usr_name;//賬號
  • // String usr_pwd;//密碼
  • // String postDate = String("")+"action=login&ac_id=1&user_ip=&nas_ip=&user_mac=&url=&username=+"+usr_name+"&password="+usr_pwd;

------------------------------------------------------------------------------------------------------

實物測試:

1一塊 esp8266 可供arduino開發的芯片,串口連接電腦

2 供測試的無線網絡

一個普通的家庭路WIFI

wifiname: HUAWEI-H3VBKZ wifipwd: ************

一個網頁認證模式上網的網絡(網頁輸入學號和密碼才能上網)

西電校園網:std-xdwlan

3 手機安裝MQTT調試助手

4 一個部署在阿里雲的MQTT服務器(主要用來測試ESP8266模塊是否接正常入網絡)

(顯示屏和蜂鳴器沒用)

 

 

 

 程序和功能:

1 芯片上電,自動輻射WIFI

 

 

 2 打開網頁輸入 IP   192.168.4.1   默認訪問  / 請求

 

得到ESP8266返回的配網頁面 index.html 

這個配網網頁 index.html 事先存在ESP8266的flash中,在工程同目錄下 data文件夾

網頁還有網頁的其他布局信息 css  和 js

燒錄程序后,需要單獨上傳到falsh中,  點擊,上傳時候板子的參數設置(根據版型選擇,這里用的是

 

 

 

 直接按鈕,網頁發送 “/pin”(網頁寫的功能,可修改)請求可以控制板載 D4口LED關和開。

根據前面設置,按鈕請求 /pin 解析回調函數 handlepin()

燈的請求處理函數

 

3 一鍵配網

在下面輸入要連接的wifi賬號和密碼

點擊連接,網頁 發出 “wifi/”  請求(網頁功能,可修改html自定義功能)

觸發回調函數handleWifi()

 

esp8266串口向電腦打印出信息

手機網頁得到提示信息。

 

自動連接目標wifi,返回成功與否。

如果是普通家庭WIFI,直接連

 

如果是西電網頁認證模式的WIFI(用西電測試,其余類似),再上一步基礎上,自動額外發起網頁認證。

前提: 有一個可以上網的學號和密碼 (目前寫死固定,后期做成網頁文本框手動輸入)

 對應函數

void http_wifi(){
  
  // 西電網頁認證上網信息  對應信息修改后,可連接別的類似網絡
  http_request ruqest;
  ruqest.Referer="http://10.255.44.33/srun_portal_pc.php?ac_id=1&";
  ruqest.host = "10.255.44.33";
  ruqest.httpPort = 80;
  ruqest.host_ur = "srun_portal_pc.php";
  ruqest.usr_name="1601120383";//賬號
  ruqest.usr_pwd="mimaHENFuzb";//密碼  密碼已修改 要-1
  ruqest.postDate = String("")+"action=login&ac_id=1&user_ip=&nas_ip=&user_mac=&url=&username=+"+ ruqest.usr_name+"&password="+ruqest.usr_pwd;
     

   if (hdulogin(ruqest) == 0) {
    
      Use_Serial.println("WEB Login Success!");
    }
    else {
      
      Use_Serial.println("WEB Login Fail!");
    }
  
  }

// 這個函數用來發起post請求 --可通用 int hdulogin(struct http_request ruqest) { WiFiClient client; if (!client.connect(ruqest.host, ruqest.httpPort)) { Use_Serial.println("connection failed"); return 1; } delay(10); if (ruqest.postDate.length() && ruqest.postDate != "0") { String data = (String)ruqest.postDate; int length = data.length(); String postRequest = (String)("POST ") + "/"+ruqest.host_ur+" HTTP/1.1\r\n" + "Host: " +ruqest.host + "\r\n" + "Connection: Keep Alive\r\n" + "Content-Length: " + length + "\r\n" + "Accept: */*\r\n" + "Origin: http://"+ruqest.host+"\r\n" + "Upgrade-Insecure-Requests: 1"+"\r\n" + "Content-Type: application/x-www-form-urlencoded;" + "\r\n" + "User-Agent: zyzandESP8266\r\n" + "Accept-Encoding: gzip, deflate"+"\r\n" + "Accept-Language: zh-CN,zh;q=0.9"+"\r\n" + "\r\n" + data + "\r\n"; client.print(postRequest); delay(600); //處理返回信息 String line = client.readStringUntil('\n'); while (client.available() > 0) { line += "\r\n"+client.readStringUntil('\n'); } Use_Serial.println(line); client.stop(); if (line.indexOf("時間") != -1 || line.indexOf("登陸") != -1) { //認證成功 return 0; Use_Serial.println("time ----------- find "); } else { return 2; } } client.stop(); return 2; }

  

4 連接WIFI成功后,直接自動連接MQTT服務器

 這是一個部署在公網的mqtt服務器

訂閱話題 “/test”  手機往這丟消息 ,esp8266從這拿消息。

 

 esp8266只要一從這個話題上收到消息,就執行回掉函數

回電函數就干一件事,像電腦串口打印數據(里面可自定義功能)

拿起手機發消息往 "/test" 話題下丟消息

 

ESP8266收到后,串口打印出來(不支持中文打印,亂碼)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM