master

分支 (1)

管理

管理

master

aliyun-mqtt-web
/
index.html

<!DOCTYPE html>
<html>

<head>

</head>

<body unresolved="" class="nochrome">

  <script src="./js/alibabacloud-iot-device-sdk.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@3.12.0/dist/xterm.css" />
  <script src="https://cdn.jsdelivr.net/npm/xterm@3.12.0/dist/xterm.js"></script>
  <!-- nes -->
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
  <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />

  <style>
    html,
    body,
    pre,
    code,
    kbd,
    samp {
      font-family: "font-family you want to use";
      text-align: center;
    }

    .buts {
      margin: 50px auto;
    }
  </style>

  <script>
    var term = new Terminal({
      'drawBoldTextInBrightColors': true
    });
    console.log = function (str) {
      term.writeln(str)
    }
    term.open(document.getElementById('terminal'));
    term.writeln('alibabacloud-iot-device-sdk,请连接后使用功能')
    const sdk_device2 = {
      productKey: 'a16O8o13VKv',
      deviceName: 'mqttapp',
      deviceSecret: 'sTcYpB1s8gbuCCZV2sYuYHQBxzSmvNhK',
    }
    const sdk_device3 = {
      productKey: "a16O8o13VKv",
      deviceName: "mqttstm32",
      deviceSecret: "paknEW81oZGNnkVt2hFDEM0JJjp3nNMc"
    }
    let Topic = `/a16O8o13VKv/mqttapp/user/control`
    let device;

    function connect() {
      if (!device) {
        term.writeln('开始连接....');
        device = iot.device(sdk_device2);
        // 测试上报一条设备标签数据
        device.on('connect', (res) => {
          term.writeln('连接成功....', res)
        });
        device.on('error', (err) => {
          term.writeln('连接错误,error => ', err);
        });
        device.onShadow((res) => {
          term.writeln('获取最新设备影子,' + JSON.stringify(res));
        });
        device.on('message', (topic, message) => {
          term.writeln('topic => '+ topic);
          term.writeln('message => '+ JSON.stringify(message));
          // term.writeln('packet => '+ JSON.stringify(packet));
        });
      }
    }

    function publish() {
      // 向topic发送消息
      device.publish(Topic, 'message', {qos:1}, (res) => {
        console.log('Topic', Topic);
        console.log("主题发布成功 => " + JSON.stringify(res));
      });
    }

    function subscribe() {
      // 订阅消息
      device.subscribe(Topic, (res) => {
        console.log('Topic', Topic);
        console.log("主题订阅成功 => " + JSON.stringify(res));
      });
    }

    function unsubscribe() {
      // 取消订阅消息
      device.subscribe(Topic, (res) => {
        console.log("取消订阅成功 => " + JSON.stringify(res));
      });
    }

    function postProps() {
      // 上报物模型属性
      device.postProps({
        IndoorTemperature: 27.50,
        airHumidity: 34.09,
        LightStrong: 87.0,
        LightSwitch: 1
      }, (res) => {
        console.log('上报物模型属性 => '+ JSON.stringify(res));
      });
    }

    function postEvent() {
      // 上报物模型事件
      device.postEvent("lowpower", {
        power: 10,
      }, (res) => {
        console.log("postEvent => "+JSON.stringify(res));
      })
    }

    function End() {
      // 设备主动断开
      device.end();
    }

    function addTags() {
      // 添加标签ok
      device.postTags(
        [{
            "attrKey": "Temperature",
            "attrValue": "311"
          },
          {
            "attrKey": "a",
            "attrValue": "avalue"
          },
          {
            "attrKey": "b",
            "attrValue": "bvalue"
          }
        ],
        (res) => {
          console.log("添加标签成功 => " + JSON.stringify(res));
        }
      );
    }

    function deleteTags() {
      // 删除标签ok
      device.deleteTags(['a', 'b'], (res) => {
        console.log("删除标签成功 => " + JSON.stringify(res));
      });
    }

    function getConfig() {
      // 获取设备远程配置
      device.getConfig((res) => {
        console.log("getConfig => "+ res);
      });
    }

    function onConfig() {
      // 订阅设备远程配置
      device.onConfig((res) => {
        console.log("onConfig,res => "+ res);
      });
    }

    function onShadow() {
      // 订阅设备影子
      device.onShadow((res) => {
        console.log('获取最新设备影子,%o', res);
      });
    }

    function getShadow() {
      // 获取设备影子最新
      device.getShadow();
    }

    function postShadow() {
      // 上报设备影子数据
      device.postShadow({
        IndoorTemperature: 27.50,
        airHumidity: 34.09,
        aLightStrong: 87.0,
        LightSwitch: 59
      });
    }

    function deleteShadow() {
      // 删除影子设备的属性值
      device.deleteShadow(["a"]);
    }
  </script>

  <div id="terminal"></div>
  <div class="buts">
    <button type="button" class="nes-btn is-primary" onclick="connect()">connect</button>
    <button type="button" class="nes-btn is-error" onclick="onConfig()">onConfig</button>
    <button type="button" class="nes-btn is-error" onclick="publish()">向topic发送消息</button>
    <button type="button" class="nes-btn is-error" onclick="subscribe()">订阅消息</button>
    <button type="button" class="nes-btn is-error" onclick="unsubscribe()">取消订阅消息</button>
    <button type="button" class="nes-btn is-error" onclick="postProps()">上报物模型属性</button>
    <button type="button" class="nes-btn is-error" onclick="postEvent()">上报物模型事件</button>
    <button type="button" class="nes-btn is-primary" onclick="End()">End</button>
    <button type="button" class="nes-btn is-error" onclick="addTags()">addTags</button>
    <button type="button" class="nes-btn is-error" onclick="deleteTags()">deleteTags</button>
    <button type="button" class="nes-btn is-error" onclick="getConfig()">getConfig</button>
    <button type="button" class="nes-btn is-error" onclick="onConfig()">订阅设备远程配置</button>
    <button type="button" class="nes-btn is-error" onclick="onShadow()">订阅设备影子</button>
    <button type="button" class="nes-btn is-warning" onclick="getShadow()">获取设备影子最新</button>
    <button type="button" class="nes-btn is-warning" onclick="postShadow()">上报设备影子数据</button>
    <button type="button" class="nes-btn is-error" onclick="deleteShadow()">删除影子设备的属性值</button>
  </div>

  <!-- github -->
  <a href="https://github.com/aliyun/alibabacloud-iot-device-sdk"> alibabacloud-iot-device-sdk <i
      class="nes-octocat animate"></i></a>

</body>

</html>