uniapp中关于mqtt的使用总结

最近写了一个项目,其中有个页面需要用到mqtt来通信,以下就是来自我的总结。

先下载mqttjs

yarn add mqtt [email protected]

为什么是3.0版本,网上说高版本连接不稳定,那就用稳定版吧;

mqtt在线测试地址,自带一个可连接的mqtt地址;

  1. 先要一个mqtt的地址:
export const url = '124.**.***.67:8000/mqtt' //mqtt地址端口

记住要他们配置 broker 开 ws 层,终端是tcp,不然也连不通,/mqtt 是必须的,

  1. mqtt的配置项
// 获取clientId  //h5是获取不到的,我这是只用于APP
// const clientId = plus.push.getClientInfo().clientid;


//配置项
export const options = {
	connectTimeout: 5000,
	clientId, //唯一ID 
	username, //账号 非必填 看你们设置没有
	password, //密码 非必填
	clean: true,
}

  1. 到使用mqtt的页面引用,

    1. 引入相关文件
    import {
       url,
       options,
    } from '@/utils/mqtt.js';
       var mqtt = require('mqtt/dist/mqtt.js')
       //申明一个全局变量
       var client;
    

    这里最好用require引入。

    1. 创建一个方法

      //发送信息
      sendMessage(){
      //this.switches 主题名称。buffer 发送的参数。可以是字符串 也可以是 Buffer;
          client.publish(this.switches, buffer, (e) => {
         			console.log(e)
         		})
      },
      
      connect() {
         	var that = this
                             //h5的连接是 'ws://' + url。
         	// #ifdef H5 
         	client = mqtt.connect('ws://' + url, options)
         	// #endif 
                             //app的连接是 'wx://' + url。
         	//#ifdef MP-WEIXIN||APP-PLUS
         	client = mqtt.connect('wx://' + url, options)
         	// #endif
         	client.on('connect', function() {
         		console.log('连接成功')
                                     //that.switches 这是订阅主题名称 和接口地址差不多,是他们定义的,直接拿过来用就行,订阅成功后,就可以接收这个的信息了
         		client.subscribe(that.switches, function(err) {
         			if (!err) {
         				console.log('switches订阅成功')
         			}
         		});
         		client.subscribe(that.drive, function(err) {
         			if (!err) {
         				console.log('drive订阅成功')
         			}
         		});
         	}).on('reconnect', function(error) {
         		console.log('正在重连...', that.switches)
         	}).on('error', function(error) {
         		console.log('连接失败...', error)
         	}).on('end', function() {
         		console.log('连接断开')
         	}).on('message', function(topic, message) {
                             // 统一接受信息。 topic 是订阅的主题名称,message是监听信息的接收和发送都能接收
         		
         	})
         }
      
      
      
      
    2. 页面挂载完毕就调用

      mounted() {
      	this.connect() //连接
      },
      

到这里就已经完成mqttjs的简单使用了,我只有这一个地方用,所以就没有封装,有需要的可以去封装.

在下功力不深,任需继续努力,愿大佬们不吝赐教。感谢!

(原创文章,如有雷同,纯属巧合,如有侵权,立即联系)

你可能感兴趣的:(前端)