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

Posted 2021-01-05 kekeoutlook

 

网页一键配网（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
" +
                         "Host: " +ruqest.host + "
" +
                         "Connection: Keep Alive
" +
                         "Content-Length: " + length + "
" +
                         "Accept: */*
" +
                         "Origin: http://"+ruqest.host+"
" +
                          "Upgrade-Insecure-Requests: 1"+"
" +
                         "Content-Type: application/x-www-form-urlencoded;" + "
" +
                         "User-Agent: zyzandESP8266
" +
                          "Accept-Encoding: gzip, deflate"+"
" +
                          "Accept-Language: zh-CN,zh;q=0.9"+"
" +                     
                         "
" +
                         data + "
";

    client.print(postRequest);
    delay(600);
    //处理返回信息
    String line = client.readStringUntil(‘
‘);
    while (client.available() > 0) {
      line += "
"+client.readStringUntil(‘
‘);
    }
    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收到后，串口打印出来（不支持中文打印，乱码）