背景
使用uni-app 打包 app；
适用很多版本 mqtt 支援H5端，但是app端并不支援；
資料
mqttws31.js
mqttws31.js 其實是 paho-mqtt 的早期版本；
.vue 無法直接引入 mqttws31.js，是以對 mqttws31.js進行了一些修改；
mqttws31.js 除了網上常見的版本外，git上還有一個自動重連的分支版本，這裡使用的就是這個分支版本；
plus-websocket
plus-websocket 是 uni-app的websocket通訊部分的一個插件；
撸代碼
chat.js
// 引入修改過的 mqttws31-auto.js 檔案
let $mqtt = require('@/utils/js/mqttws31-auto.js');
// paho-mqtt connenctOptions 連接配接配置項
let options = {
timeout: 1000 * 1000,
userName: 'Re',
password: 'pass',
useSSL: true, //如果使用 HTTPS 加密則配置為 true
keepAliveInterval: 10, //心跳
mqttVersion: 4, //預設為4
onSuccess: function onConnect() { //success callback function
console.log('連接配接成功');
},
onFailure: function(message) { //failure callback function
console.log('連接配接失敗', JSON.stringify(message));
}
};
let clientId = Math.floor(Math.random()*10000) + "";
let url = 'youselfUrl';
let port = 12345;
let client = new $mqtt.Client(url, port, clientId);
// 當連接配接丢失/斷開時的 callback function
client.onConnectionLost = function onConnectionLost(response) {
console.log('onConnectionLost',JSON.stringify(response));
};
// 接收到消息 callback function
client.onMessageArrived = function onMessageArrived(message) {
let payload = message.payloadString;
let chat = JSON.parse(payload.toString());
console.log('收到來自', chat.source, '的消息', payload.toString())
addMessage('home',JSON.parse(payload).content,false)
saveMsg();
// console.log('收到儲存之後messageAll'+JSON.stringify(messageAll))
};
let messageAll = [];
// business condition 擷取緩存
// business condition 用于頁面顯示
function addMessage(user, content, hasSub, subcontent) {
messageAll.push({
user: user,
content: content,
hasSub: hasSub,
subcontent: subcontent
});
// console.log(messageAll)
}
// business condition 寫入緩存
function saveMsg(){
// uni.setStorage({
// key: 'storage_msg',
// data: messageAll,
// success: function () {
// console.log('消息已存儲');
// // console.log(messageAll)
// }
// });
}
export {
client,
options,
messageAll,
addMessage,
saveMsg
}
chat.vue
// 引用
var $mqtt = require("@/utils/js/mqttws31-auto.js");
created() {
//擷取連接配接
delete this.mqtt.options.mqttVersionExplicit;
this.mqtt.client.connect(this.mqtt.options);
},
methods:{
// 發送消息
sendMessage: function (info) {
var message = new $mqtt.Message(JSON.stringify(
{type: 0x10, target: "To", content: info, extend: "123"}));
message.qos =1;
message.destinationName = 'sendMessage';
this.mqtt.client.send(message);
},
}
效果展示
效果展示.png
demo code
修改後的 mqttws31.js 檔案，有需要的小夥伴可以找我拿demo，或者留下你的問題，
如果你知道更好的實作方式，也請告訴我~