记录一下uniapp vue3 mqtt app端的接入

原生微信小程序 MQTT.js 可用版本有 v4.2.1、v4.2.0、v4.1.0 和 v2.18.9
npm install mqtt@4.2.1  ||  yarn add mqtt@4.2.1


使用 uniapp 框架搭建微信小程序 MQTT.js 可用版本有 v4.1.0 和 v2.18.9
npm install mqtt@4.1.0  ||  yarn add mqtt@4.1.0

app这里用 npm install mqtt@4.1.0

引入： import * as mqtt from 'mqtt/dist/mqtt.js'

// #ifdef H5
client = mqtt.connect('ws://' + MQTT_GATWAY, MQTT_OPTIONS)
// #endif
// #ifdef APP-PLUS
console.log('applus')
client = mqtt.connect('wx://' + MQTT_GATWAY, MQTT_OPTIONS)
// #endif

 

因为这个版本中，内置的是微信小程序的引用，所以这里改一下mqtt.js中的代码

这一行，未修改之前，使用的是 wx.connectSocket，修改之后：uni.connectSocket

重点：要加上 complete:()=>{}, 因为：....

 ------------------------------------------------------------------------------------------------------------------------------------------------------>

发下完整的util类

import * as mqtt from 'mqtt/dist/mqtt.js'

const MQTT_GATWAY = '域名/ip:8083/mqtt'
const MQTT_USERNAME = 'username'
const MQTT_PASSWORD = '123456'
var client=null;
export const initMqttClient = (subscribeTopic)=>{
	var MQTT_OPTIONS = {
		connectTimeout: 5000,
		clientId: '111@111.com',
		username: MQTT_USERNAME,
		password: MQTT_PASSWORD,
		clean: false
	}
	console.log('stating init mqtt')
	
	// #ifdef H5
	client = mqtt.connect('ws://' + MQTT_GATWAY, MQTT_OPTIONS)
	// #endif
	// #ifdef APP-PLUS
	console.log('applus')
	client = mqtt.connect('wx://' + MQTT_GATWAY, MQTT_OPTIONS)    
	// #endif 
	
	client.on('connect', () => {
		console.log('连接成功!')
		client.subscribe(subscribeTopic, (err) => {
			if (!err) {
				console.log('订阅成功!')
				
				setTimeout(()=>{
					mqttPublish('aaaa',{type:1,pay:true})
				},1000)
			}
		})
		
		client.on('reconnect', (err) => {
			console.log('正在重连...' + subscribeTopic)
		}).on('end', (err) => {
			console.log('连接断开!')
		})
	})
	
	client.on('message', (topic, message, packet) => {
	  console.log('Received Message: ' + message.toString() + '\nOn topic: ' + topic)
	})
}

export const mqttPublish = (topic, data) => {
	client.publish(topic, JSON.stringify(data), {
		qos: 1
	})
}