前言
? ? ? ?在集成mqtt到小程序的開發(fā)過程中，確實走了不少彎路，下了許許多多的示例，一步步踩坑到現(xiàn)在終于完美解決了小程序引入mqtt的方法。該方法原生和uniapp均適用。
1. 小程序網(wǎng)頁配置
先登錄微信公眾平臺，找到開發(fā)》開發(fā)管理》開發(fā)設(shè)置頁面
?
服務(wù)器域名配置中 配置socket合法域名為，mq消息服務(wù)器的域名。然后保存退出。
2.代碼集成
1.新建mqtt文件夾，下載paho-mqtt.js，把這個js放在新建的文件夾下。
下載地址https://download.csdn.net/download/qq_35921773/33237463 ?
2.然后新建mqtt.js用來初始化自己的連接信息
把mqtt.js和paho-mqtt.js放在同級文件夾下。這樣方便引入
let Paho = require('./paho-mqtt.js');
var mqtt = {};
//client對象
var client = null;
//mqtt連接對象
const mqttUrl = {
hostname: "xxx.cn",
port:8084,
path: "/mqtt"
}
//訂閱的主題與回掉方法
var map = new Map();
/**
* mqtt 連接狀態(tài)
* 0:正在連接
* 1:連接成功建立
* 2:連接正在關(guān)閉
* 3:連接已經(jīng)關(guān)閉
*/
let connectStatus = 0;
//初始化weboscket
mqtt.initMqtt = () => {
if (null == client) {
//創(chuàng)建mqtt客戶端
client = new Paho.Client(mqttUrl.hostname, Number(mqttUrl.port), mqttUrl.path, 'wxapp_client_'+Math.random(),);
} else {
//Do-nothing
}
client.onConnected = (reconnect, uri) => {
console.log("mqtt連接成功！client：", reconnect, uri);
//連接成功
connectStatus = 1;
//注冊全局的報警事件
}
client.onConnectionLost = (responseObject) => {
console.log("mqtt連接關(guān)閉！", responseObject);
if (responseObject.errorCode != 0) {
//異常關(guān)閉
mqtt.initMqtt();
} else {
//正常關(guān)閉連接
}
connectStatus = 3;
}
client.onMessageArrived = (message) => {
//console.log("Message Recieved: [Topic: ", message.destinationName, ", Payload: ", message.payloadString, ", QoS: ", message.qos, ", Retained: ", message.retained, ", Duplicate: ", message.duplicate, "]");
let topic = message.destinationName;
//console.log("map:",map);
try {
let msgObj = {}
new Promise((resolve, reject) => {/* executor函數(shù) */
msgObj = JSON.parse(message.payloadString);
resolve(msgObj);
}).catch(function (value) {
console.log('JSON轉(zhuǎn)化異常')
return;
});
if(topic.indexOf('$SYS/brokers/')>-1){
map.get('home')(topic,msgObj);
}else if(topic.indexOf('/client')>-1){
map.get('device')(topic,msgObj);
}
} catch (err) {
console.error(err);
}
}
var options = {
invocationContext: {
host: mqttUrl.hostname,
port: mqttUrl.port,
path: mqttUrl.path,
clientId: 'wxapp_client_'+Math.random(),
},
//超時
timeout: 5,
//心跳
keepAliveInterval: 60,
//清除session，如果不清除，重連之后還能收到訂閱的數(shù)據(jù)
cleanSession: true,
useSSL:true,
reconnect: true,
onSuccess: onConnect,
onFailure: onFail
};
function onConnect(context) {
console.log("mqtt連接成功context：", context)
//連接成功
connectStatus = 1;
}
function onFail(context) {
console.log("mqtt連接失敗onFail：", context)
mqtt.initMqtt();
}
if (1 != connectStatus) {
console.log("開始連接");
client.connect(options);
//正在建立連接
connectStatus = 0;
}
}
/**
* 訂閱主題
* topic：主題名稱
* qos：服務(wù)質(zhì)量
*/
mqtt.subscribe = function(topic, qos, receiveCallback) {
if (1 == mqtt.getStatus()) {
client.subscribe(topic, {
qos: Number(qos)
});
if(topic.indexOf('$SYS/brokers/')>-1){
map.set('home',receiveCallback);
}else if(topic.indexOf('/client')>-1){
map.set('device',receiveCallback);
}
} else {
setTimeout(function() {
mqtt.subscribe(topic, qos, receiveCallback);
}, 1000)
}
}
/**
* 取消訂閱主題
* topic：主題名稱
*/
mqtt.unsubscribe = function(topic) {
if (1 == mqtt.getStatus()) {
client.unsubscribe(topic, {
onSuccess: unsubscribeSuccess,
onFailure: unsubscribeFailure,
invocationContext: {
topic: topic
}
});
map.delete(topic);
} else {
setTimeout(function() {
mqtt.unsubscribe(topic);
}, 1000)
}
}
function unsubscribeSuccess(context) {
console.log("取消訂閱成功Topic：", context.invocationContext.topic);
}
function unsubscribeFailure(context) {
console.log("取消訂閱成功Topic：", context.invocationContext.topic);
setTimeout(function() {
mqtt.unsubscribe(context.invocationContext.topic);
}, 1000)
}
/**
* 發(fā)送消息
* message：消息內(nèi)容
* topic：主題
* qos：服務(wù)質(zhì)量
*/
mqtt.publish = function(message, topic, qos) {
if (1 == mqtt.getStatus()) {
var message = new Paho.Message(message);
message.destinationName = topic;
message.qos = Number(qos);
message.retained = false;
client.send(message);
wx.showToast({
title: '發(fā)送成功'
})
} else {
wx.showToast({
title: '正在重新連接服務(wù)器，請稍后重試',
icon: 'none',
duration: 2000
})
setTimeout(function() {
mqtt.publish(message, topic, qos);
}, 1000)
}
}
/**
* 返回mqtt的連接狀態(tài)
*/
mqtt.getStatus = function() {
return connectStatus;
}
/**
* 關(guān)閉連接
*/
mqtt.disconnect = function() {
console.log("關(guān)閉mqtt連接");
if (null != client) {
client.disconnect();
} else {
//Do-nothing
}
connectStatus = 3;
client = null;
}
mqtt.initMqtt();
export default mqtt;
3.頁面使用
import mqtt from '../../common/utils/mqtt.js'
//指向剛才新建的mqtt.js
//onLoad初始化訂閱
onLoad(option) {
mqtt.subscribe('$SYS/brokers/+/clients/#', 0, this.receiveCallback);
},
methods: {
//收到消息后的回調(diào)
receiveCallback(){
console.log('addad')
},
}
?內(nèi)外網(wǎng)切換BAT腳本
1. 切換內(nèi)網(wǎng)腳本
BAT腳本設(shè)置IP、子網(wǎng)掩碼、網(wǎng)關(guān)、DNS文章來源：http://www.zghlxwxcb.cn/news/detail-729148.html
@echo off cls color 0A Echo ******************************************************************************* Echo 正在修改IP地址和DNS服務(wù)器地址,請耐心等待………… Echo ******************************************************************************* cmd /c netsh interface ip set address name="以太網(wǎng)" source=static addr=27.195.110.187 mask=255.255.255.0 gateway=27.195.110.254 gwmetric=1 cmd /c netsh interface ip set dns "以太網(wǎng)" static 26.195.232.1 primary ipconfig /all Echo ******************************************************************************* Echo OK！！已修改成功！請按任意鍵繼續(xù)………… Echo *******************************************************************************
2. 切換外網(wǎng)腳本（IP自動獲?。?/h4>
@echo off
cls
color 0A
Echo *******************************************************************************
Echo 正在修改IP地址和DNS服務(wù)器地址,請耐心等待…………
Echo *******************************************************************************
netsh interface ip set address name="以太網(wǎng) 4" source=dhcp
netsh interface ip delete dns "以太網(wǎng) 4" all
ipconfig /flushdns
ipconfig /all
Echo *******************************************************************************
Echo OK??！已修改成功！請按任意鍵繼續(xù)…………
Echo *******************************************************************************
?文章來源地址http://www.zghlxwxcb.cn/news/detail-729148.html
到了這里，關(guān)于微信小程序集成和使用mqtt（同時支持uniapp和原生）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
