本文小編為大家詳細(xì)介紹“vue中怎么使用mqtt服務(wù)端實(shí)現(xiàn)即時(shí)通訊”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue中怎么使用mqtt服務(wù)端實(shí)現(xiàn)即時(shí)通訊”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站與策劃設(shè)計(jì),興安盟烏蘭浩特網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:興安盟烏蘭浩特等地區(qū)。興安盟烏蘭浩特做網(wǎng)站價(jià)格咨詢:13518219792

MQTT協(xié)議

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)銷小和能高效的向一和多個(gè)接收者傳遞信息，故同樣適用于稱動(dòng)應(yīng)用設(shè)備上。

vue利用mqtt服務(wù)端實(shí)現(xiàn)即時(shí)通訊

在大部分項(xiàng)目中，前后端交互只是前端請(qǐng)求后端的接口，拿到數(shù)據(jù)后再處理，前段時(shí)間我手上的一個(gè)項(xiàng)目需要用到mqtt，使用后覺(jué)得真神奇，只需要訂閱就能實(shí)時(shí)獲取到數(shù)據(jù)，廢話不多說(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('客戶端未連接')
        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('連接失?。?#39;,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)
      });
    },

讀到這里，這篇“vue中怎么使用mqtt服務(wù)端實(shí)現(xiàn)即時(shí)通訊”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前文章：vue中怎么使用mqtt服務(wù)端實(shí)現(xiàn)即時(shí)通訊
新聞來(lái)源：http://aaarwkj.com/article18/jeiodp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站設(shè)計(jì)、云服務(wù)器、動(dòng)態(tài)網(wǎng)站、App設(shè)計(jì)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)