快捷導(dǎo)航

vue 通過 mqtt 實現(xiàn)實時接收消息的操作方法

更新時間：2024年12月09日 09:27:31 作者：葉子_o

?MQTT是一種基于發(fā)布/訂閱模式的輕量級消息協(xié)議,適用于硬件性能有限的遠程設(shè)備和網(wǎng)絡(luò)狀況不佳的環(huán)境,這篇文章主要介紹了vue 通過 mqtt 實現(xiàn)實時接收消息,需要的朋友可以參考下

一. MQTT 簡介

‌MQTT（消息隊列遙測傳輸）是一種基于發(fā)布/訂閱模式的輕量級消息協(xié)議，適用于硬件性能有限的遠程設(shè)備和網(wǎng)絡(luò)狀況不佳的環(huán)境。‌它工作在TCP/IP協(xié)議之上，具有輕量、簡單、開放和易于實現(xiàn)的特點，廣泛應(yīng)用于物聯(lián)網(wǎng)（IoT）、機器與機器（M2M）通信、智能家居等領(lǐng)域。

二. MQTT 的基本組成

MQTT協(xié)議由固定頭、可變頭和消息體三部分組成：

‌固定頭‌：每個消息都有固定頭，但其長度不固定，范圍為2-5個字節(jié)。固定頭用于表示消息的長度和其他控制信息。
‌可變頭‌：存儲消息相關(guān)的屬性，如協(xié)議名、協(xié)議版本號、心跳時長、主題名、消息ID等。不同類型的消息，可變頭中的內(nèi)容也不同。
‌消息體‌：實際發(fā)送的數(shù)據(jù)。例如，CONNECT消息體包含客戶端標(biāo)識、用戶名、密碼等信息；PUBLISH消息體則是實際發(fā)送的消息內(nèi)容。

三. MQTT 的使用

安裝

npm i mqtt --save

引入

import mqtt from 'mqtt'

使用

data() {
	client: null,
    connection: {
      host: 'localhost',
      port: 8083, // 端口號
      endpoint: '/mqtt',
      clean: true,
      connectTimeout: 4000, // 超時時間
      reconnectPeriod: 4000,
      clientId: uuid.v4(), // 這是一個隨機生成的自定義的值
      cleanSession: true, // 是否清理Session
      keepAlive: 5 // 心跳間隔
    },
    mqttfalg: true, // 是否開啟 mqtt
    // 下邊三個的值是與后端約定好的，根據(jù)實際情況賦值
    ImgStart: '', 
    ImgSend: '',
    ImgEnd: ''
},
mounted() {
	// 創(chuàng)建連接
	this.createConnection()
},
beforeDestroy() {
	// 斷開 mqtt 連接，不然會一直監(jiān)聽消息
  	this.disConnect()
},
methods: {
	// 創(chuàng)建連接
    createConnection() {
      const { host, port, endpoint, ...options } = this.connection
      // 連接的 url
      const connectUrl = `ws://${host}:${port}${endpoint}`
      // 如果開啟了 mqtt
      if (this.mqttfalg) {
        this.client = mqtt.connect(connectUrl, options)
        this.client.on('connect', () => {
          console.log('連接成功!')
          // 關(guān)閉開關(guān)，不然會一直重復(fù)連接
          this.mqttfalg = false
          // 訂閱配置（這里的參數(shù)都是與后端約定好的，根據(jù)實際情況傳入）
          this.client.subscribe(this.ImgEnd, { qos: 2 })
          this.client.subscribe(this.ImgSend, { qos: 2 })
          this.client.subscribe(this.ImgStart, { qos: 2 })
        })
        // 連接出錯執(zhí)行
        this.client.on('error', error => {
          console.log('連接出錯', error)
        })
        // 重連時執(zhí)行
        this.client.on('reconnect', error => {
          console.log('正在重連', error)
        })
		// 監(jiān)聽收到的消息
        this.client.on('message', async (topic, data) => {
          const json = JSON.parse(data.toString())
          console.log('接到了消息', topic, json)
          // 如果收到的消息 topic 等于發(fā)送
          if (topic === this.ImgSend) {
            // 處理收到的消息 json
            console.log('收到的消息內(nèi)容', json)
          }
		  // 如果收到的消息 topic 等于結(jié)束，說明當(dāng)前最后一條消息已發(fā)送完畢
          if (topic === this.ImgEnd) {
            console.log('消息接收完畢')
          }
        })
      }
    },
    // 斷開連接
    disConnect() {
      if (this.client) {
        this.client.end()
        console.log('斷開連接')
      }
    },
}

到此這篇關(guān)于vue 通過 mqtt 實現(xiàn)實時接收消息的文章就介紹到這了,更多相關(guān)vue實時接收消息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: