vue中使用mqtt

1.安装mqtt

npm install mqtt --save

2.在vue文件中引入mqtt

import mqtt from "mqtt";

3.在data中声明client对象

 data () {
      return {
        client:null,
        userTopic:[]  //后台返回的订阅主题
      }
    },

4.methos中使用

const WebSocket_URL = "自己的地址";  
const options = {
      // 超时时间
      // connectTimeout: 30000,
      // 认证信息
      clientId:'',  //Ukey序列号，（本人项目用到ukey验证）
      username: '', //用户名
      password :'', //密码

      // 心跳时间
      keepalive: 60,
      clean: true,
      reconnectPeriod:2000
};
this.client = mqtt.connect(WebSocket_URL, options);  //连接mqtt
this.client.on("connect", () => {
	console.log("Connected to", WebSocket_URL);
	
   // 订阅主题
    for ( var i = 0; i <this.userTopic.length; i++){  
    // client.subscribe(that.userTopic[i]);
        this.client.subscribe(this.userTopic[i], err => {
            console.log(err || "订阅成功");
        });
    }
});
// 为 message 时间添加处理函数
this.client.on("message", (topic, message) => {
   this.set_message(message.toString());  //拿到实时的数据
   console.log("收到来自", topic, "的消息:", message.toString());
});
var n =0;
this.client.on("offline", () => {

	 console.log("offline");
	 this.$message.error('订阅失败');
	 n++;
	 // console.log(n,'订阅失败次数')
	 if(n>=20){   //订阅失败次数达20次就检测U盾是否存在
	     this.get_ukey();
	     n=0;
	 }
});
this.client.on("error", error => {
   console.log("error is", error.toString);
});

this.client.on("end", () => {
   console.log("end");
});

5.关闭mqtt

 this.client.end();

交流
1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解 群号: 856402057

2、公众号：公众号「进军全栈攻城狮」

对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上，共勉！