여러 온습도 센서를 사용하여 HTML에 ... - Inflearn

안녕하세요 현재

DHT11-> DHT22로

여러개의 센서를 이용하여 MQTT.html에 표출 하고자 합니다.

질문들을 검색해서 여러개의 센서를 각각 DB에 저장하는 방법은 진행 되었으나, html 페이지에 표출을 하는 시도를 해보고 있습니다.

html에서 socket_evt_mqtt1,2,3,4를 변화시키면 다른 센서의 데이터를 표출하나.

한번에 모든 센서를 표출하는 방법에 대해 알고 싶습니다.

DHT22, DHT222, DHT223, DHT224 이렇게 진행 하였습니다.

app.js의 내용입니다.

app.set("port", "3000");
var server = http.createServer(app);
var io = require("socket.io")(server);
io.on("connection", (socket) => {
  //웹에서  소켓을  이용한  DHT22  센서데이터  모니터링
  socket.on("socket_evt_mqtt", function (data) {
    DHT22.find({})
      .sort({ _id: -1 })
      .limit(1)
      .then((data) => {
        //console.log(JSON.stringify(data[0]));
        socket.emit("socket_evt_mqtt", JSON.stringify(data[0]));
      });
  });

  socket.on("socket_evt_mqtt2", function (data) {
    DHT222.find({})
      .sort({ _id: -1 })
      .limit(1)
      .then((data) => {
        //console.log(JSON.stringify(data[0]));
        socket.emit("socket_evt_mqtt2", JSON.stringify(data[0]));
      });
  });

  socket.on("socket_evt_mqtt3", function (data) {
    DHT223.find({})
      .sort({ _id: -1 })
      .limit(1)
      .then((data) => {
        //console.log(JSON.stringify(data[0]));
        socket.emit("socket_evt_mqtt3", JSON.stringify(data[0]));
      });
  });

  socket.on("socket_evt_mqtt4", function (data) {
    DHT224.find({})
      .sort({ _id: -1 })
      .limit(1)
      .then((data) => {
        //console.log(JSON.stringify(data[0]));
        socket.emit("socket_evt_mqtt4", JSON.stringify(data[0]));
      });
  });
});
 

추가로 MQTT.html의 내용입니다.

<!DOCTYPE  html> <html>
<head>
    <meta  charset="utf-8"  /> <title>Insert  title  here</title>
    <script  type="text/javascript"  src="./node_modules\socket.io\client-dist\socket.io.js"></script>
    <script  src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script  type="text/javascript">
   
        var  socket  =  null;$
        var  timer  =  null;
            $(document).ready(function  ()  {
            socket  =  io.connect();  //  3000port
            //  Node.js보낸  데이터를  수신하는  부분
        socket.on("socket_evt_mqtt",  function  (data)  {
            data  =  JSON.parse(data);
        $(".mqttlist").html(
"<li>"  +  data.tmp  +  "("  +  data.hum  +  "%)"  +  "</li>" );
});
if  (timer  ==  null)  {
timer  =  window.setInterval("timer1()",  1000); }
});
function  timer1()  {
socket.emit("socket_evt_mqtt",  JSON.stringify({})); console.log("---------");
}


</script>
</head>
<body>
<h2>socket  이용한  DHT22(온도:습도)  모니터링  서비스</h2>
<div  id="msg">
<div  id="mqtt_logs">
<ul  class="mqttlist"></ul>
</div>
</div>

<h3>socket  이용한  DHT22(온도:습도)  모니터링  서비스</h3>
<div  id="msg">
<div  id="mqtt_logs">
<ul  class="mqttlist2"></ul>
</div>
</div>
</body>
</html>
 
 

Cộng đồng Hỏi & Đáp của Inflearn

여러 온습도 센서를 사용하여 HTML에 표출