---

視頻演示效果

---

前言

Mqtt不同環(huán)境問題太多，新手可以看下

1. 《【MQTT】Esp32數(shù)據(jù)上傳采集：最新mqtt插件（支持掉線、真機(jī)調(diào)試錯誤等問題》
2. 《一篇就夠:uniapp-Mqtt系列問題詳細(xì)攻略(解決掉線、真機(jī)調(diào)試錯誤等問題)》
3. 《解決微信小程序MQTT真機(jī)連接問題與合法域名配置SSL問題》
4. 《解決微信小程序MQTT通訊真機(jī)調(diào)試失敗的問題附加可用代碼》
5. 《Esp8266-01s、51單片機(jī)實(shí)現(xiàn)連接MQTT踩坑：附加燒錄安信可固件+寶塔搭建MQTT服務(wù)器 全套攻略》

以上的就是我所有的Mqtt踩坑記錄，相信看完應(yīng)該能解決了，今天這一篇文章，主要是記錄升級Mqtt5.0以及如何適配安卓端，如果不想看，也可以直接去下載插件：【uniapp】【5.0協(xié)議】最完整Mqtt示例代碼（解決掉線、真機(jī)調(diào)試錯誤等問題）
注意：插件代碼不含如果要用在app端，請留意評論區(qū)的消息，換協(xié)議

---

一、分析

將原APP接入實(shí)時通訊，采用MQTT，有很多優(yōu)點(diǎn)，這里就不列舉了。這次對接的是我的打卡平臺，
分為三個端：H5、APP、微信小程序
要保證三個端都通，我這里也不繞圈子了，協(xié)議我會放在本節(jié)底部，通過uniapp中的app.vue文件，將mqtt連接為全局狀態(tài)，無論哪個頁面都不會掉線，那么如何一對一接收呢？這里我做的思路是將客戶端的訂閱號訂閱名改為自己的登陸賬號，也就是說，用戶未登錄時不連接，檢測到用戶登錄后將賬戶結(jié)合一些制定字符串作為onTopic，服務(wù)端指定發(fā)送過去即可，分析完之后我們開始實(shí)現(xiàn)客戶端的連接。

連接案例：

var hosts = '';
// #ifdef APP-PLUS
hosts = 'wx://' + that.globalData.serve.host + ':443/mqtt';
// #endif// #ifdef H5
hosts = 'wss://' + that.globalData.serve.host + ':443/mqtt';
// hosts = 'wss://' + that.globalData.serve.host + ':443/mqtt';// hosts = 'tcp://' + this.globalData.serve.host + ':' + this.globalData.serve.wsport + this.globalData.serve.path;
//#endif
// #ifdef MP-WEIXIN
// wx僅僅可以使用體驗(yàn)版
hosts = 'wxs://' + that.globalData.serve.host + ':443/mqtt';
//#endif

二、全局注入MQTT連接

1.引入庫

import mqtt from '@/utils/mqtt3.0.0.js'; // 導(dǎo)入MQTT庫

庫直接在插件中下載即可用：
【uniapp】【5.0協(xié)議】最完整Mqtt示例代碼（解決掉線、真機(jī)調(diào)試錯誤等問題）

2.寫入全局連接代碼

App.vue是uni-app的主組件，所有頁面都是在App.vue下進(jìn)行切換的，是頁面入口文件。但App.vue本身不是頁面，這里不能編寫視圖元素，也就是沒有。

這個文件的作用包括：調(diào)用應(yīng)用生命周期函數(shù)、配置全局樣式、配置全局的存儲globalData

<script>  export default {  globalData: {  text: 'text'  }}  
</script>  

所以我們的代碼：

<script>import mqtt from '@/utils/mqtt3.0.0.js'; // 導(dǎo)入MQTT庫export default {globalData: {  serve: {host: 'mqtt.taila.club',wsport: '8083',wssport:'443',path: 'mqtt',},onTopic: '',//訂閱發(fā)送來的消息onSub: '',//Qos: 2,sendMassage: '',time:0,receiveMessage: '',client: null,//MQTT連接的配置options: {wsOptions: {},protocolVersion: 5, //MQTT連接協(xié)議版本clientId: '',keepalive: 60,clean: false,username: '',password: '',reconnectPeriod: 1000, //1000毫秒，兩次重新連接之間的間隔connectTimeout: 30 * 1000, //1000毫秒，兩次重新連接之間的間隔resubscribe: true //如果連接斷開并重新連接，則會再次自動訂閱已訂閱的主題（默認(rèn)true）},},onLaunch: function() {let that=this;console.log('======'+that.globalData.Qos)// console.log('======'+that.globalData.Qos)// 先斷開that.unconnect();console.log('App Launch')//版本檢查//調(diào)用示例 配置參數(shù)， 默認(rèn)如下，其中api是接口地址，必須填寫// #ifdef APP-PLUS////版本檢查//mqtt// 檢查本地存儲是否存在登錄狀態(tài)的信息that.check_account_mqtt_connect();},methods: {subscribe: function() {// 判斷是否已成功連接if (!this.globalData.client || !this.globalData.client.connected) {this.showToast('客戶端未連接', 1000)return;}this.globalData.client.subscribe(this.globalData.onTopic, {qos: this.globalData.Qos}, error => {if (!error) {this.showToast('訂閱成功', 1000, 'success')console.log('訂閱成功');}});},publish: function() {// 判斷是否已成功連接if (!this.globalData.client || !this.globalData.client.connected) {this.showToast('客戶端未連接', 1000)return;}if (this.globalData.sendMassage != '') {// var send = '{"code": 200, "msg": "發(fā)送打1111指令", "data": "2.doc"}';// 定義JSON對象const messageq = {code: 200,msg: '發(fā)送打印指令',data: '2.doc'}// 將JSON對象轉(zhuǎn)換為JSON字符串const message1 = JSON.stringify(messageq)this.globalData.client.publish(this.globalData.onSub,message1, error => {console.log(error || '消息發(fā)布成功');this.showToast('消息發(fā)布成功', 1000, 'success')});} else {this.showToast('發(fā)布消息為空', 1000)}},unsubscribe: function() {this.globalData.client.unsubscribe(this.globalData.onTopic,err => {console.log(err || '取消訂閱成功');this.showToast('取消訂閱成功', 1000, 'success')});},unconnect: function() {if (!this.globalData.client || !this.globalData.client.connected) {this.showToast('客戶端未連接', 1000)return;}this.client.end();this.client = nullthis.showToast('成功斷開連接', 1000, 'success')console.log('斷開連接');},showToast: function(title, time, icon = 'none') {uni.showToast({title: title,icon: icon,});setTimeout(function() {uni.hideToast();}, time);},check_account_mqtt_connect:function(){let that=this;const openid = uni.getStorageSync('openid');if (openid=='') {uni.showToast({title:'訂閱消息連接失敗',icon:'none'})}else{// 如果存在登錄狀態(tài)的信息，直接進(jìn)行MQTT連接//構(gòu)造必要數(shù)據(jù)let clientId = "mqtt_" + Math.random().toString(16).substr(2, 8)+openid;console.log("生成的隨機(jī)clientId為：" + clientId);this.globalData.options.clientId=clientId;this.globalData.onTopic=openid;//定義訂閱消息that.connect();}},connect: function() {let that = this;var hosts = '';// #ifdef APP-PLUShosts = 'wx://' + that.globalData.serve.host + ':443/mqtt';// #endif// #ifdef H5hosts = 'wss://' + that.globalData.serve.host + ':443/mqtt';// hosts = 'wss://' + that.globalData.serve.host + ':443/mqtt';// hosts = 'tcp://' + this.globalData.serve.host + ':' + this.globalData.serve.wsport + this.globalData.serve.path;//#endif// #ifdef MP-WEIXIN// wx僅僅可以使用體驗(yàn)版hosts = 'wxs://' + that.globalData.serve.host + ':443/mqtt';//#endifconsole.log(hosts);if (that.globalData.client == null || that.globalData.client.connented == false) {uni.showLoading({title: '連接中···'});that.globalData.client = mqtt.connect(hosts,that.globalData.options);that.globalData.client.on('connect', () => {uni.hideLoading();that.showToast('連接成功', 1000, 'success');that.subscribe();});that.globalData.client.on('message', (topic, message) => {console.log('收到來自' + topic + '的消息' + message.toString());uni.showToast({title:'收到一條消息:請?jiān)谥黜摬槭?#39;,duration:4000,icon:'none'})// 在收到消息時調(diào)用onMessageArrived回調(diào)函數(shù)進(jìn)行處理});}that.globalData.client.on('reconnect', error => {uni.hideLoading();that.showToast('正在重連···', 1000);});that.globalData.client.on('error', error => {uni.hideLoading();that.showToast('連接失敗!', 1000);});},},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}
</script><style lang="scss">/* ==== App.vue 文件 ==== *//* 為了避免電腦瀏覽器中的滾動條影響到布局，可在 style 標(biāo)記中添加如下 CSS 代碼*//* 條件編譯，僅在H5平臺生效 */// #ifdef H5body::-webkit-scrollbar,html::-webkit-scrollbar {display: none;}// #endif/*每個頁面公共css */@import "@/uni_modules/b-ui/css/main.bundle.scss";
</style>

注意：
App.vue和其他頁面不一樣，我也是弄了好久才弄清楚，另外使用了全局globalData才編譯成小程序時最新版本會報(bào)錯，獲取不到，應(yīng)該時BUG，我當(dāng)時用的是基礎(chǔ)組件2.33版本就解決了

二、PHP環(huán)境建立

下載文章頂部的配套資源到服務(wù)器

修改封裝的代碼里面的連接信息，以及數(shù)據(jù)持久化

<?php
require_once("php_mqtt/mqtt.class.php");//基礎(chǔ)組件
function send_mqtt_message($receiver, $content,$conn,$type)
{$server = "mqtt.taila.club";  // 服務(wù)代理地址(mqtt服務(wù)端地址)$port = 1883;                // 通信端口$username = "";              // 用戶名(如果需要)$password = "";              // 密碼(如果需要)$client_id = "clientx9293670xxctr_492344"; // 設(shè)置你的連接客戶端id$mqtt = new Mqtt($server, $port, $client_id); // 實(shí)例化MQTT類if ($mqtt->connect(true, NULL, $username, $password)) {// 如果創(chuàng)建鏈接成功$message = array('message_id' => uniqid(), // 使用uniqid生成唯一的消息ID'sender' => '153***9', // 消息的發(fā)送者，可以是用戶ID或用戶名'receiver' => $receiver, // 消息的接收者，可以是用戶ID或用戶名'content' => $content, // 消息的內(nèi)容，可以是文本、圖片、文件等'timestamp' => time(), // 消息的時間戳，記錄消息的發(fā)送時間'type' => $type, // 消息的類型，用于區(qū)分不同類型的消息0系統(tǒng)消息'status' => '0'//0未讀1已讀);$json_message = json_encode($message); // 將PHP數(shù)組轉(zhuǎn)換為JSON字符串$mqtt->publish("$receiver", $json_message, 2); // 發(fā)送JSON消息到主題 "gg"//持久化// $sql="INSERT INTO `message` (`message_id`, `sender`, `receiver`, `content`, `type`, `status`, `create_time`) VALUES (NULL, '15368666279', '$receiver', '$content', '$type', '0', CURRENT_TIMESTAMP)";// $conn->query($sql);$mqtt->close(); // 發(fā)送后關(guān)閉鏈接} else {echo "Time out!\n";}
}
?>

調(diào)用方式非常簡單，新建index.php

<?php
include '../../api/conn.php';//連接數(shù)據(jù)庫根據(jù)你情況來定
require_once("../../api/Message_push/mqtt_sender.php");//消息發(fā)送
$receiver = $_GET["openid"];//發(fā)送手機(jī)號
$content = $_GET["msg"];//發(fā)送的消息
send_mqtt_message($receiver, $content,$conn,'1');
?>

總結(jié)

以上就是今天要講的內(nèi)容，本文僅僅簡單介紹了【MQTT5】原生PHP對接Uni H5、APP、微信小程序?qū)崟r通訊消息服務(wù)的使用

🍋希望你能喜歡我的其他作品
《記一次云之家簽到抓包》
《記一次視頻抓包m3u8解密過程》
《抓包部分軟件時無網(wǎng)絡(luò)+過代理檢測 解決辦法 安卓黃鳥httpcanary+vmos》
《Python】記錄抓包分析自動領(lǐng)取芝麻HTTP每日免費(fèi)IP（成品+教程）》
《某課抓包視頻 安卓手機(jī)：黃鳥+某課app+VirtualXposed虛擬框架》

推薦專欄：

《Python爬蟲腳本項(xiàng)目實(shí)戰(zhàn)》

該專欄往期文章：
《【Python爬蟲項(xiàng)目實(shí)戰(zhàn)一】獲取Chatgpt3.5免費(fèi)接口文末付代碼（過Authorization認(rèn)證）》

🥦如果感覺看完文章還不過癮，歡迎查看我的其它專欄
🥦作者對python有很大的興趣，完成過很多獨(dú)立的項(xiàng)目：例如滇醫(yī)通等等腳本，但是由于版權(quán)的原因下架了，爬蟲這一類審核比較嚴(yán)謹(jǐn)，稍有不慎就侵權(quán)違規(guī)了，所以在保證質(zhì)量的同時會對文章進(jìn)行篩選

如果您對爬蟲感興趣請收藏或者訂閱該專欄哦《Python爬蟲腳本項(xiàng)目實(shí)戰(zhàn)》，如果你有項(xiàng)目歡迎聯(lián)系我，我會同步教程到本專欄！

🚀Python爬蟲項(xiàng)目實(shí)戰(zhàn)系列文章！！
??歡迎訂閱??

【Python爬蟲項(xiàng)目實(shí)戰(zhàn)一】獲取Chatgpt3.5免費(fèi)接口文末付代碼（過Authorization認(rèn)證）
【Python爬蟲項(xiàng)目實(shí)戰(zhàn)二】Chatgpt還原驗(yàn)證算法-解密某寶偽知網(wǎng)數(shù)據(jù)接口

??歡迎訂閱??

Python爬蟲腳本項(xiàng)目實(shí)戰(zhàn)