1：下載插件
npm install mqtt2：創建 mqtt.js
/* main.js 項目主入口注入實例 */
// import mqttTool from './lib/mqttTool.js'
// Vue.prototype.$mqttTool = mqttTool/* 使用范例見 /pages/index/index.vue */
// mqtt協議：H5使用ws/wss APP-PLUS使用wx/wxsvar mqtt = require('mqtt/dist/mqtt.js')let mqttTool = {client: null
}mqttTool.connect = function(params){let options = {clientId: params.clientId,username: params.username,password: params.password,clean: params.clean,connectTimeout: 600000, cleanSession: false}let client = mqtt.connect(params.url, options);mqttTool.client = clientreturn client;
}mqttTool.end = function(){return new Promise((resolve, reject) => {if(mqttTool.client == null){resolve('未連接')console.log('App_text' + ":end 未連接")return;}mqttTool.client.end()mqttTool.client = nullresolve('連接終止')})
}mqttTool.reconnect = function(){return new Promise((resolve, reject) => {if(mqttTool.client == null){resolve('未連接')console.log('App_text' + ":reconnect 未連接")return;}mqttTool.client.reconnect()})
}mqttTool.subscribe = function(params){return new Promise((resolve, reject) => {if(mqttTool.client == null){resolve('未連接')console.log('App_text' + ":unconnect 未連接")return;}mqttTool.client.subscribe(params.topic, {qos:params.qos}, function(err,res) {console.log(err,res)if (!err && res.length>0) {resolve('訂閱成功')console.log('App_text' + ":subscribe success 訂閱成功")}else{resolve('訂閱失敗')console.log('App_text' + ":subscribe failed 訂閱失敗")return;} }) })
}mqttTool.unsubscribe = function(params){return new Promise((resolve, reject) => {if(mqttTool.client == null){resolve('未連接')console.log('App_text' + ":unconnect 未連接")return;}mqttTool.client.unsubscribe(params.topic, function(err) {if (!err) {resolve('取消訂閱成功')console.log('App_text' + ":unsubscribe success 取消訂閱成功")}else{resolve('取消訂閱失敗')console.log('App_text' + ":unsubscribe failed 取消訂閱失敗")return;} }) })
}mqttTool.publish = function(params){return new Promise((resolve, reject) => {if(mqttTool.client == null){resolve('未連接')console.log('App_text' + ":unconnect 未連接")return;}mqttTool.client.publish(params.topic, params.message, function(err){if (!err) {resolve(params.topic + '-' + params.message + '-發送成功')console.log('App_text' + ":publish success 發送成功")}else{resolve(params.topic + '-' + params.message + '-發送失敗')console.log('App_text' + ":publish failed 發送失敗")return;} })})
}export default mqttTool
3:創建mqtt.vue 并引入mqtt.js
<template><view class="mqtt"><u-navbar title='MQTT調試' autoBack bgColor="#fff" placeholder></u-navbar><view class="options"><view class="info"><view class="bar"><text class="label">clientId:</text><input v-model="connectInfo.clientId" class="value" style="width:70%" :adjust-position="false" placeholder=""/></view><view class="flex-between"><view class="bar"><text class="label">username:</text><input v-model="connectInfo.username" class="value" :adjust-position="false" placeholder=""/></view><view class="bar" style="margin-left:4px;"><text class="label">password:</text><input v-model="connectInfo.password" class="value" :adjust-position="false" placeholder=""/></view></view><view class="flex-between"><view class="btn" @click="startConnect">連接</view><view class="btn" @click="endConnect">終止</view><view class="btn" @click="reConnect">重新連接</view></view><view class="flex-between"><view class="bar" style="width:40%;"><text class="label">topic</text><input v-model="subscribeInfo.topic" class="value" :adjust-position="false" placeholder=""/></view><view class="bar" @click="changeQos"><text class="label">qos</text><text class="value">{{subscribeInfo.qos}}</text></view><view class="bar" @click="connectInfo.clean = !connectInfo.clean"><text class="label">clean</text><text class="value">{{connectInfo.clean}}</text></view></view><view class="flex-row"><view class="btn" @click="startSubscribe">訂閱</view><view class="btn" style="margin-left:6px;" @click="endSubscribe">取消訂閱</view></view><view class="tips"><text class="tips-lab">操作日志：</text><text class="tips-reset" @click="clearConfig">清空配置</text><text class="tips-buffer" :style="isBuffer?'':'opacity:0.5'" @click="isBuffer=!isBuffer">打印Buffer</text><text class="tips-clear" @click="cealrLog">清空日志</text></view></view></view><scroll-view class="logs" scroll-y><view class="logs-list" v-for="(item,index) in logs" :key="index">{{item.option + item.log}}</view></scroll-view><view class="feet" :style="'bottom:' + (isSending?sendInfo.keyboard:0) + 'px;'"><view class="inpbar"><input v-model="sendInfo.msg" @focus="focusSend(true)" @blur="focusSend(false)" :adjust-position="false" :cursor-spacing="12" class="inp" type="text" placeholder="請輸入內容" placeholder-style="color:#cccccc;"/><view v-if="sendInfo.msg==''" class="send send-dark">發送q</view><view v-else @click="publish()" class="send">發送</view></view></view></view>
</template><script>export default{data(){return{/* 連接信息 */connectInfo: {clientId: '隨機客戶id',username: '你的用戶名',password: '用戶密碼',clean: false},/* 訂閱信息 */subscribeInfo: {topic: '你訂閱的topic',qos: 1},/* 日志信息 */isBuffer: false,logs: [{option:'環境配置：', log:'配置成功'},],/* 發送信息 */isSending: false,sendInfo: {msg: '',keyboard: 0}}},computed:{/* system */systemInfo(){return uni.getSystemInfoSync()},},onLoad(){/* 即時通訊類鍵盤元素高度處理 */uni.onKeyboardHeightChange(res => {this.sendInfo.keyboard = res.height})},onUnload(){uni.offKeyboardHeightChange();},methods:{/* 連接 */startConnect(){var _this = thislet opts = {url: 'wx://你的服務器域名:8083/mqtt',clientId: this.connectInfo.clientId,username: this.connectInfo.username,password: this.connectInfo.password,clean: this.connectInfo.clean}var client = this.$mqttTool.connect(opts);client.on('connect', function(res) {_this.logs.unshift({option:'mqtt：', log:'連接成功'})})client.on('reconnect', function(res) {_this.logs.unshift({option:'mqtt：', log:'重新連接'})})client.on('error', function(res) {_this.logs.unshift({option:'mqtt：', log:'連接失敗'})})client.on('close', function(res) {_this.logs.unshift({option:'mqtt：', log:'關閉成功'})})client.on('message', function(topic, message, buffer) {if(_this.isBuffer){_this.logs.unshift({option:topic+' buffer：', log: JSON.stringify(buffer)})}_this.logs.unshift({option:topic+' message：', log: message.toString()})})},/* 終止連接 */endConnect(){var _this = thisthis.$mqttTool.end().then(res =>{_this.logs.unshift({option:'終止：', log:res})})},/* 重新連接 */reConnect(){var _this = thisthis.$mqttTool.reconnect().then(res =>{_this.logs.unshift({option:'重連：', log:res})})},/* 更改Qos */changeQos(){var _this = thisif(this.subscribeInfo.qos >= 2){this.subscribeInfo.qos = 0this.logs.unshift({option:'Qos：', log:this.subscribeInfo.qos + ' Qos變更，訂閱已取消，請重新發起訂閱'})this.endSubscribe();}else{this.subscribeInfo.qos += 1this.logs.unshift({option:'Qos：', log:this.subscribeInfo.qos + ' Qos變更，訂閱已取消，請重新發起訂閱'})this.endSubscribe();}},/* 訂閱 */startSubscribe(){if(this.subscribeInfo.topic == ''){uni.showToast({icon: 'none',title: '輸入topic'})return;}var _this = thislet opts = {topic: this.subscribeInfo.topic,qos: this.subscribeInfo.qos,}this.$mqttTool.subscribe(opts).then(res =>{_this.logs.unshift({option:'訂閱' + opts.topic + '：', log:res})})},/* 取消訂閱 */endSubscribe(){var _this = thislet opts = {topic: this.subscribeInfo.topic}this.$mqttTool.unsubscribe(opts).then(res =>{_this.logs.unshift({option:'取消訂閱：', log:res})})},/* 發送消息 */publish(){var _this = thislet opts = {topic: this.subscribeInfo.topic,message: this.sendInfo.msg,}this.$mqttTool.publish(opts).then(res =>{_this.sendInfo.msg = ''_this.logs.unshift({option:'發送：', log:res})}).catch(err=>{_this.logs.unshift({option:'發送失敗：', log:err})})},/* 清空配置 */clearConfig(){this.endConnect();this.connectInfo = {clientId: '',username: '',password: ''}this.subscribeInfo = {topic: '',qos: 1,sendMsg: ''}this.isBuffer = false},/* 清空日志 */cealrLog(){this.logs = [{option:'環境配置：', log:'配置成功'}]},/* 聚焦 */focusSend(val){this.isSending = val},}}
</script><style lang="less" scoped>.flex-row{display: flex;flex-direction: row;align-items: center;justify-content: flex-start;}.flex-between{display: flex;flex-direction: row;align-items: center;justify-content: space-between;}.mqtt{width: 100vw;height: 100vh;background-color: #f8f8f8;.options{width: 100%;height: 316px;background-color: #ffffff;box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);font-size: 13px;color: #666666;.title{width: 710upx;margin: 0 auto;font-size: 15px;font-weight: 500;color: #333333;text-align: center;padding-bottom: 8px;display: flex;flex-direction: row;align-items: center;justify-content: space-between;.title-btn{font-size: 14px;font-weight: 400;color: #3F536E;}}.info{width: 710upx;margin: 0 auto;.bar{min-width: 160upx;margin-bottom: 8px;height: 30px;border-radius: 8px;box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.1);border: 1px solid #cccccc;display: flex;flex-direction: row;align-items: center;justify-content: flex-start;font-size: 14px;.label{height: 30px;background-color: #f8f8f8;padding: 0px 10px;line-height: 30px;border-right: 1px solid #eeeeee;border-radius: 15px 0px 0px 15px;}.value{height: 30px;padding: 0px 12px;line-height: 30px;font-size: 14px;color: #3F536E;}}.btn{width: 30%;height: 32px;background-color: #3F536E;color: #ffffff;border-radius: 8px;margin-bottom: 8px;text-align: center;line-height: 32px;}.tips{width: 100%;height: 30px;margin-top: 6px;display: flex;flex-direction: row;align-items: center;position: relative;.tips-lab{font-size: 14px;color: #333333;}.tips-reset{font-size: 14px;font-weight: 500;color: #3F536E;position: absolute;right: 150px;}.tips-buffer{font-size: 14px;font-weight: 500;color: #3F536E;position: absolute;right: 70px;}.tips-clear{font-size: 14px;font-weight: 500;color: #3F536E;position: absolute;right: 0px;}}}}.logs{width: 100%;height: calc(100% - 396px);.logs-list{padding: 14upx 20upx;border-bottom: 1px solid #eeeeee;font-size: 13px;color: #3e3d3e;word-break: break-all;}}.feet{width: 100%;height: 80px;background-color: #ffffff;position: absolute;bottom: 0px;transition: all 0.35s;-webkit-transition: all 0.35s;&::before{position: absolute;content: '';top: 0px;background: rgba(0,0,0,0.2);width: 100%;height: 1px;transform: scaleY(0.5);transform-origin: 0 0;-webkit-transform: scaleY(0.5);-webkit-transform-origin: 0 0;}.inpbar{width: 710upx;height: 44px;background-color: #eeeeee;border-radius: 10px;position: absolute;left: 20upx;top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: space-between;.img{width: 30px;height: 30px;margin-left: 12px;}.inp{width: calc(100% - 138px);height: 40px;margin: 0px 12px;font-size: 14px;color: #000000;}.send-dark{opacity: 0.7;}.send{width: 60px;height: 32px;background-color: #3F536E;border-radius: 6px;font-size: 14px;color: #ffffff;display: flex;align-items: center;justify-content: center;margin-right: 12px;}}}}
</style>
