vue中如何利用mqtt服務端實現即時通訊

今天小編給大家分享一下vue中如何利用mqtt服務端實現即時通訊的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

MQTT協議

MQTT(Message Queuing Telemetry Transport，消息隊列遙測傳輸)是IBM開發的一個即時通訊協議，有可能成為物聯網的重要組成部分。該協議支持所有平臺，幾乎可以把所有聯網物品和外部連接起來，被用來當做傳感器和制動器(比如通過Twitter讓房屋聯網)的通信協議。

MQTT是輕量級基于代理的發布/訂閱的消息傳輸協議，它可以通過很少的代碼和帶寬和遠程設備連接。例如通過衛星和代理連接，通過撥號和醫療保健提供者連接，以及在一些自動化或小型設備上，而且由于小巧，省電，協議開銷小和能高效的向一和多個接收者傳遞信息，故同樣適用于稱動應用設備上。

vue利用mqtt服務端實現即時通訊

在大部分項目中，前后端交互只是前端請求后端的接口，拿到數據后再處理，前段時間我手上的一個項目需要用到mqtt，使用后覺得真神奇，只需要訂閱就能實時獲取到數據，廢話不多說，妹妹給你們上步驟！

1.在vue項目中安裝mqtt.js

npm install mqtt --save

2.在項目的main.js或者在需要用到的vue頁面上引用

import mqtt from "mqtt"

3.在vue頁面的data中定義一個client對象，方便后面使用

client: {}

ok，接下來就是重點了，首先我們得連接mqtt，連接mqtt的方法有個回調函數，我接下來就把訂閱的方法寫在連接成功后的回調里，這樣能保證不出錯，上代碼！

4.連接mqtt并訂閱

  //連接服務器
    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("成功連接服務器:",e);
        //訂閱三個名叫"top/#", "three/#"和"#"的主題
        this.client.subscribe(["top/#", "three/#", "#"], { qos: 1 }, (err)=> {
          if (!err) {
            console.log("訂閱成功");
            //向主題叫“pubtop”發布一則內容為"hello,this is a nice day!"的消息
            this.publish("pubtop", "hello,this is a nice day!")
          } else {
            console.log("消息訂閱失敗！")
          }
        });
      });
      //重新連接
      this.reconnect()
      //是否已經斷開連接
      this.mqttError()
      //監聽獲取信息
      this.getMessage()
    }

5.發布消息方法

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

6.監聽并接收上面訂閱的三個主題的信息

//監聽接收消息
    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.監聽服務器是否連接失敗

//監聽服務器是否連接失敗
    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("服務器已斷開連接！")
    },

10.監聽服務器重新連接

//監聽服務器重新連接
    reconnect() {
      this.client.on("reconnect", (error) => {
          console.log("正在重連:", error)
      });
    },

以上就是“vue中如何利用mqtt服務端實現即時通訊”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。