網頁一鍵配網(1若為普通wifi直連 2若為西電網頁認證自動網頁post請求連接)+網頁按鈕燈控+MQTT通信
工程連接:https://github.com/Dongvdong/ESP8266_HTTP_WEB_MQTT/tree/master/MQTT_http
主要目標
- 網頁動態配網
- 網頁認證模式的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收到后,串口打印出來(不支持中文打印,亂碼)