APP入门,贝壳物联，ESP8266

作者: 招风小妖怪 | 来源:发表于2019-07-12 19:26 被阅读0次

APP入门,贝壳物联，ESP8266
Arduino--ESP8266 无线模块(四)
贝壳物联上传温度
【ESP8266】使用uPyLoader调试运行MicroPyt
3-STM32物联网开发WIFI(ESP8266)+GPRS(A
ESP8266 Wifi模块制作Wifi杀手
物联世界商城App
智能家居简单实现---使用ESP8266简单实现和APP通讯
物联网模块ESP8266学习笔记-1
（可远程）App inventor 编写安卓app控制 ESP8

本App使用HTML+CSS+Javascript混合开发

开发工具http://www.dcloud.io

HTML+CSS+Javascript文档查询网站https://www.runoob.com/

MUI视频学习网站http://www.hcoder.net/

MUI文档网站http://dev.dcloud.net.cn/mui/ui/

视频里的例子没有写心跳包，会导致长时间不操作服务器自动关闭连接，现在写在下面并注释

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
</head>
<body>
    
    <button id="btn1" type="button">打开</button>
    <br>
    <br>
    <button id="btn2" type="button">关闭</button>
    <br>
    
    <div class="mui-input-row mui-input-range">
        <label id="label1">Range</label>
        <input id="range1" type="range" min="0" max="1023" value="50">
    </div>
    
    <label id="lb2">123</label>
    
    <script type="text/javascript">
        var ws = new WebSocket("ws://www.bigiot.net:8383");
        var lb = document.getElementById("lb2")
        ws.onopen = function()
       {
          lb.innerText="连接成功"
       };
        ws.onmessage = function (evt) 
        { 
            var received_msg = evt.data;
            lb.innerText=received_msg
            var obj = JSON.parse(received_msg)
            if(obj.M=="WELCOME TO BIGIOT")
            {
                ws.send('{"M":"checkin","ID":"12043","K":"2a3839f1c"}')
            }
            if(obj.M=="ping")//判断是否收到心跳包
            {
                ws.send('{"M":"beat"}')//发送心跳包数据
            }
        };
        document.getElementById("btn1").addEventListener("click",function(){
            ws.send('{"M":"say","ID":"U5739","C":"open123","SIGN":"xx3"}')
        })
        document.getElementById("btn2").addEventListener("click",function(){
            ws.send('{"M":"say","ID":"U5739","C":"close456","SIGN":"xx3"}')
        })
        document.getElementById("range1").addEventListener("touchmove",function(){
            var lb = document.getElementById("label1")
            var rg = document.getElementById("range1")
            lb.innerText=rg.value
            ws.send('{"M":"say","ID":"U5739","C":"'+rg.value+'","SIGN":"xx3"}')
        })
    </script>
    
</body>
</html>