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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MycliはMySQLコマンドライン愛好家にとって必須のツールです
CSSフィルターを使用してマウスオーバー効果を記述する <div class="fi...
目次コンテナ階層サーブレットの検索を要求するプロセス仕組みTomcat のコンテナは Servlet...
序文: MySQL システムには、さまざまな種類のログが存在します。さまざまなログにはそれぞれ独自の...
上記の Web ページをデザインします。 <!DOCTYPE html> <htm...
Openlayers は、WebGIS クライアント向けのモジュール式で高性能かつ機能豊富な Jav...
目次1. ソースコード1.1 モノレポ1.2 タイプスクリプト2. パフォーマンス2.1 ソースコー...
目次JavaScript のインポート1. 内部ラベル2. 外部紹介基本的な構文データ型番号弦ブール...
この記事では、スクロール可能なポップアップウィンドウ効果を実現するためのVueの具体的なコードを参考...
目次1. beforeCreate & created 2. マウント前とマウント済み3. ...
目次1. コンポーネント化とは何ですか? 2. 基本的な使い方序文:場合によっては、HTML 構造化...
次のコマンドを使用して、MySQL Serverがインストールされているかどうかを確認します。 [r...
1. Docker Secretとは1. シナリオ表示MySQL サービスなど、一部のサービスではパ...
プロセス構造図Nginx はマルチプロセス構造です。マルチプロセス構造は、次のような Nginx の...
目次ダーティページ(メモリページ)ダーティページが表示されるのはなぜですか?メモリ管理メカニズムの簡...
目次マハ1. MAHアーキテクチャの概要2. 適用可能なシナリオ3. MHAの動作原理4. MHAの...