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

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

主要目标

  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模块是否接正常入网络)

(显示屏和蜂鸣器没用)

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

程序和功能:

1 芯片上电,自动辐射WIFI

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

2 打开网页输入 IP   192.168.4.1   默认访问  / 请求

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

得到ESP8266返回的配网页面 index.html

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

这个配网网页 index.html 事先存在ESP8266的flash中,在工程同目录下 data文件夹

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

网页还有网页的其他布局信息 css  和 js

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

烧录程序后,需要单独上传到falsh中,  点击WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信,上传时候板子的参数设置(根据版型选择,这里用的是WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

直接按钮,网页发送 “/pin”(网页写的功能,可修改)请求可以控制板载 D4口LED关和开。

根据前面设置,按钮请求 /pin 解析回调函数 handlepin()

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

灯的请求处理函数

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

3 一键配网

在下面输入要连接的wifi账号和密码

点击连接,网页 发出 “wifi/”  请求(网页功能,可修改html自定义功能)

触发回调函数handleWifi()

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

esp8266串口向电脑打印出信息

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

手机网页得到提示信息。

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

自动连接目标wifi,返回成功与否。

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

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

如果是西电网页认证模式的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从这拿消息。

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

esp8266只要一从这个话题上收到消息,就执行回掉函数

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

回电函数就干一件事,像电脑串口打印数据(里面可自定义功能)

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

拿起手机发消息往 "/test" 话题下丢消息

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

ESP8266收到后,串口打印出来(不支持中文打印,乱码)

WiFi-ESP8266入门http(3-4)网页一键配网(1若为普通wifi直连  2若为西电网页认证自动网页post请求连接)+网页按钮灯控+MQTT通信

上一篇:apache启动但是无法访问网页


下一篇:JavaScript -- Window-Move,Print