はじめに、実現したいこと
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>
あなたの回答
tips
プレビュー