vue項(xiàng)目中使用mqtt通信的方法完整示例
一、 什么是 MQTT？
MQTT（Message Queuing Telemetry Transport）是一種輕量級(jí)、基于發(fā)布-訂閱模式的消息傳輸協(xié)議，適用于資源受限的設(shè)備和低帶寬、高延遲或不穩(wěn)定的網(wǎng)絡(luò)環(huán)境。它在物聯(lián)網(wǎng)應(yīng)用中廣受歡迎，能夠?qū)崿F(xiàn)傳感器、執(zhí)行器和其它設(shè)備之間的高效通信。
二、MQTT 的工作原理
MQTT 是基于發(fā)布-訂閱模式的通信協(xié)議，由 MQTT 客戶(hù)端通過(guò)主題（Topic）發(fā)布或訂閱消息，通過(guò) MQTT Broker 集中管理消息路由，并依據(jù)預(yù)設(shè)的服務(wù)質(zhì)量等級(jí)(QoS)確保端到端消息傳遞可靠性。
QoS
MQTT 提供了三種服務(wù)質(zhì)量（QoS），在不同網(wǎng)絡(luò)環(huán)境下保證消息的可靠性。
- QoS 0：消息最多傳送一次。如果當(dāng)前客戶(hù)端不可用，它將丟失這條消息。
- QoS 1：消息至少傳送一次。
- QoS 2：消息只傳送一次。
關(guān)于 MQTT QoS 的更多詳情，請(qǐng)參閱文章 MQTT QoS 0, 1, 2 介紹。
三、MQTT 的工作流程
在了解了 MQTT 的基本組件之后，讓我們來(lái)看看它的一般工作流程：
- 客戶(hù)端使用 TCP/IP 協(xié)議與 Broker 建立連接，可以選擇使用 TLS/SSL 加密來(lái)實(shí)現(xiàn)安全通信?？蛻?hù)端提供認(rèn)證信息，并指定會(huì)話(huà)類(lèi)型（Clean Session 或 Persistent Session）。
- 客戶(hù)端既可以向特定主題發(fā)布消息，也可以訂閱主題以接收消息。當(dāng)客戶(hù)端發(fā)布消息時(shí)，它會(huì)將消息發(fā)送給 MQTT Broker；而當(dāng)客戶(hù)端訂閱消息時(shí)，它會(huì)接收與訂閱主題相關(guān)的消息。
- MQTT Broker 接收發(fā)布的消息，并將這些消息轉(zhuǎn)發(fā)給訂閱了對(duì)應(yīng)主題的客戶(hù)端。它根據(jù) QoS 等級(jí)確保消息可靠傳遞，并根據(jù)會(huì)話(huà)類(lèi)型為斷開(kāi)連接的客戶(hù)端存儲(chǔ)消息。
四、MQTT 基礎(chǔ)和配置
1.安裝和引入 MQTT 客戶(hù)端庫(kù)
使用 NPM 或 Yarn 來(lái)安裝 mqtt.js 是一個(gè)直接且高效的方式，這將允許你將MQTT集成到你的Vue項(xiàng)目中。安裝方式如下：
npm install mqtt --save or yarn add mqtt
在 Vue 項(xiàng)目中使用 MQTT 首先要進(jìn)行客戶(hù)端庫(kù)的安裝：
import mqtt from 'mqtt'
2.配置 MQTT 連接
連接前需要配置好MQTT服務(wù)器的地址和端口：
const options = {
host: '你的MQTT服務(wù)器地址',
port: 你的MQTT服務(wù)器端口,
username: 'admin', // 實(shí)際環(huán)境中應(yīng)使用JWT令牌
password: 'public',
clean: false, // true默認(rèn)值/false 保持會(huì)話(huà)，重連后可接收離線(xiàn)消息
connectTimeout: 40000, // 超時(shí)時(shí)間設(shè)置
clientId: 'emqx_vue2_' + Math.random().toString(16).substring(2, 8), // 客戶(hù)端ID
// 60秒心跳,表示客戶(hù)端將每隔60秒發(fā)送一次心跳包（PINGREQ）到服務(wù)器，服務(wù)器會(huì)響應(yīng)
keepalive: 60,
// 其他配置...
};
3.連接服務(wù)器和會(huì)話(huà)管理
連接 MQTT 服務(wù)器
創(chuàng)建 MQTT 客戶(hù)端實(shí)例并進(jìn)行連接：
const client = mqtt.connect(options);
管理 MQTT 會(huì)話(huà)
你可以通過(guò)監(jiān)聽(tīng)不同的事件來(lái)管理會(huì)話(huà)，例如：
client.on('connect', () => {
console.log('連接成功');
});
client.on('error', (err) => {
console.error('連接失敗:', err);
});
4.主題訂閱與發(fā)布消息
訂閱主題
訂閱 MQTT 主題，以便接收相關(guān)消息：
client.subscribe('你的主題', { qos: 1 }, (err) => {
if (err) {
console.error('訂閱失敗:', err);
} else {
console.log('訂閱成功');
}
});
5.發(fā)布消息
向特定主題發(fā)布消息：
client.publish('你的主題', '要發(fā)送的消息內(nèi)容', { qos: 1, retAIn: false }, (err) => {
if (err) {
console.error('發(fā)布消息失敗:', err);
}
});
6.處理收到的消息
設(shè)置消息監(jiān)聽(tīng)器
接收并處理來(lái)自訂閱主題的消息：
// 接收消息處理
client.on('message', (topic, message) => {
console.log(`收到消息：${message.toString()}`);
});
7.斷開(kāi)連接
client.on('unsubscribe', error => {
console.log('斷開(kāi)連接:', error)
})
8.安全性和性能優(yōu)化
實(shí)現(xiàn) TLS 加密連接
確保通信的安全性，可以使用 TLS 對(duì)鏈接進(jìn)行加密處理：
const options = {
//...其他配置
connectTimeout: 4000, // 超時(shí)時(shí)間設(shè)置
// 使用 TLS
ca: fs.readFileSync('path/to/ca.crt'),
key: fs.readFileSync('path/to/client.key'),
cert: fs.readFileSync('path/to/client.crt'),
rejectUnauthorized: false
};
QoS 和持久會(huì)話(huà)
設(shè)置 QoS 等級(jí)以及是否開(kāi)啟持久會(huì)話(huà)，以滿(mǎn)足不同的業(yè)務(wù)需求：
const options = {
...其他配置,
clean: true, // 設(shè)置為false開(kāi)啟持久會(huì)話(huà)
qos: 1 // 消息至少傳送一次
};
注：
- clean: true 干凈會(huì)話(huà) | 每次連接都創(chuàng)建新的會(huì)話(huà)，不保留任何狀態(tài);
- clean: false 持久會(huì)話(huà)保留會(huì)話(huà)狀態(tài)，包括訂閱和未送達(dá)的消息;
9.斷線(xiàn)重連和異常處理
處理斷線(xiàn)重連
監(jiān)聽(tīng) close 事件，并制定重連策略：
client.on('close', () => {
console.log('連接關(guān)閉，嘗試重連');
// 實(shí)現(xiàn)重連邏輯...
});
異常處理建議
編寫(xiě)合適的異常處理邏輯來(lái)保障系統(tǒng)穩(wěn)定運(yùn)行
// 可以結(jié)合 try...catch 使用
try {
// MQTT 相關(guān)操作
} catch (error) {
console.error('異常信息:', error);
}
通過(guò)以上步驟，Vue 項(xiàng)目中就可以有效集成并使用 MQTT 通信技術(shù)了。根據(jù)不同項(xiàng)目的特點(diǎn)和需求，這些步驟可能會(huì)有所調(diào)整和優(yōu)化。
五、相關(guān)問(wèn)答
1. Vue項(xiàng)目如何使用MQTT進(jìn)行通信？
MQTT（Message Queuing Telemetry Transport）是一種輕量級(jí)的、可靠的、基于發(fā)布/訂閱模式的消息傳輸協(xié)議。在Vue項(xiàng)目中，您可以使用MQTT實(shí)現(xiàn)實(shí)時(shí)的消息傳遞和通信。
首先，您需要確保您的Vue項(xiàng)目中已經(jīng)安裝了MQTT客戶(hù)端庫(kù)。您可以使用npm或yarn來(lái)安裝依賴(lài)項(xiàng)。例如，您可以運(yùn)行以下命令來(lái)安裝一個(gè)常用的MQTT庫(kù)：
npm install mqtt --save
接下來(lái)，在您的Vue組件中引入MQTT庫(kù)并創(chuàng)建一個(gè)MQTT客戶(hù)端實(shí)例。您需要指定MQTT服務(wù)器的主機(jī)名和端口號(hào)，并且可以選擇配置其他參數(shù)，如用戶(hù)名、密碼等。例如：
import mqtt from 'mqtt'
const client = mqtt.connect('mqtt://mqtt.server.com:1883', {
username: 'your_username',
password: 'your_password'
})
一旦建立了MQTT客戶(hù)端連接，您可以使用MQTT提供的API發(fā)送和接收消息。您可以使用publish()方法發(fā)送消息，使用subscribe()方法訂閱主題，并使用on()方法監(jiān)聽(tīng)收到的消息。例如：
// 發(fā)送消息
client.publish('topic', 'Hello, MQTT!')
// 訂閱主題，并監(jiān)聽(tīng)收到的消息
client.subscribe('topic')
client.on('message', function (topic, message) {
console.log('Received message:', message.toString())
})
通過(guò)使用這些API，您可以在Vue項(xiàng)目中使用MQTT進(jìn)行實(shí)時(shí)通信，實(shí)現(xiàn)實(shí)時(shí)消息傳遞的功能。
2. 如何在Vue項(xiàng)目中配置MQTT的TLS安全連接？
如果您的MQTT服務(wù)器要求使用TLS（Transport Layer Security）安全連接，您可以在Vue項(xiàng)目中進(jìn)行相應(yīng)的配置來(lái)實(shí)現(xiàn)安全的MQTT通信。
首先，您需要獲得MQTT服務(wù)器的TLS證書(shū)文件，通常是一個(gè).pem文件。將該證書(shū)文件保存到您的Vue項(xiàng)目中的某個(gè)目錄下，例如public目錄
接下來(lái)，在您的Vue組件中引入MQTT庫(kù)，并使用tls選項(xiàng)指定TLS相關(guān)配置。例如：
import mqtt from 'mqtt'
import fs from 'fs'
const options = {
host: 'mqtt.server.com',
port: 8883,
key: fs.readFileSync('public/client.key'),
cert: fs.readFileSync('public/client.crt'),
ca: fs.readFileSync('public/ca.crt')
}
const client = mqtt.connect(options)
在上面的示例中，key、cert和ca選項(xiàng)分別指定了客戶(hù)端的私鑰、證書(shū)和服務(wù)器的CA證書(shū)。您需要將這些選項(xiàng)的值替換為相應(yīng)的文件路徑。
通過(guò)使用上述配置，您的Vue項(xiàng)目將能夠通過(guò)TLS安全連接與MQTT服務(wù)器進(jìn)行通信。
3. 如何實(shí)現(xiàn)Vue項(xiàng)目中的雙向MQTT通信？
雙向MQTT通信在Vue項(xiàng)目中非常有用，它允許您實(shí)時(shí)地發(fā)送和接收來(lái)自MQTT服務(wù)器的消息。
首先，您需要?jiǎng)?chuàng)建兩個(gè)獨(dú)立的MQTT客戶(hù)端實(shí)例，一個(gè)用于發(fā)送消息，一個(gè)用于接收消息。例如：
import mqtt from 'mqtt'
const sendClient = mqtt.connect('mqtt://mqtt.server.com:1883')
const receiveClient = mqtt.connect('mqtt://mqtt.server.com:1883')
接下來(lái)，您可以使用sendClient發(fā)送消息，使用receiveClient接收消息。例如：
// 發(fā)送消息
sendClient.publish('topic', 'Hello, MQTT!')
// 接收消息
receiveClient.subscribe('topic')
receiveClient.on('message', function (topic, message) {
console.log('Received message:', message.toString())
})
通過(guò)使用兩個(gè)獨(dú)立的客戶(hù)端實(shí)例，您可以在Vue項(xiàng)目中實(shí)現(xiàn)雙向的MQTT通信，實(shí)時(shí)地發(fā)送和接收消息。這樣，您就可以構(gòu)建類(lèi)似實(shí)時(shí)聊天、實(shí)時(shí)數(shù)據(jù)更新等功能。
4.client.on('close') 與 client.on('unsubscribe') 的區(qū)別詳解
這兩個(gè)事件監(jiān)聽(tīng)的是MQTT客戶(hù)端生命周期中完全不同階段的行為，讓我詳細(xì)解釋它們的區(qū)別：
事件對(duì)比總覽
| 事件 | 觸發(fā)時(shí)機(jī) | 用途 | 參數(shù) | 頻率 |
|---|---|---|---|---|
| close | 連接完全關(guān)閉時(shí) | 連接生命周期管理 | 無(wú) | 每個(gè)連接1次 |
| unsubscribe | 成功取消訂閱主題時(shí) | 訂閱管理 | 取消的主題數(shù)組 | 可多次觸發(fā) |
詳細(xì)解析
1. client.on('close') - 連接關(guān)閉事件
觸發(fā)時(shí)機(jī)：當(dāng)MQTT客戶(hù)端與服務(wù)器的連接完全關(guān)閉時(shí)觸發(fā)。
client.on('close', () => {
console.log('?? MQTT連接已完全關(guān)閉');
// 執(zhí)行清理操作
});
典型場(chǎng)景：
const client = mqtt.connect('ws://broker.emqx.io:8083/mqtt');
// 手動(dòng)關(guān)閉連接
client.end(false, () => {
// 這里的回調(diào)執(zhí)行后會(huì)觸發(fā) 'close' 事件
});
// 監(jiān)聽(tīng)關(guān)閉事件
client.on('close', () => {
console.log('連接已關(guān)閉，可以進(jìn)行資源清理');
updateUIStatus('disconnected');
});
// 其他可能觸發(fā)close的情況：
// - 網(wǎng)絡(luò)斷開(kāi)
// - 服務(wù)器主動(dòng)關(guān)閉連接
// - 客戶(hù)端調(diào)用 client.end()
client.on('unsubscribe')- 取消訂閱事件
觸發(fā)時(shí)機(jī)：當(dāng)客戶(hù)端成功從主題取消訂閱時(shí)觸發(fā)。
client.on('unsubscribe', (unsubscribedTopics) => {
console.log('? 成功取消訂閱:', unsubscribedTopics);
// unsubscribedTopics 是一個(gè)數(shù)組，包含取消的主題列表
});
典型場(chǎng)景：
// 訂閱多個(gè)主題
client.subscribe(['topic/sensors', 'topic/status', 'topic/alerts'], { qos: 1 });
// 后來(lái)取消部分訂閱
client.unsubscribe(['topic/alerts', 'topic/status'], (err) => {
if (!err) {
console.log('取消訂閱命令已發(fā)送');
}
});
// 監(jiān)聽(tīng)取消訂閱成功事件
client.on('unsubscribe', (topics) => {
console.log(`已取消訂閱: ${topics.join(', ')}`);
// 更新UI，移除對(duì)應(yīng)的主題顯示
topics.forEach(topic => removeTopicFromUI(topic));
});
總結(jié)
關(guān)鍵區(qū)別：
close：連接級(jí)別的生命周期事件，表示整個(gè)MQTT連接的終止unsubscribe：訂閱級(jí)別的操作事件，表示從特定主題取消訂閱
使用建議：
- 用
close事件處理連接斷開(kāi)后的全局清理工作 - 用
unsubscribe事件管理訂閱狀態(tài)和更新UI - 記住事件觸發(fā)的順序：取消訂閱操作 →
unsubscribe事件 → 斷開(kāi)連接 →close事件
六、項(xiàng)目實(shí)例
首先在項(xiàng)目中新建src/Utils/sysconstant.js文件用來(lái)配置常用信息
//?正式環(huán)境 export const MQTT_SERVICE = window.tsl_global_config.mqttService.url export const MQTT_USERNAME = window.tsl_global_config.mqttService.username export const MQTT_PASSWORD = window.tsl_global_config.mqttService.password
在vue2組件使用MQTT通信
import { connect as mqttConnect } from 'mqtt'
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from '@/Utils/sysconstant.js'
let client = null
// 初始化MQTT連接
const options = {
connectTimeout: 40000,
clientId: 'emqx_vue3_' + Math.random().toString(16).substring(2, 8),
keepalive: 60, // 60秒心跳
username: MQTT_USERNAME,
password: MQTT_PASSWORD,
clean: false, // 保持會(huì)話(huà)，重連后可接收離線(xiàn)消息
}
// 連接到broker
client = mqttConnect.connect(MQTT_SERVICE, options)
mounted() {
this.getMqttMsg()
},
methods: {
getMqttMsg() {
// 連接成功
client.on('connect', () => {
// console.log('連接成功:', e)
// 彈窗提示
ElNotification(
{
title: '連接成功',
message: '已成功連接到消息服務(wù)器',
type: 'success',
duration: 3000
}
)
// 訂閱用戶(hù)專(zhuān)屬主題
const topics = [ `user/${this.userId}/notifications`, `user/${this.userId}/recall` ]
client.subscribe(topics, { qos: 1 }, (err) => {
if (!err) {
console.log(`已訂閱主題: ${topics.join(', ')}`)
} else {
console.error('訂閱主題失敗:', err)
Notification.error({
title: '訂閱失敗',
message: '無(wú)法訂閱通知主題'
})
}
})
// 或者分開(kāi)訂閱用戶(hù)專(zhuān)屬主題
client.subscribe('user/${this.userId}/notifications',{ qos: 1 },error => {
if (!error) {
// console.log('訂閱成功1')
} else {
console.log('訂閱失敗1')
ElNotification(
{
title: '訂閱失敗',
message: '無(wú)法訂閱通知主題',
type: 'error'
}
)
}
})
client.subscribe('`user/${this.userId}/recall',{ qos: 1 }, error => {
if (!error) {
// console.log('訂閱成功2')
} else {
console.log('訂閱失敗2')
}
})
})
// 接收消息處理
client.on('message', (topic, message) => {
// console.log('收到來(lái)自', topic, '的消息', message.toString())
// 處理接收的消息
if (topic === '/captureLog/platform/car') {
let carMqttObj = JSON.parse(message.toString())
carMqttObj.captureTime = formatDate(carMqttObj.captureTime, 'HH:mm')
this.carRecords.unshift(carMqttObj)
console.log(this.carRecords, 'this.carRecords')
} else {
let peopleMqttObj = JSON.parse(message.toString())
peopleMqttObj.openTime = formatDate(peopleMqttObj.openTime, 'HH:mm')
this.manRecords.unshift(peopleMqttObj)
}
})
}
// 連接斷開(kāi)
client.on('close', () => {
console.log('MQTT連接已關(guān)閉')
// this.connected = false
// this.scheduleReconnect()
})
// 連接錯(cuò)誤
client.on('error', (err) => {
this.connected = false
console.error('MQTT錯(cuò)誤:', err)
Notification.error({
title: '連接錯(cuò)誤',
message: '消息服務(wù)連接發(fā)生錯(cuò)誤'
})
this.scheduleReconnect()
})
// 重連中
client.on('reconnect', () => {
console.log('正在重連到MQTT服務(wù)器...')
})
},
總結(jié)
到此這篇關(guān)于vue項(xiàng)目中使用mqtt通信的文章就介紹到這了,更多相關(guān)vue使用mqtt通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue設(shè)置路由title,但刷新頁(yè)面時(shí)title失效的解決
這篇文章主要介紹了vue設(shè)置路由title，但刷新頁(yè)面時(shí)title失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue導(dǎo)出Excel,后端返回的文件流,前端接收后無(wú)法打開(kāi)文件的解決
在使用Vue導(dǎo)出Excel時(shí),如果后端返回文件流,前端接收后無(wú)法打開(kāi)文件,通常是由于響應(yīng)類(lèi)型設(shè)置不正確導(dǎo)致的,通過(guò)設(shè)置axios請(qǐng)求接口時(shí)的響應(yīng)類(lèi)型為`blob`,并使用blob轉(zhuǎn)換文件流,可以解決文件損壞無(wú)法打開(kāi)的問(wèn)題2025-12-12
vue中的事件修飾符once,prevent,stop,capture,self,passive
這篇文章主要介紹了vue中的事件修飾符once,prevent,stop,capture,self,passive，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
UniApp加載Web頁(yè)面完整實(shí)現(xiàn)方案(附實(shí)例代碼)
在uniapp中加載外部網(wǎng)頁(yè),可以通過(guò)使用web-view組件來(lái)實(shí)現(xiàn),web-view是一個(gè)web瀏覽器組件,可以用來(lái)承載網(wǎng)頁(yè)的容器,這篇文章主要介紹了UniApp加載Web頁(yè)面完整實(shí)現(xiàn)方案的相關(guān)資料,需要的朋友可以參考下2025-09-09
單元測(cè)試是用來(lái)測(cè)試項(xiàng)目中的一個(gè)模塊的功能，本文主要介紹了前端Vue單元測(cè)試入門(mén)教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue實(shí)現(xiàn)a標(biāo)簽點(diǎn)擊高亮方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)a標(biāo)簽點(diǎn)擊高亮方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
解決ant Design中Select設(shè)置initialValue時(shí)的大坑
這篇文章主要介紹了解決ant Design中Select設(shè)置initialValue時(shí)的大坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí)，攜帶參數(shù)跳轉(zhuǎn)，本文將詳細(xì)介紹vue路由傳參的三種方式，這三種傳參方式只是針對(duì)vue?Router?V3版本的,需要的朋友可以參考下2023-07-07
vue學(xué)習(xí)筆記之slot插槽基本用法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽基本用法,結(jié)合實(shí)例形式分析了vue slot插槽基本使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問(wèn)題
今天小編就為大家分享一篇解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09