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)文章
解決VUE mounted 鉤子函數(shù)執(zhí)行時 img 未加載導(dǎo)致頁面布局的問題
這篇文章主要介紹了解決VUE mounted 鉤子函數(shù)執(zhí)行時 img 未加載導(dǎo)致頁面布局的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
VUE在線調(diào)用阿里Iconfont圖標(biāo)庫的方法
這篇文章主要介紹了VUE在線調(diào)用阿里Iconfont圖標(biāo)庫的方法,內(nèi)容是圍繞VUE前端和阿里Iconfont圖標(biāo)庫展開的，經(jīng)歷了從網(wǎng)站上東拼西湊圖標(biāo)的時代，大概是15~16年左右我開始解除阿里Iconfont圖標(biāo)庫，剛開始就只會下載圖標(biāo)使用，需要的朋友可以參考下2021-10-10
詳解Vue + Vuex 如何使用 vm.$nextTick
這篇文章主要介紹了詳解Vue + Vuex 如何使用 vm.$nextTick，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
在vue中實(shí)現(xiàn)低代碼組件參數(shù)配置的流程步驟
這篇文章主要介紹了在vue中實(shí)現(xiàn)低代碼組件參數(shù)配置的流程步驟，文中的代碼示例講解的非常詳細(xì)，對我們的學(xué)習(xí)或工作有一定的參考價值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue.js開發(fā)環(huán)境的搭建教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
vue發(fā)送websocket請求和http post請求的實(shí)例代碼
這篇文章主要介紹了vue發(fā)送websocket請求和http post請求的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語法。這篇文章主要介紹了vue框架中props的typescript用法,需要的朋友可以參考下2020-02-02
vite2打包的時候vendor-xxx.js文件過大的解決方法
vite2是一個非常好用的工具，只是隨著代碼的增多，打包的時候?vendor-xxxxxx.js?文件也越來越大，本文主要介紹了vite2打包的時候vendor-xxx.js文件過大的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue配置文件vue.config.js配置前端代理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
如何使用yarn創(chuàng)建vite項(xiàng)目+vue3
這篇文章主要介紹了如何使用yarn創(chuàng)建vite項(xiàng)目+vue3,詳細(xì)介紹了使用vite創(chuàng)建vue3過程,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03