uniapp-vue3-h5 MQTT

参考文档快速使用MQTT Web版 SDK实现消息收发 [IM 开发文档]

1.index.html  引入依赖

<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>

2.MQTT.js

// 环信MQTT服务器地址 通过console后台[MQTT]->[服务概览]->[服务配置]下[连接地址]获取
var host = 'up7***.cn1.mqtt.chat'
// 协议服务端口 1883/1884/80/443 通过console后台[MQTT]->[服务概览]->[服务配置]下[连接端口]获取
var port = 443
// appID 通过console后台[MQTT]->[服务概览]->[服务配置]下[AppID]获取
var appId = 'up7**'
// 开发者ID 通过console后台[应用概览]->[应用详情]->[开发者ID]下[ Client ID]获取
var appClientId = 'YXA6IK9E8VotSW-K8X******'
// 开发者密钥 通过console后台[应用概览]->[应用详情]->[开发者ID]下[ ClientSecret]获取
var appClientSecret = 'YXA62lpDqpT5juqc0r-8atW_4m******'
// 环信MQTT REST API地址 通过console后台[MQTT]->[服务概览]->[服务配置]下[REST API地址]获取
var restApiUrl = 'https://api.cn1.mqtt.chat/app/up7**'
//clientId的格式必须是'xxx@appId'
var clientId = ''

// 是否走加密 HTTPS，如果走 HTTPS，设置为 true
var useTLS = false
// cleansession标志
var cleansession = true


//这里交给了后端处理
// export const getAppToken = () => {
// 	uni.request({
// 		url: `${restApiUrl}/openapi/rm/app/token`,
// 		method: 'POST',
// 		data: {
// 			appClientId: appClientId,
// 			appClientSecret: appClientSecret,
// 		},
// 		success: (res) => {
// 			console.log('appToken:' + res.data.body.access_token);
// 			getUserToken(res.data.body.access_token)
// 		}
// 	})
// }

//userName, token  后端返回的
export const getUserToken = (userName, token) => {

	clientId = userName + '@' + appId

	uni.request({
		url: `${restApiUrl}/openapi/rm/user/token`,
		method: 'POST',
		header: { Authorization: token },
		data: {
			username: userName,
			expires_in: 106400,
			cid: clientId
		},
		success: (res) => {
			console.log('userToken:' + res.data.body.access_token);
			acceptMessage(userName, res.data.body.access_token)
		}
	})
}

const acceptMessage = (userName, password) => {

	var client = new Paho.MQTT.Client(host, port, clientId)

	var options = {
		timeout: 3,
		onSuccess: (res) => {
			console.log(res);
			client.subscribe('myTopic', { qos: 1 })
			client.onMessageArrived = onMessageArrived
		},
		mqttVersion: 4,
		cleanSession: true,
		onFailure: function(message) {
			console.log(message)
		}
	}

	options.userName = userName
	options.password = password
	options.useSSL = true

	client.connect(options)
}


const onMessageArrived = (message) => {
	var topic = message.destinationName
	var payload = message.payloadString
	console.log("MQTT消息 : " + topic + "   " + payload)
}