uniapp mqtt的使用示例

一、业务说明

业务线是这样的：

1、检测设备是否已完成检测。

如果完成检测，展示检测结果即可。
如果未检测过，自动触发mqtt服务连接，监听检测信息。

2、MQTT监听

监听时长为30秒。
如果提前检测通过，自动弹出设备通过二维码。赋予绿码。
如果30秒结束未通过检测，即为设备检测未通过。二维码赋予红码，不自动弹出。

3、二维码及检测记录

设备提前检测通过，通知服务端，检测时长以便生成检测记录。
设备未通过检测，当用户点击查看二维码时，通知服务端生成检测记录。

4、重新检测

在当前检测批次中，检测未通过时或已有检测记录的，可以重新检测。
检测批次过期后，都不可以重新检测。

二、安装mqtt

在uniapp项目根目录，打开命令行。

npm install mqtt@3.0.0

这样安装，容易遗失该项目使用的依赖列表。
建议：

1、安装前，在项目根目录执行

npm init

这样，在项目根目录会创建一个文件package.json。这样从git上重新获取到项目按列表安装一下就可以了。

2、有人讲，我只用了一个mqtt，你让我安装那么多包没别要啊。可以这样解决。安装完以后，将需要的包从node_modules中拿出来，放到工具目录。

三、代码说明

1、安装好以后，在main.js中加载成全局变量。或者局部引用也可以。

const mqtt = require('mqtt/dist/mqtt.js')
Vue.prototype.$mqtt = mqtt

2、代码示例：

template部分

<view class="air-test-tip">
	<rich-text class="test-tip-text" :nodes="htmlParser(testTipText)"></rich-text>
</view>
<view class="action-buttons">
	<button type="primary" :disabled="testState!=2" class="action-button " @tap="makeQrcode"><text
			class="action-button-text" :class="{disabled:testState!=2}">查看二维码</text></button>
	<button type="primary" :disabled="testState!=2 || haveTestRecord==2" class="action-button "
		@tap="startTest()"><text class="action-button-text"
			:class="{disabled:testState!=2}">重新检测</text></button>
</view>
<uni-popup ref="popup" type="center" :maskClick="false" maskBackgroundColor="transparent">
	<view class="loading">
		<text class="loading-icon iconfont icon-add"></text>
		<text class="loading-text">连接服务中~</text>
	</view>
</uni-popup>
<uni-qrcode class="canvas" cid="qrcode" ref="qrcode" :margin="20" :text="qrText"
	@makeComplete="makeComplete" />
<uni-popup ref="eqcodePopupRef" type="center" :maskClick="true" @change="eqcodePopupChange">
	<view class="eqcode-popup">
		<image class="eqcode-popup-img" :src="qrImgPath" mode="aspectFill"></image>
	</view>
</uni-popup>

JavaScript部分

htmlParser.js
百度一下

mqttConfig.js

export const MQTT_IP = '192.168.1.186:8083/mqtt'//mqtt地址端口
const MQTT_USERNAME = 'kongGanFactoryTest'//mqtt用户名
const MQTT_PASSWORD = 'kongGanFactoryTest'//密码
 
export const MQTT_OPTIONS = {
    connectTimeout: 15000,
    clientId: '',
    username: MQTT_USERNAME,
    password: MQTT_PASSWORD,
    // clean: false
}

业务代码：
this.client = this.$mqtt.connect(‘wx://’ + MQTT_IP, MQTT_OPTIONS)
这里wx为mqtt协议名。
如果是在app或小程序上使用，需要使用wx，mqtt工具会将它翻译成wxs。
如果是h5使用ws，会翻译成wss。
如果是支付宝小程序使用ali，会翻译成alis。
或者可以直接使用翻译后的名字。

// 开始测试
startTest() {
	return new Promise(resolve => {
		let that = this
		console.log(this.client);
		if (this.client) {
			that.testState = 1
			that.client.publish(`sn_${this.deviceTestResult.snCode}`, 'hello mqtt')
			return
		}
		this.$refs.popup.open()
		MQTT_OPTIONS.clientId = `fushikang_${this.deviceTestResult.snCode}`
		console.log('----------开启链接请求----------');
		this.client = this.$mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
		this.client.on('connect', function() {
			console.log('----------请求已连接-----------');
			that.client.subscribe(`sn_${that.deviceTestResult.snCode}`, function(err) {
				console.log('err:', err);
				if (!err) {
					console.log(
						`----------订阅主题sn_${that.deviceTestResult.snCode}----------`
						);
					// that.client.publish(`sn_${that.deviceTestResult.snCode}`, 'hello mqtt')
					that.testState = 1
					that.$refs.popup.close()
					console.log('----------mqtt服务开启监听--------------');
					console.log('---------开启倒计时----------');
					that.countDownNum = that.originalNum //30 远端数据
					that.countDown()
				} else {
					console.log('----------订阅主题失败----------');
				}
			})
		}).on('reconnect', function() {
			console.log('-------------~服务重连~-------------')
		}).on('error', function(e) {
			console.log('on error' + e)
		}).on('end', function() {
			console.log('on end')
			that.client = null
		}).on('message', function(topic, message) {
			// 监听消息回复
			console.log('------------收到设备检测信息-----------');
			console.log('mqtt message:', message.toString());
			this.deviceTestResult = JSON.parse(message.toString())
			const resultStr = this.makeResultStr()
			if (resultStr.indexOf('F') > -1) {
				that.stopCountDownFlag = false
			} else {
				that.stopCountDownFlag = true
				this.makeQrcode()

			}

		})
	})
},
// 倒计时控制器
countDown() {
	this.countDownTimer = setTimeout(() => {
		this.countDownNum--
		console.log(this.countDownNum);
		if (this.countDownNum != 0) {
			if (!this.stopCountDownFlag) {
				this.countDown()
			} else {
				console.log('-----------检测结束，倒计时暂停-----------');
				this.actionEnding()
				console.log('-----------检测通过，自动弹出二维码-----------');
				this.ShowEqrcode = true
			}

		} else {
			console.log('-----------倒计时结束-----------');
			this.actionEnding()
		}
	}, 1000)
},
// 设置测试结束状态
actionEnding() {
	// 测试结束时，1、生成整体检测记录2、可查看二维码3、可以重新检测。
	this.testState = 2
	clearTimeout(this.countDownTimer)
	this.countDownTimer = null
	this.client.end()
	this.client = null
},
// 通知服务端 检测倒计时结束
makeEnding() {
	console.log('---------生成检测记录----------');
},

样式些，自己写就可以，这里不再贴了。

学习是件快乐的事，不要生拌樱桃。