目的
Noodlの外部MQTTブローカーとしてCloudMQTTを利用する方法を備忘録として残しておこうと思います。
今回作ったサンプルプロジェクト
入力された文字の情報をCloudMQTTに送り、CloudMQTTからNoodlに情報が返ってくるというものです。
MQTTに繋げる意味あるのかって感じですが、本記事の目的はCloudMQTTの利用方法の備忘録なので...笑
CloudMQTTの利用方法
１. CloudMQTTにアクセスし、Get a managed IoT broker todayをクリック。
２. フリープランのGet Nowをクリック。
３.CloudMQTTにログイン。
４.ログイン後の画面右上にあるCreate New Instanceをクリック。
５.Nameにインスタンス名を入力し、Select Regionをクリック。（今回はインスタンス名をtestとしました）
６.AWSのデータセンターを選択します（今回はUS-East-1を選択しました）
７.入力情報を確認したらCreate instanceをクリック。
８.インスタンスが作成され、AWS上にMQTTブローカーを立てることができました！
９.作成したインスタンスをクリックすると、サーバー名、ユーザー名、パスワード、各ポート番号などが表示されます。これらの情報をNoodl側で使うので、この画面を開いたままNoodlへ移ります。
NoodlでClowdMQTTを利用する方法
１.Noodlでプロジェクトを開いた後、Project settingsを開きます。
２.MQTT欄のExternal Brokerにチェックを入れると、Broker URLの入力欄が出現します。
Broker URLはCloudMQTTの情報を元に以下のように入力します。
wss://【User】:【パスワード】@tailor.cloudmqtt.com:【Websockets Port (TLS only)】
３.Send Messegeノードを作成し、Topicに/testと入力します。
（最初に/を必ず入れれば、どんな名前でもOKです）
左下にある+Portをクリックし、Payloadにmojiというポートを作成しました。
（ポートも好きな名前でOKです）
Send On Changeにチェックを入れます。
（データが変更される度に、mqttブローカーへデータを送るということです）
４.Text Inputノード（Text）からSend Messegeノード（moji）へ繋ぎます。
５.Receive Messegeノードを作成し、Topicに/testと入力します。
（Send Messegeノードで決めたTopic名と同じでないと、データを受け取れません）
左下にある+Portをクリックし、Payloadにmojiというポートを作成します。
（Send Messegeノードで作成したポート名と同じ名前出ないと、データを受け取れません）
６.Receive Messegeノード（moji）からTextノード（Text）へ繋ぎます。
７.プレビュー画面に文字を入力してみて、その通りに文字が表示されれば成功です！
送受信されたデータの確認方法
CloudMQTTのWEBSOCKET UIをクリックすると以下のような画面が出ます。
この画面で、送受信されたデータを確認することができます。
データが送受信されるとこんな感じ↓
文字が入力される度にデータが送られているのが分かります。
おわりに
今回はNoodlの外部MQTTブローカーとしてCloudMQTTを使用しました。
他にも、外部ブローカーにはshiftr.ioなどがあります。
以下の記事が参考になると思いますので、気になった方はそちらもチェックしてみてください〜
・MQTTブローカ"Shiftr.io" 入門
・デザイン思考のプロトタイピングツール"Noodl"でノンコーディングIoT！