13-STM32モノのインターネット開発WIFI（ESP8266）+ GPRS（Air202）システムソリューションWeChatアプレット（WebバージョンMQTT、小規模テスト）

https://www.cnblogs.com/yangfengwu/p/11148976.html

申し訳ありません...最近、ボードの開発により、チュートリアルの進行状況が低下しました...

最近は全部で数枚のボードが作られています

まず、現在のチュートリアルのボードが改訂され、レイアウトが調整され、以前に使用されていたMicro USBインターフェイスが置き換えられ、スイッチのステップダウンがMP4462に変更されました。

STM32 + Air720H（フルNetcom GPRS）+ Ethernet + 422/485 + 4-20maコレクション https://www.cnblogs.com/yangfengwu/category/1472273.html

後で価格がまだ少し高いと感じたので、別のボードを作りました

STM32 + Air202（2G）+ Ethernet + 422/485 + 2つのリレー、実装された機能は、主にW5500の学習、およびリモートおよびPLC通信制御のために上記と同じです。

購入したPLCが到着しました

安全のため、24V電源のPLCを選びました

次に、WiFiシングルチャネルリレー、10Aおよび16Aがあります

すべては自分で行います...シェルの写真はPSによって作成され、メーカーによってレーザー印刷されています。

最後に、リモートM26ミニボードを作りました

しかし、それで十分です....。

私が作ったボードは徐々に直接使用に近づいています。実際、主な理由は、公開されている基本的なチュートリアルを除いて、私が準備したチュートリアルがすべて直接適用されているためです。

それでも学習ボードの形になっていると、もっと実用的な役割を果たさないと感じます...

ちなみに、WeChatミニプログラムが実際にどのような機能を実装しているのかは一度も言いませんでした。

1. SmartConfigはネットワーク分散を実現し、小さなプログラムがバインディングを担当します

2. WeChat公式アカウントのボタンをクリックしてWebページにジャンプすると、制御デバイスがWebページに実装されます。

3.小さなプログラムの1つで、Webページを直接開きます。これは上記と同じです。

4.アプレットのAPIを直接使用して、MQTTと通信制御を実装します

...実際、それだけです。

しかし、これについて話す前に、私はすべての人にすべての基本を与える必要があります...理解できないことを防ぐために...

これを開く

それについて話しましょう。htmlとphpの両方がMQTTを実装するための関数を提供します。まず、htmlでの実装を使用しましょう。

アップグレードの記事を作成するときは、マイクロコントローラー+ AT命令によって実装されたMQTTを使用したことを思い出してください。当時、公式Webサイトからダウンロードされたのはパッケージパッケージでした。

今回もそのパッケージをダウンロードしに行きました

https://developer.emqx.io/sdk_tools?category=MQTT_Clients

これを最初に使用してください

フルバージョンと要約バージョンを提供します

フルバージョンはSSLをサポートします

フルバージョンを使いましょう

プロジェクトディレクトリにコピーします

実際、当局は例を挙げました

JS実装部分を書いているので、それを書く必要があります。実際、最も一般的に使用される（ほとんど必要な）Webページは次のとおりです。

html（私たちが構築したこのプロジェクトはhtmlです）主にユーザーに表示するためのいくつかのコントロールを行うために https://www.cnblogs.com/yangfengwu/p/10947388.html

css（htmlコントロールのレイアウトと属性を担当） https://www.cnblogs.com/yangfengwu/p/10979101.html

JavaScriptプログラミングWebページの動作 http://www.w3school.com.cn/js/js_shiyong.asp

これらの3人はhtmlファイルに直接配置でき、学習とテストはこのように行うことができます。通常、彼らは独自のファイルを作成してからhtmlにロードします。

cssをロードします

JSをロード

コードをコピーする

    <script> 
        var client = new Paho.MQTT.Client（location.hostname、Number（location.port）、 "clientId"）; //クライアントインスタンスを作成する
        //コールバックハンドラーを設定する
        client.onConnectionLost = onConnectionLost; //接続を設定するコールバック関数
        client.onMessageArrived = onMessageArrivedを切断します; //メッセージエントリを受信するコールバック関数を設定します
        client.connect（{onSuccess：onConnect}）; //クライアント接続を接続します... 
        function onConnect（）{//クライアントが接続
            する接続されている場合は、次のように入力します//接続が確立されたら、サブスクリプションを作成してメッセージを送信します
            。console.log（ "onConnect"）; //コンソールは
            client.subscribe（ "World"）; //サブスクライブの件名を出力します"World"
            メッセージ=新しいPaho.MQTT.Message（ "Hello "）; //送信メッセージ" Hello "を設定します
            message.destinationName = "World"; //送信されたテーマを設定
            client.send（message）; //メッセージを送信
        } 
        function onConnectionLost（responseObject）{//クライアントが接続を失ったときに呼び出される
            if（responseObject.errorCode！== 0 ）{// 1または2のいずれかに応答します。https：
                //www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html console.log（ "onConnectionLost：" + responseObject.errorMessage）; 
            } 
        }を参照してください。
        function onMessageArrived（message）{//メッセージが到着したときに呼び出されますコンソールは、受け入れられたメッセージを出力します
            console.log（ "onMessageArrived：" + message.payloadString）; 
        } 
    </ script>

コードをコピーする

APIの紹介はこちら

https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html

次に、IPとポート番号を変更します

注意してください、それはMQTTのWebSocketポートです

また、MQTTのどのポートにアクセスしても、2つのデバイスのサブスクリプションが公開されたトピックに対応している限り、2つのデバイスは通信できます。

いいんだよ

デバッグアシスタントを使用してテストしてみましょう

次のページを再開します

現在、接続用のユーザー名とパスワードを入力していません...

指定されたAPIは、ユーザー名とパスワードを構成できます

client.connect（{onSuccess：onConnect、userName： "yang"、password： "11223344"}）;

テスト中

実はこんな感じです

コードをコピーする

var Options = { 
            onSuccess：onConnect、
            userName： "yang"、
            password： "11223344" 
        }; 

        client.connect（Options）; //クライアントを接続します。

コードをコピーする

一つのことを言うのを忘れた

varはjsで変数を定義するために使用され、varは変数を定義するために使用されます

var Options = { 
            onSuccess：onConnect、
            userName： "yang"、
            password： "11223344" 
        };

これは単なるシンタックスシュガーです。このように記述する場合は、前の文字列名を判別してから、後に値を取得する必要があります。 ：番号を入力してから、MQTTパッケージ
関数に入力します。
実際、多くの人がこれを行います。このルールに従って書くと、内部インタープリターがあなたを認識します...
または、数十年前に生まれた場合は同じ文で、あなたもjsの仕事に携わっていて幸運なら、あなたはあなた自身のルールを持っているかもしれません
。私はその日のグループで同様の言葉を言いました。誰かが写真を送って、それは言いました：私はそれを静か
に見ました、彼は理解しませんでした私はこの文の意味を言います、多くの知識は人々によって規定されています、多くの場合、なぜそれがこのように規定されているのか心配する
必要はありません。存在の意味を持っていますが、この文を言い訳にしないでください。深く理解する必要のある知識は、さらに深く理解する必要があります。

基本チュートリアルのソースコードは公開されています。ブログの手順を読んで

このセクションを最初にダウンロードしてから、次のセクションを完了することができますhttps://www.cnblogs.com/yangfengwu/p/11198572.html

13-STM32モノのインターネット開発WIFI（ESP8266）+ GPRS（Air202）システムソリューションWeChatアプレット（WebバージョンMQTT、小規模テスト）

おすすめ