快捷導(dǎo)航

如何在uniapp項目中使用mqtt

更新時間：2021年05月17日 15:24:57 作者：Merryan

本文給大家分享uniapp中引入mqtt的全過程，在uniapp項目根目錄下分別運行安裝mqtt和uuid的命令行，因為后面會用uuid生成mqtt的clientId，文中給大家介紹mqtt和uuid安裝過程，感興趣的朋友跟隨小編一起學(xué)習(xí)下吧

一、uniapp插件市場的參考插件

　　https://ext.dcloud.net.cn/plugin?id=854

二、具體引入過程

1.安裝mqtt和uuid

在uniapp項目根目錄下分別運行安裝mqtt和uuid的命令行，因為后面會用uuid生成mqtt的clientId，所以這邊就一起安裝了。

npm install mqtt@3.0.0

npm install uuid

Ps.

①我這里和uniapp提供的插件安裝的mqtt版本一樣，我也嘗試裝了最新的版本，會報錯，emmmmm...........

②如果沒有pakage.json，安裝是會提示報錯，但是不影響安裝使用。如果想方便一點，下次拉代碼直接安裝的話，可以自己在項目根目錄下加一個pakage.json文件，添加如下內(nèi)容：

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "MIT",
  "dependencies": {
    "mqtt": "^3.0.0",
    "uuid": "^8.3.0"
  },
  "devDependencies": {},
  "scripts": {}
}

2.頁面引入mqtt并調(diào)用

①mqtt連接配置，放在/utils/mqtt.js里面，全局可用。

export const MQTT_IP = '192.168.9.128:8083/mqtt'//mqtt地址端口
const MQTT_USERNAME = 'public'//mqtt用戶名
const MQTT_PASSWORD = 'public'//密碼

export const MQTT_OPTIONS = {
    connectTimeout: 5000,
    clientId: '',
    username: MQTT_USERNAME,
    password: MQTT_PASSWORD,
    clean: false
}

②vue頁面引用mqtt

mqtt里面的clientId用uuid生成唯一標(biāo)識碼，防止不同頁面訂閱不同主題時數(shù)據(jù)出現(xiàn)粘連。

<script>
    import { v4 } from 'uuid';
    import {
        MQTT_IP,
        MQTT_OPTIONS
    } from '@/utils/mqtt.js';
    var mqtt = require('mqtt/dist/mqtt.js')
    var client
    export default {
        data() {
            return {
                topic: '' //要訂閱的主題
            }
        },
        mounted() {this.connect() //連接
        },
        methods: {
            connect() {
                MQTT_OPTIONS.clientId = v4()
                var that = this
                // #ifdef H5
                client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
                // #endif
                // #ifdef MP-WEIXIN||APP-PLUS
                client = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
                // #endif
                client.on('connect', function() {
                    console.log('連接成功')
                    client.subscribe(that.topic, function(err) {
                        if (!err) {
                            console.log('訂閱成功')
                        }
                    })
                }).on('reconnect', function(error) {
                    console.log('正在重連...', that.topic)
                }).on('error', function(error) {
                    console.log('連接失敗...', error)
                }).on('end', function() {
                    console.log('連接斷開')
                }).on('message', function(topic, message) {
                    console.log('接收推送信息：', message.toString())
                })
            }
        }
    }
</script>