【Arduino】ESP8266网页端数据传输与控制（序）

上次完成网页传输，发现每次通过文本方式传输一个数据，当数据少的时候还可以，数据多的时候会耗时较长，且占用资源，比如目前设定300ms一次数据请求，假如十笔数据，需要请求十次，需要大概需要1-2s，那数据更新会不及时。

现改为通过json方式传输，可一次传输多个数据，占用服务器资源比较少，响应也是比较快的，

传输的json内容，目前传输是个变量

从客户端发起请求到完成数据接收，耗时大概130ms

实现方式:

//服务端，对客户端请求响应
   esp8266_server.on("/readdata", handlepolldata);


//json数据发送
void handlepolldata()
{
    // 处理网站目录“/”的访问请求
    esp8266_server.send(200, "application/json", rootJson()); // 20221120   旧版无法解析
                                                              // esp8266_server.send(200, "text/plain", rootJson()); // 20221120   改为网络方法
}

//json数据整合
String rootJson()
{
    String jsonCode = "{\"als_lux\": \"";
    jsonCode += String(html_play.als_lux);
    jsonCode += "\",\"als_ch0\": \"";
    jsonCode += String(html_play.als_ch0);
    jsonCode += "\",\"als_ch1\": \"";
    jsonCode += String(html_play.als_ch1);
    jsonCode += "\",\"als_ch2\": \"";
    jsonCode += String(html_play.als_ch2);

    jsonCode += "\",\"ps_status\": \"";
    jsonCode += String(html_play.ps_status);
    jsonCode += "\",\"ps_pdata\": \"";
    jsonCode += String(html_play.ps_pdata);
    jsonCode += "\",\"ps_irdata\": \"";
    jsonCode += String(html_play.ps_ir_data);
    jsonCode += "\",\"h_thd\": \"";
    jsonCode += String(html_play.ps_l_thd);
    jsonCode += "\",\"l_thd\": \"";
    jsonCode += String(html_play.ps_h_thd);
    jsonCode += "\",\"analog_pin\":  \"";
    jsonCode += String(analogRead(A0));
    jsonCode += "\"}";

    Serial.print("jsonCode: ");
    Serial.println(jsonCode);

    return jsonCode;
}

服务端发起请求，接收数据并解析

 <script>
        setInterval(function () {
            // alsgetData();
            // alsluxgetData();
            // psgetData();
            // psstatusgetData();
            pollgetData();
        }, 300); //2000mSeconds update rate     
        //json获取及解析参考：https://www.runoob.com/ajax/ajax-json.html
        //json获取及解析参考：https://www.runoob.com/json/json-parse.html
        //https://c.runoob.com/front-end/53/
        function pollgetData() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            }
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  // IE6, IE5 浏览器执行代码
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var myArr = JSON.parse(this.responseText);
                    myFunction(myArr);
                }
            }
            //Sxmlhttp.open("GET", "/try/ajax/json_ajax.json", true);
            xmlhttp.open("GET", "readdata", true);
            xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xmlhttp.send();
        }
        function myFunction(arr) {

            document.getElementById("als_lux").innerHTML = arr.als_lux;
            document.getElementById("als_ch0").innerHTML = arr.als_ch0;
            document.getElementById("als_ch1").innerHTML = arr.als_ch1;
            document.getElementById("als_ch2").innerHTML = arr.als_ch2;
            document.getElementById("ps_status").innerHTML = arr.ps_status;
            document.getElementById("ps_pdata").innerHTML = arr.ps_pdata;
            document.getElementById("ps_ir_data").innerHTML = arr.ps_irdata;
            document.getElementById("analog_pin").innerHTML = arr.analog_pin;
            document.getElementById("h_thd").innerHTML = arr.h_thd;
            document.getElementById("l_thd").innerHTML = arr.l_thd;
        }
    </script>

整体使用起来还是比较舒服的，对于网页，本人小白复制粘贴得来，大神勿喷，若有好的方式，请赐教

【Arduino】ESP8266网页端数据传输与控制（序）

猜你喜欢