uniapp プロジェクトで MQTT を使用する方法

1. uniappプラグインマーケットのリファレンスプラグイン

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

2. 具体的な導入プロセス

1. mqttとuuidをインストールする

コマンドラインを実行して、uniapp プロジェクトのルートディレクトリにそれぞれ mqtt と uuid をインストールします。uuid は後で mqtt の clientId を生成するために使用されるため、ここでは一緒にインストールされます。

[email protected] をインストールします

npm インストール uuid

追伸

①ここで私がインストールしたmqttのバージョンは、uniappが提供しているプラグインと同じです。最新バージョンもインストールしようとしましたが、エラーが報告されます、うーん……

②pakage.jsonがない場合、インストール時にエラーが表示されますが、インストールおよび使用には影響ありません。もっと便利にしたい場合は、プロジェクトのルートディレクトリに pakage.json ファイルを追加し、次のコンテンツを追加できます。

{
  "名前"： ""、
  "バージョン": "1.0.0",
  "説明"： ""、
  "著者"： ""、
  「ライセンス」: 「MIT」、
  「依存関係」: {
    "mqtt": "^3.0.0",
    "UUID": "^8.3.0"
  },
  "devDependencies": {},
  「スクリプト」: {}
}

2. このページではmqttを紹介し、

①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 = {
    接続タイムアウト: 5000、
    クライアントID: ''、
    ユーザー名: MQTT_USERNAME、
    パスワード: MQTT_PASSWORD、
    クリーン: 偽
}

②vueページ参照mqtt

MQTT の clientId は、異なるページが異なるトピックをサブスクライブするときにデータが固定されないように、uuid を使用して一意の識別コードを生成します。

<スクリプト>
    'uuid' から { v4 } をインポートします。
    輸入 {
        、
        MQTT_オプション
    } '@/utils/mqtt.js' から;
    var mqtt = require('mqtt/dist/mqtt.js')
    varクライアント
    エクスポートデフォルト{
        データ（） {
            戻る {
                topic: '' // 購読するトピック}
        },
        マウント() {this.connect() //接続},
        メソッド: {
            接続する（） {
                MQTT_OPTIONS.クライアントID = v4()
                var that = これ
                // #ifdef H5
                クライアント = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
                // #終了
                // #ifdef MP-WEIXIN||APP-PLUS
                クライアント = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
                // #終了
                クライアント.on('接続', 関数() {
                    console.log('接続成功')
                    client.subscribe(that.topic, function(err) {
                        もしエラーが起きたら
                            console.log('サブスクリプションが成功しました')
                        }
                    })
                }).on('再接続', 関数(エラー) {
                    console.log('再接続中...', that.topic)
                }).on('エラー', 関数(エラー) {
                    console.log('接続に失敗しました...', error)
                }).on('end', 関数() {
                    console.log('接続が切断されました')
                }).on('メッセージ', 関数(トピック, メッセージ) {
                    console.log('プッシュ情報を受信:', message.toString())
                })
            }
        }
    }
</スクリプト>