MQTT(Message Queuing Telemetry Transport，消息隊(duì)列遙測(cè)傳輸)是IBM開(kāi)發(fā)的一個(gè)即時(shí)通訊協(xié)議，有可能成為物聯(lián)網(wǎng)的重要組成部分。該協(xié)議支持所有平臺(tái)，幾乎可以把所有聯(lián)網(wǎng)物品和外部連接起來(lái)，被用來(lái)當(dāng)做傳感器和制動(dòng)器(比如通過(guò)Twitter讓房屋聯(lián)網(wǎng))的通信協(xié)議。

MQTT是輕量級(jí)基于代理的發(fā)布/訂閱的消息傳輸協(xié)議，它可以通過(guò)很少的代碼和帶寬和遠(yuǎn)程設(shè)備連接。例如通過(guò)衛(wèi)星和代理連接，通過(guò)撥號(hào)和醫(yī)療保健提供者連接，以及在一些自動(dòng)化或小型設(shè)備上，而且由于小巧，省電，協(xié)議開(kāi)銷(xiāo)小和能高效的向一和多個(gè)接收者傳遞信息，故同樣適用于稱(chēng)動(dòng)應(yīng)用設(shè)備上。

在大部分項(xiàng)目中，前后端交互只是前端請(qǐng)求后端的接口，拿到數(shù)據(jù)后再處理，前段時(shí)間我手上的一個(gè)項(xiàng)目需要用到mqtt，使用后覺(jué)得真神奇，只需要訂閱就能實(shí)時(shí)獲取到數(shù)據(jù)，廢話(huà)不多說(shuō)，妹妹給你們上步驟！

1.在vue項(xiàng)目中安裝mqtt.js

npm install mqtt --save

2.在項(xiàng)目的main.js或者在需要用到的vue頁(yè)面上引用

import mqtt from ’mqtt’

3.在vue頁(yè)面的data中定義一個(gè)client對(duì)象，方便后面使用

client: {}

ok，接下來(lái)就是重點(diǎn)了，首先我們得連接mqtt，連接mqtt的方法有個(gè)回調(diào)函數(shù)，我接下來(lái)就把訂閱的方法寫(xiě)在連接成功后的回調(diào)里，這樣能保證不出錯(cuò)，上代碼！

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);//訂閱三個(gè)名叫’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)斷開(kāi)連接 this.mqttError() //監(jiān)聽(tīng)獲取信息 this.getMessage() }

5.發(fā)布消息方法

//發(fā)布消息@topic主題 @message發(fā)布內(nèi)容 publish(topic,message) { if (!this.client.connected) {console.log(’客戶(hù)端未連接’)return } this.client.publish(topic,message,{qos: 1},(err) => {if(!err) { console.log(’主題為’+topic+ '發(fā)布成功')} }) }

6.監(jiān)聽(tīng)并接收上面訂閱的三個(gè)主題的信息

//監(jiān)聽(tīng)接收消息 getMessage() { this.client.on('message', (topic, message) => {if(message) { console.log(’收到來(lái)著’,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)聽(tīng)服務(wù)器是否連接失敗

//監(jiān)聽(tīng)服務(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.斷開(kāi)連接

//斷開(kāi)連接 unconnect() { this.client.end() this.client = null console.log(’服務(wù)器已斷開(kāi)連接！’) },

10.監(jiān)聽(tīng)服務(wù)器重新連接

//監(jiān)聽(tīng)服務(wù)器重新連接 reconnect() { this.client.on(’reconnect’, (error) => { console.log(’正在重連:’, error) }); },總結(jié)

到此這篇關(guān)于vue中利用mqtt服務(wù)端實(shí)現(xiàn)即時(shí)通訊的文章就介紹到這了,更多相關(guān)vue用mqtt即時(shí)通訊內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！