vue中利用mqtt服務(wù)端實(shí)現(xiàn)即時通訊的步驟記錄
MQTT協(xié)議
MQTT(Message Queuing Telemetry Transport，消息隊(duì)列遙測傳輸)是IBM開發(fā)的一個即時通訊協(xié)議，有可能成為物聯(lián)網(wǎng)的重要組成部分。該協(xié)議支持所有平臺，幾乎可以把所有聯(lián)網(wǎng)物品和外部連接起來，被用來當(dāng)做傳感器和制動器(比如通過Twitter讓房屋聯(lián)網(wǎng))的通信協(xié)議。
MQTT是輕量級基于代理的發(fā)布/訂閱的消息傳輸協(xié)議，它可以通過很少的代碼和帶寬和遠(yuǎn)程設(shè)備連接。例如通過衛(wèi)星和代理連接，通過撥號和醫(yī)療保健提供者連接，以及在一些自動化或小型設(shè)備上，而且由于小巧，省電，協(xié)議開銷小和能高效的向一和多個接收者傳遞信息，故同樣適用于稱動應(yīng)用設(shè)備上。
vue利用mqtt服務(wù)端實(shí)現(xiàn)即時通訊
在大部分項(xiàng)目中，前后端交互只是前端請求后端的接口，拿到數(shù)據(jù)后再處理，前段時間我手上的一個項(xiàng)目需要用到mqtt，使用后覺得真神奇，只需要訂閱就能實(shí)時獲取到數(shù)據(jù)，廢話不多說，妹妹給你們上步驟！
1.在vue項(xiàng)目中安裝mqtt.js
npm install mqtt --save
2.在項(xiàng)目的main.js或者在需要用到的vue頁面上引用
import mqtt from 'mqtt'
3.在vue頁面的data中定義一個client對象，方便后面使用
client: {}
ok，接下來就是重點(diǎn)了，首先我們得連接mqtt，連接mqtt的方法有個回調(diào)函數(shù)，我接下來就把訂閱的方法寫在連接成功后的回調(diào)里，這樣能保證不出錯，上代碼！
4.連接mqtt并訂閱
//連接服務(wù)器
connect() {
let options = {
username: "xxx",
password: "xxxx",
cleanSession : false,
keepAlive:60,
clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
connectTimeout: 4000
}
this.client = mqtt.connect('ws://192.168.xxx.xx:8083/mqtt',options);
this.client.on("connect", (e)=>{
console.log("成功連接服務(wù)器:",e);
//訂閱三個名叫'top/#', 'three/#'和'#'的主題
this.client.subscribe(['top/#', 'three/#', '#'], { qos: 1 }, (err)=> {
if (!err) {
console.log("訂閱成功");
//向主題叫“pubtop”發(fā)布一則內(nèi)容為'hello,this is a nice day!'的消息
this.publish("pubtop", 'hello,this is a nice day!')
} else {
console.log('消息訂閱失?。?)
}
});
});
//重新連接
this.reconnect()
//是否已經(jīng)斷開連接
this.mqttError()
//監(jiān)聽獲取信息
this.getMessage()
}
5.發(fā)布消息方法
//發(fā)布消息@topic主題 @message發(fā)布內(nèi)容
publish(topic,message) {
if (!this.client.connected) {
console.log('客戶端未連接')
return
}
this.client.publish(topic,message,{qos: 1},(err) => {
if(!err) {
console.log('主題為'+topic+ "發(fā)布成功")
}
})
}
6.監(jiān)聽并接收上面訂閱的三個主題的信息
//監(jiān)聽接收消息
getMessage() {
this.client.on("message", (topic, message) => {
if(message) {
console.log('收到來著',topic,'的信息',message.toString())
const res = JSON.parse(message.toString())
//console.log(res, 'res')
switch(topic) {
case 'top/#' :
this.msg = res
break;
case 'three/#' :
this.msg = res
break;
case 'three/#' :
this.msg = res
break;
default:
return
this.msg = res
}
this.msg = message
}
});
},
7.監(jiān)聽服務(wù)器是否連接失敗
//監(jiān)聽服務(wù)器是否連接失敗
mqttError() {
this.client.on('error',(error) => {
console.log('連接失?。?,error)
this.client.end()
})
},
8.取消訂閱
//取消訂閱
unsubscribe() {
this.client.unsubscribe(this.mtopic, (error)=> {
console.log('主題為'+ this.mtopic+'取消訂閱成功',error)
})
},
9.斷開連接
//斷開連接
unconnect() {
this.client.end()
this.client = null
console.log('服務(wù)器已斷開連接！')
},
10.監(jiān)聽服務(wù)器重新連接
//監(jiān)聽服務(wù)器重新連接
reconnect() {
this.client.on('reconnect', (error) => {
console.log('正在重連:', error)
});
},
總結(jié)
到此這篇關(guān)于vue中利用mqtt服務(wù)端實(shí)現(xiàn)即時通訊的文章就介紹到這了,更多相關(guān)vue用mqtt即時通訊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中實(shí)現(xiàn)過渡動畫的方法小結(jié)
這篇文章主要為大家詳細(xì)介紹了Vue3中實(shí)現(xiàn)過渡動畫的一些常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
這篇文章主要給大家介紹了關(guān)于如何基于Vue-cli快速搭建項(xiàng)目的完整步驟，文中通過示例代碼以及圖片將搭建的步驟一步步介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件
在Vue中,KeepAlive組件是一種特殊的組件,用于緩存已經(jīng)渲染過的組件實(shí)例,本文主要為大家詳細(xì)介紹了KeepAlive組件的用法,需要的小伙伴可以參考下2023-09-09
這篇文章主要介紹了vue單元格多列合并的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue 中 reactive創(chuàng)建對象類型響應(yīng)式數(shù)據(jù)的方法
在 Vue 的開發(fā)世界里,響應(yīng)式數(shù)據(jù)是構(gòu)建交互性良好應(yīng)用的基礎(chǔ),之前我們了解了ref用于定義基本類型的數(shù)據(jù),今天就來深入探討一下如何使用reactive定義對象類型的響應(yīng)式數(shù)據(jù),感興趣的朋友一起看看吧2025-02-02
vue項(xiàng)目使用cdn加速減少webpack打包體積
通過壓縮代碼的手段可減小網(wǎng)絡(luò)傳輸?shù)拇笮?但實(shí)際上最影響用戶體驗(yàn)的還是網(wǎng)頁首次打開時的加載等待,其根本原因是網(wǎng)絡(luò)傳輸過程耗時較大,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用cdn加速減少webpack打包體積的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue 項(xiàng)目中使用websocket的正確姿勢
這篇文章主要介紹了vue 項(xiàng)目中使用websocket的實(shí)例代碼，通過實(shí)例代碼給大家介紹了在utils下新建websocket.js文件的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
本篇文章主要介紹了VUE axios發(fā)送跨域請求需要注意的問題，在實(shí)際項(xiàng)目中前端使用到vue，后端使用php進(jìn)行開發(fā)。前端使用axios請求請求遇到的問題，有興趣的可以了解一下2017-07-07
Vue使用Vue Elements實(shí)現(xiàn)文件預(yù)覽功能
在現(xiàn)代 web 開發(fā)中,用戶與系統(tǒng)的交互體驗(yàn)越來越重要,而文件上傳和文件預(yù)覽是最常見的交互場景之一,本文將詳細(xì)介紹如何在 Vue 項(xiàng)目中使用 Vue Elements 來實(shí)現(xiàn)文件預(yù)覽的功能,包括基本使用方法、常見實(shí)例、性能優(yōu)化以及樣式自定義等內(nèi)容,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Vue 遞歸多級菜單的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05