vue项目使用mqtt

最新推荐文章于 2024-09-30 15:41:58 发布

潘潘同学

最新推荐文章于 2024-09-30 15:41:58 发布

阅读量1.4k

点赞数 1

文章标签： vue mqtt

本文链接：https://blog.csdn.net/weixin_46391646/article/details/116583136

版权

什么是mqtt

MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上。
MQTT协议是轻量、简单、开放和易于实现的，这些特点使它适用范围非常广泛。在很多情况下，包括受限的环境中，如：机器与机器（M2M）通信和物联网（IoT）。其在，通过卫星链路通信传感器、偶尔拨号的医疗设备、智能家居、及一些小型化设备中已广泛使用。
实现MQTT协议需要客户端和服务器端通讯完成，在通讯过程中，MQTT协议中有三种身份：发布者（Publish）、代理（Broker）（服务器）、订阅者（Subscribe）。其中，消息的发布者和订阅者都是客户端，消息代理是服务器，消息发布者可以同时是订阅者。
MQTT传输的消息分为：主题（Topic）和负载（payload）两部分：
1. Topic，可以理解为消息的类型，订阅者订阅（Subscribe）后，就会收到该主题的消息内容（payload）；
2. payload，可以理解为消息的内容，是指订阅者具体要使用的内容。

vue使用mqtt

下载包

npm i mqtt

抽离mqtt组件子组件
components/mqtt/index.vue

<template></template>

<script>
import {get_mqtt_info} from "@/api/guest-control-manage/room"
import {mapGetters} from "vuex"
import mqtt from 'mqtt'
export default {
  name: "MqttClient",
  data() {
    return {
      client:null
    };
  },
  methods: {
    mqtt_connect(e) {
      //1.通过接口 获取连接信息
      let data = {hotelId: this.hotel_id}
      get_mqtt_info(data).then(({code,data})=>{
        if(code === '0'){
          let options = {
            connectTimeout: 40000,//超时使者
            clientId: data.clientId,//id 随便写 或者 后端返给你
            username: data.userName,//用户名
            password: data.password,.//密码
            clean: true
          }
          // 2.建立mqtt连接
          this.client = mqtt.connect(data.wsMqttUrl,options)//data.wsMqttUrl ==> ws://182.123.1231/mqtt 类似这种 地址找后端要 
          this.client.on('connect', (e) => {
            console.log("mqtt连接成功")
            //3.订阅mqtt信息  data.topics[0] 订阅的路径 /asd/asda 具体找后端要
            this.client.subscribe(data.topics[0], { qos: 0 }, (error) => {
              if (!error) {
                console.log('mqtt订阅成功')
              } else {
                console.log('mqtt订阅失败')
              }
            })
          })
          // 4.接收消息处理
          this.client.on('message', (topic, message) => {
            // console.log('收到来自', topic, '的消息', message.toString())
            //将得到的消息 传递给父组件
            this.$emit("mqtt_message", JSON.parse(message));
          })
        }
      })
    },
    // 断开mqtt连接
    disconnect_mqtt() {
      try {
        console.log("断开mqtt连接");
        if (this.client) {
          this.client.disconnect();
          this.client = null;
        }
      } catch (e) {
        console.log(e);
      }
    }
  },
  computed:{
    ...mapGetters(['hotel_id'])
  }
};
</script>

父组件使用mqtt

</template>
	</div>
		<!--3.使用组件 mqtt通信组件 -->
	    <MqttClient @mqtt_message="mqtt_message" ref="mqtt"/>
	</div>
</template>

<script>
import MqttClient from "@/components/Mqtt/index";//1.引入组件 路径需要改
export default {
components: {MqttClient},//2.注册组件
 data(){
	return {
	}
 }
 created(){	    
	// 建立mqtt连接
    this.$nextTick(() => {
      this.$refs.mqtt.mqtt_connect();
    });
  },
  beforeDestroy () {
    this.$refs.mqtt.disconnect_mqtt();
  },
  methods:{
    //4. 接受mqtt消息 
    mqtt_message(res){
      console.log(res);
    }
  },
}
</script>