Vue でインスタント通信を実現するために MQTT サーバーを使用する手順を記録します。

npm インストール mqtt --save

'mqtt' から mqtt をインポートします

クライアント： {}

  //サーバーに接続する connect() {
      オプション = {
        ユーザー名: "xxx",
        パスワード: "xxxx",
        cleanSession: false、
        キープアライブ:60,
        クライアントID: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
        接続タイムアウト: 4000
      }
      this.client = mqtt.connect('ws://192.168.xxx.xx:8083/mqtt',オプション);
      this.client.on("接続", (e)=>{
        console.log("サーバーに正常に接続しました:",e);
        // 'top/#'、'three/#'、'#' という名前の 3 つのトピックをサブスクライブします。this.client.subscribe(['top/#', 'three/#', '#'], { qos: 1 }, (err)=> {
          もしエラーが起きたら
            console.log("サブスクリプションが成功しました");
            // トピック「pubtop」に「hello, this is a nice day!」という内容のメッセージを公開します。this.publish("pubtop", 'hello, this is a nice day!')
          } それ以外 {
            console.log('メッセージのサブスクリプションに失敗しました!')
          }
        });
      });
      //再接続 this.reconnect()
      //接続が切断されましたか? this.mqttError()
      //情報をリッスンする this.getMessage()
    }

    //メッセージを公開 @topic subject @message コンテンツを公開 publish(topic,message) {
      クライアントが接続されている場合
        console.log('クライアントが接続されていません')
        戻る
      }
      this.client.publish(トピック、メッセージ、{qos: 1}、(err) => {
        もしエラーが起きたら
          console.log('件名は' + トピック + "正常に公開されました")
        }
      })
    }

    //受信したメッセージをリッスンする getMessage() {
      this.client.on("メッセージ", (トピック, メッセージ) => {
        if(メッセージ) {
          console.log('受信元', topic, '情報', message.toString())
          定数 res = JSON.parse(message.toString())
          //コンソール.log(res, 'res')
          スイッチ(トピック) {
             ケース 'top/#' :
               this.msg = レス
               壊す;
             ケース 'three/#' :
               this.msg = レス
               壊す;
             ケース 'three/#' :
               this.msg = レス
               壊す;
             デフォルト：
               戻る
               this.msg = レス
           }
           this.msg = メッセージ
        }
      });
    },

    //サーバー接続が失敗したかどうかを監視 mqttError() {
      this.client.on('エラー',(エラー) => {
        console.log('接続に失敗しました:',error)
        this.client.end()
      })
    },

    // 購読解除 unsubscribe() {
      this.client.unsubscribe(this.mtopic, (エラー)=> {
        console.log('トピックは' + this.mtopic + '購読解除に成功しました', error)
      })
    },

    //切断 unconnect() {
      this.client.end()
      this.client = null
      console.log('サーバーが切断されました!')
    },

    //サーバーの再接続を待機する reconnect() {
      this.client.on('再接続', (エラー) => {
          console.log('再接続中:', エラー)
      });
    },