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", //idusername: "你的用户名", //用户名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中接收发送的数据了

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