vue使用MQTT连接阿里云物联网平台获取实时数据

最近在做毕业设计，网页端的话前端使用了vue3,后端是node写的数据接口，运行的话是直接在本地，作为物联网工程的毕业生，当然毕业设计是少不了传感层了，一大堆任务，前面已经完成了两个安卓app,网页的增删改查和数据的可视化(echart)，接下来就是网页与硬件的对接了，硬件的话选择的是阿里云的物联网平台，之前已经在平台上创建了自己的产品了，这里具体怎么操作就不多说了，不会使用物联网平台的小伙伴可以参考一下 阿里云物联网平台的使用，这里讲得还是很详细的，没有硬件的小伙伴也不用着急，阿里云提供了设备模拟器，接下来我使用的也是模拟器(硬件还没怎么用到，懒得去连),好了，话不多说，直接开撸。

登陆阿里云平台进入到物联网控制台，选择文档与工具

 进入文档后选择物联网设备接入与管理

 进入之后选择设备接入

然后选择MQTT协议接入下的MQTT-WebSocket连接通讯

 然后在文档中你可以看到ws方式的连接域名(你也可以选择wss方式，需要其他配置，这里直接使用ws),图中的pk是指你创建好的物联网产品的ProductKey

 vue方面,需要安装mqtt库

 安装成功后即可使用，代码中的id,username,password都是你物联网平台的设备信息，不过这些信息不能直接使用，需要进行格式转化后再能进行连接，我使用的是MQTT工具(技小新)，你也可以选择其他的，有需要的可以留言我发给你

import mqtt from "mqtt";
export default defineComponent({
  name: "App",
  components: {},
  setup() {
    const message = ref("连接mqtt");
    const mqttvalue = ref("mqtt接收的值");
    let options = {
      connectTimeout: 4000, //超时使者
      clientId: "你的id", //id
      username: "你的用户名", //用户名
      password: "你的密码", //密码
      cleanSession: false,
      keepAlive: 60,//心跳值，心跳值太大可能会连接不成功，这个参考文档
    };

    let client = mqtt.connect(
      "ws://pk.iot-as-mqtt.cn-shanghai.aliyuncs.com:443",//上面在文档中的连接域名
      options
    );

    const connect = () => {
      client.on("connect", (e) => {
        message.value = `连接成功${e}`;
        console.log("连接成功", e);
        client.subscribe(
          "/sys/gcnbHOHvHJr/Androidapp/thing/service/property/set",//这里是订阅的主题，这里参考我给的链接
          { qos: 0 },
          (error) => {
            console.log(error);
          }
        );
      });
    };

    const duankai = () => {
      client.end();

      console.log("断开");
    };
    // client.on("reconnect", (error: any) => {
    //   console.log("正在重连", error);
    // });
    client.on("error", (error) => {
      console.log("连接出错", error);
    });
    client.on("message", (topic, message) => {
      mqttvalue.value = message.toString();
      console.log(`接收${topic}消息:${message.toString()}`);
    });

    return {
      message,
      connect,
      duankai,
      mqttvalue,
    };
  },
});

运行代码，在阿里云使用设备模拟器进行数据发送(注意选择的是硬件的设备模拟器,直接在硬件的设备选择在线调试，去往设备模拟器),注意这里选择的是属性上报，然后发送即可

这样你就可以在vue中接收发送的数据了

 

好啦，到这里就结束了，接下来就是对数据的处理了，也已使用数据可视化美化一下，最后吐槽一下，做毕业设计是真的累，但也是提升自己的一个很好的机会，哈哈哈，加油吧！骚年