質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

MQTT

MQTT(Message Queue Telemetry Transport)とは、TCP/IPネットワークで利用可能な通信プロトコルの一つで、IoT/M2M向けに開発された軽量なプロトコルです。ヘッダ部分は最小2バイトと小さく、通信量・CPU負荷・電力消費量などを抑えることができます。

マイコン

マイクロコンピュータの略で、CPUにマイクロプロセッサを用いたコンピュータのこと。家電製品、電磁機器などの制御に用いられています。単体でコンピュータとしての機能を一通り備えています。 現代のパーソナルコンピュータに近く、同時期のメインフレームやミニコンピュータと比べ、小さいことが特徴です。

Q&A

0回答

2021閲覧

Node.jsでMQTTを使用して、マイコン(esp32)から送られてきたデータをejs上に表示する方法

minwinmin

総合スコア16

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

MQTT

MQTT(Message Queue Telemetry Transport)とは、TCP/IPネットワークで利用可能な通信プロトコルの一つで、IoT/M2M向けに開発された軽量なプロトコルです。ヘッダ部分は最小2バイトと小さく、通信量・CPU負荷・電力消費量などを抑えることができます。

マイコン

マイクロコンピュータの略で、CPUにマイクロプロセッサを用いたコンピュータのこと。家電製品、電磁機器などの制御に用いられています。単体でコンピュータとしての機能を一通り備えています。 現代のパーソナルコンピュータに近く、同時期のメインフレームやミニコンピュータと比べ、小さいことが特徴です。

0グッド

1クリップ

投稿2019/09/18 06:28

はじめに、実現したいこと

Node.jsでMQTTを使用しています。
マイコン(esp32)から送られてきたデータ(Publishされた)を、Node.jsでsubscribeしてejsファイル上に表示させたいと考えています。

マイコンから送られてきたデータをNode.jsでsubscribeして、コンソール画面に表示させることはできています。しかし、ejsファイル上に表示できず困っています。

#プログラムと考察
下記が問題箇所を抜粋したプログラムになります。
landing.ejs上にあるボタンを押すと、app.get('/getData', (req, res)…でマイコン側に”0”が送られ、それがトリガーとなり、データがマイコン側からpublishされます。そのpublishされたものをindex.js上のclient.subscribe('tempData'...で受け取りejs.render...でlanding.ejs上に表示させようと考えました。データはsubscribeによって受け取れていることはコンソール画面で確認済みです。
しかし、landing.ejsの<td><%=temp %></td>には、うけとったデータが入らず、NULLとなります。どのようにすれば、表示させたい場所にsubscribeしたデータを受け取ることができるのでしょうか?

//index.js var express = require('express'); const bodyParser = require('body-parser'); const mysql = require('mysql'); var mqtt = require('mqtt'); var ejs = require('ejs'); var app = express(); app.use(express.json()); const port = process.env.PORT || 7700; app.listen(port, () => console.log(`Listening on port ${port}...`)); app.set("view engine", "ejs"); const client = mqtt.connect('server'); client.on('connect', () => console.log('publisher.connected.')); app.get("/", function(req, res) { res.render("landing", { temp: "NULL", }); }); app.get('/getData', (req, res) => { //下記のpublishがESP32へ送られる、これがトリガーになってデータが戻ってくる client.publish('getData', "0"); res.redirect('http://localhost:7700/') }); client.subscribe('tempData', function() { client.on('message', function(topic, message, packet) { console.log("Received '" + message + "' on '" + topic + "'"); #下記のejs.renderでejs上に表示されるとおもったが表示されない ejs.render("landing", { temp: message, }); }); });
//landing.ejs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>WEB</title> </head> <body> <table class = "table"> <tr> <td><%=temp %></td> <td> <form action="/getData" method="get""> <input type="submit" value="get_data"/> </form> </td> </tr> </table> <script src="../index.js"></script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問