mqtt+uniapp 发布/订阅实例_uniapp封装mqtt

mqtt+uniapp 发布/订阅实例

TIPS：以下实例不对uniapp做过多的阐述

1.uniapp引入基础插件

1. npm install mqtt@3.0.0，注意不要引入过高的版本，可能会出现问题。此处引入3.0.0版本。
2. npm install uuid，主要用于生成随机用户id，用于访问mqtt服务器。

2.封装全局mqtt接口实例

// export const MQTT_IP = '192.168.1.173:8083/mqtt'

export const MQTT_IP = 'localhost:8083/mqtt'

const MQTT_USERNAME = 'admin'
const MQTT_PASSWORD = 'public'

export const MQTT_OPTIONS = {
	connectTimeout: 5000,
	clientId: '',
	username: MQTT_USERNAME,
	password: MQTT_PASSWORD,
	clean: false
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.在vue文件的script区域进行配置

main.vue：

<script>
	import {
		v4
	} from 'uuid' //mqtt里面的clientId用uuid生成唯一标识符,防止不同页面订阅主题时出现数据粘连
	import {
		MQTT_IP,
		MQTT_OPTIONS
	} from '@/util/mqtt.js'
	var mqtt = require('mqtt/dist/mqtt.js')
	var client;

	export default {
		data() {
			return {
				topic: 'M3',
				sendTopic: 'setM3'
			};
		},
		mounted() {
			this.connect()
		},
		methods: {
			//发布消息接口
			sendPublish(data) {
				console.log('发布：', data)
				//生成访问mqtt的用户id
				MQTT_OPTIONS.clientId = v4()
				client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
				client.on('connect', () => {
					console.log("connnect success!")
					client.publish(this.sendTopic, JSON.stringify(data), {
						qos: 1
					})
				}).on('error', (err) => {
					console.log(err)
					client.end()
				})
			},
			//订阅接口
			connect() {
				MQTT_OPTIONS.clientId = v4()
				client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
				client.on('connect', () => {
					console.log('连接成功!')
					client.subscribe(this.topic, (err) => {
						if (!err) {
							console.log('订阅成功!')
						}
					}).on('reconnect', (err) => {
						console.log('正在重连...' + this.topic)
					}).on('end', (err) => {
						console.log('连接断开!')
					}).on('message', (topic, message) => {
						try {
							let data = JSON.parse(message)
							console.log('接收推送信息:', data)
						} catch (e) {
							console.log("Caught: " + e.message)
						}
					})
				})
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65