Q&A
ソースコードを提示してください
初質問です。
私はプログラム初心者なので多めに見ていただけるとありがたいです。
とあるサイトを参考にラズパイとMQTTを使用した 横軸：時間, 縦軸：メッセージ(数値)のリアルタイムチャートをローカル環境で実現しようと考えています。
使用機器：ラズパイ3b+
使用アプリケーション:mosquito, apache2, chart.js, chart-plugin-streaming, moment, mqtt.js
参考にしたプログラムの中にMQTTURLなるものがありました。
mosquittoの場合はMQTTURLに何を入力すればよろしいでしょうか？
教えていただければ幸いです。
補足として
リアルタイムチャートの部分は動作しています。
よろしくお願いします。
ご指摘がありましたのでソースコードを提示させていただきました。 内容も変にややこしくしてしまい申し訳ありません。 目標としてはラズパイとM5Stackなどの外部端末を使ってスマートウォッチのようなリアルタイムでセンサの値をグラフ化してApache上で表示させる機能を実装したいです。 また、使用するシチュエーションとして外で使えるようにしたいため、ローカル環境で動かすことを考えています。 後、ラズパイのhostapdでアクセスポイントにしているためスマホなどでラズパイに接続しても同様な画面が表示できるようにする予定です。 やりたいこととして ①外部端末からMQTTデータ(数値)をmosquittoでPublish(送信) ②Apache2からhtmlファイルを開く ③htmlファイルの横軸をリアルタイムで動かす ④リアルタイムで動いているグラフにmqttで受信したデータを縦軸の数値として折れ線グラフを表示する。 このようなシステムを作成したいです。 できれば使用するパッケージなどは変更せずにできるとありがたいです。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>リアルタイムなグラフ描画</title> <script src="moment-with-locales.min.js"></script> <script src="Chart.js"></script> <script src="chartjs-plugin-streaming.min.js"></script> <script src="mqtt.min.js"></script> </head> <body> <canvas id="myChart"></canvas> <script> const MQTTURL = "？"; const TOPIC = "home/"; let client = mqtt.connect(MQTTURL, { clientId: "Browser-" + Math.floor(Math.random() * 100), // ID Example: "Browser-23" }); client.on("connect", function () { client.subscribe("presence", function (err) { if (!err) { console.log("接続"); client.subscribe(TOPIC); } else { console.log("接続エラー"); } let chart = new Chart(ctx, { type: "line", data: { datasets: [ { data: [], }, { data: [], }, ], }, options: { scales: { xAxes: [ { type: "realtime", realtime: { delay: 2000, }, }, ], }, }, }); client.on("message", function (topic, message) { console.log(message.toString()); chart.data.datasets[0].data.push({ x: Date.now(), y: message.toString(), }); chart.update({ preservation: true, }); }); </script> </body> </html> ```
なにを作ろうとしているのでしょう? ローカル環境でなにか図を描きたいだけの様子ですが、大げさなコトバが飛び交っている気がします。
もちろんローカルでMQTTだのapacheだの通しても悪いことはないでしょうけれど...
初心者を自称するのであれば、「方針の選択」の段階で目標からそれた方角に進んでしまっている可能性を否定できませんよね。まず最終的にやりたいこと(MQTTの使い方、とかいうような手段の話ではなく)を説明してみてください。
(といいつつ私自身はあまりネットワーク系には強くないのですが、やりたいこと、欲しい物をちゃんと説明できれば出入りしている猛者がなんとかしてくれるんじゃないかと)
返信が遅くなってしまい申し訳ありません。
ソースコードの提示と説明の追加をさせていただきました。
確認よろしくおねがいします。
回答2件
0
ベストアンサー
mqtt.connect メソッドの第1引数にはMQTTブローカーのURLを入れます。
ブローカーがラズパイで動いているなら、例えば 'mqtt://ラズパイのURL' のようになります。
投稿2021/12/28 10:07
総合スコア1448
0
自分はwebsocketでの接続だったため最初のmqttの部分をwsに変更
第１引数をラズパイに設定しているアドレス(URL),
第２引数を "/etc/mosquitto/mosquitto.conf"で設定していたポート番号にすることで解決しました。
ご協力ありがとうございました m(_ _)m
var client = mqtt.connect('ws://(ラズパイのアドレス):ポート番号');
投稿2021/12/28 15:53
総合スコア1
あなたの回答
tips
プレビュー
