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

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

MQTT プロトコル

MQTT (Message Queuing Telemetry Transport) は、IBM が開発したインスタント メッセージング プロトコルであり、モノのインターネットの重要な部分になる可能性があります。このプロトコルはすべてのプラットフォームをサポートしており、インターネットに接続されたほぼすべてのオブジェクトを外部に接続できます。センサーやアクチュエータの通信プロトコルとして使用されます(Twitter 経由で家をインターネットに接続するなど)。

MQTT は、最小限のコードと帯域幅でリモート デバイスに接続できる、軽量のブローカー ベースのパブリッシュ/サブスクライブ メッセージング プロトコルです。たとえば、衛星やプロキシ接続、ダイヤルアップやヘルスケア プロバイダー接続、一部の自動化デバイスや小型デバイスなどです。また、サイズが小さく、省電力で、プロトコル オーバーヘッドが低く、1 つまたは複数の受信者に情報を効率的に送信できるため、モバイル アプリケーション デバイスにも適しています。

VueはMQTTサーバーを使用して即時通信を実現します

ほとんどのプロジェクトでは、フロントエンドとバックエンドのやり取りは、フロントエンドがバックエンド インターフェイスを要求し、データを取得した後に処理するだけです。以前、私が取り組んでいたプロジェクトでは、MQTT を使用する必要がありました。使用してみると、魔法のようでした。データをリアルタイムで取得するには、サブスクライブするだけで済みます。さっそく、手順を説明します。

1. vueプロジェクトにmqtt.jsをインストールする

npm インストール mqtt --save

2. プロジェクトのmain.jsまたは必要なvueページで参照します。

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

3. 後で使用するために、vueページのデータにクライアントオブジェクトを定義します。

クライアント: {}

さて、次のステップが重要なポイントです。まず、MQTT に接続する必要があります。MQTT に接続するためのメソッドにはコールバック関数があります。次に、接続が成功した後のコールバックにサブスクリプション メソッドを記述して、エラーが発生しないようにします。これがコードです。

4. 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()
    }

5. メッセージ公開方法

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

6. 上記の3つのトピックを聞いて情報を受け取る

    //受信したメッセージをリッスンする 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 = メッセージ
        }
      });
    },

7. サーバー接続が失敗していないか確認する

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

8. 購読解除

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

9. 切断する

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

10. サーバーの再接続を待機する

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

要約する

これで、vue で MQTT サーバーを使用してインスタント メッセージングを実現する方法に関するこの記事は終了です。vue で MQTT インスタント メッセージングを使用する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue は stompjs を使用して MQTT メッセージ プッシュ通知を実装します

<<:  MySQLカスケードレプリケーションの実装方法の例

>>:  MycliはMySQLコマンドライン愛好家にとって必須のツールです

推薦する

CSS3 を使用して楕円軌道の回転を実装するサンプルコード

最近、次のような効果を達成する必要がある最初は、CSS3D回転を使用して記述すると、次の効果しか得ら...

HTTPSの最も優れた説明

皆さんおはようございます。しばらく記事を更新していませんでした。実は、私は流行中に1か月以上家にいて...

一般的なCSS3アニメーションの実装方法

1. 何ですかCSS アニメーションは、CSS を使用して拡張マークアップ言語 (XML) 要素をア...

UrlRewriter のキャッシュ問題と関連する一連の調査

ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...

MySQL 接続数を設定する方法 (接続数が多すぎる)

mysql使用中に接続数が超過していることが判明しました~~~~ [root@linux-node...

Linux でハードディスクのサイズを確認し、ハードディスクをマウントする方法

Linux には、マウントされたハードディスクとマウントされていないハードディスクの 2 種類のハー...

Vue は Ctrip のカルーセル効果を模倣します (スライディング カルーセル、以下は高度に適応)

まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...

Ubuntu 18.04 に VMware Tools をインストールする際のエラーを解決する

1. オンライン チュートリアルによると、Ubuntu 18.04 のインストールはまだ失敗します。...

Reactにおけるキーの役割の詳細な説明

目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...

リフレッシュリダイレクトを実現する HTML ヘッドタグメタ

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

Linux でソースインストールされたパッケージを簡単に削除する方法

ステップ1: Stowをインストールするこの例では CentOS を使用しているため、拡張 EPEL...

Apache Superset を使用して ClickHouse データを視覚化する 2 つの方法

Apache Superset は、データを表示および探索する方法を提供する強力な BI ツールで...

win10でのmysql5.7.21解凍バージョンのインストールチュートリアル

次のように、Win10でMysqlの解凍バージョンをインストールします。環境: win10 64ビッ...

ファイルをアップロードするための HTML フォームの「参照」ボタンを変更する方法

コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...

MySQL SQL文の特殊処理文のまとめ(必読)

1.テーブル全体を更新します。データ行の列の値が空の場合は、別の列フィールドの値と同じにします。 ...