iot 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 jjk팀)
TRANSCRIPT
![Page 1: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/1.jpg)
제6기 SW Maestro 과정 1단계 1차 프로젝트
IoT 데이터 수집 및 모니터링 플랫폼
멘토: 한대희 서영주 오정규 박은진
![Page 2: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/2.jpg)
Index•프로젝트 개요
•구현 세부사항 - Gateway - Collector - Web App
•Demo 시연
•Q&A
![Page 3: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/3.jpg)
ArchitectureGateway Collector Web App
![Page 4: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/4.jpg)
Sensor
Raspberry Pi
Actuator
serial port
analogRead()
analogWrite()
Gateway
![Page 5: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/5.jpg)
Sensors
의료센서
공기질 센서
불꽃/초음파 센서 & actuator
![Page 6: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/6.jpg)
Arduino & Raspberri Pi•Arduino : Digital I/O Pin과 Analog I/O Pin이 존재하므로 센서 값을
측정하는 데 사용
•Raspberri Pi : Raspbian OS, USB, 이더넷 등이 지원되므로 node.js,
Python, MQTT 등을 사용
•Arduino와 Raspberri Pi의 UART(serial) 통신을 위해 USB케이블 연결
![Page 7: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/7.jpg)
MQTT (Message Queue Telemetry Transport)
•단일 TCP만을 사용하여 최소의 자원으로 작동
•임베디드처럼 한정된 자원을 가진 시스템에 적합
•Publish/Subscribe 모델
•특정 메시지들을 송수신하기 위하여 Topic을 통해 분류
•Publisher와 Subscriber는 서로 알 수 없으며, Broker를 통하여 메시지를 송수신
![Page 8: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/8.jpg)
Code of GatewayserialPort.on('open', function () { // serialport를 통해 data가 들어오면 핸들러를 실행한다. // data: { topic, value } serialPort.on('data', function (data) { var data = JSON.parse(data);
for(var topic in data) { // epochtime과 value의 배열을 생성한다. var message = [ getEpochTime(), data[topic] ]; message = JSON.stringify(message);
mqtt_publisher.publish(topic, message); });
});
![Page 9: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/9.jpg)
Code of Gatewaymqtt_publisher.subscribe(‘cmndFromSvr’); // subscribe하고 있던 topic에 대한 message가 들어오면 핸들러를 실행한다. mqtt_publisher.on('message', function (topic, message) { var message = JSON.parse(message); // 서버로부터 받은 명령에 따라 각 actuator를 실행시킨다. switch(message.actuator) { case 'LED' : if(message.cmd.toString() == 'TURNON') { serialPort.write('0'); }else { serialPort.write('1'); } break; case 'PIEZO' : if(message.cmd.toString() == ‘SOUND') { serialPort.write('3'); } break; } });
![Page 10: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/10.jpg)
Raspberri Pi
Web Server
Pub/Sub
POST Request
Database
{ key: Temperature, value: “36.5” }
Collector
![Page 11: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/11.jpg)
Redis
•Redis : NoSQL 기반의 데이터베이스
•특징
• In-Memory 기반의 데이터베이스
- 속도가 매우 빠름
- 데이터 저장방식: RDB, AOF
•Key-Value 형태의 데이터베이스
•다양한 데이터 타입 지원
- List, Sorted Set, Hashes …
![Page 12: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/12.jpg)
Code of Redis
// collector.js // mqtt client에 메시지가 들어오면 redis에 lpush한다. mqtt_client.on(‘message’, function (topic, message) { redis_client.lpush(topic.toString(), message);
});
// app.js // 웹 브라우저로부터 요청이 들어오면 redis db의 값을 보내준다. app.get(‘/api/current’, function (req, res) { sensorname = req.query.sensorname; db.lindex(sensorname, 0, function (err, data) { res.json(data);
}); });
![Page 13: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/13.jpg)
Web ApplicationWeb Server
Web Browser
![Page 14: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/14.jpg)
Express & EJS•Express : 웹과 모바일 애플리케이션을 위한 다양한 기능을 제공하는
작고 유연한 node.js 웹 프레임워크
•EJS : Template Rendering Engine
•Code of Express var express = require('express'); var app = express(); var ejs = require(‘ejs’); var http = require(‘http’); var server = http.createServer(app);
app.set('port', process.env.PORT || 8080); app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); // set the view engine to ejs
app.get('/current', function (request, response) { response.render('pages/current', { }); });
![Page 15: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/15.jpg)
Socket.io
• Web Socket과 달리 Socket.io는 node.js에서 바로 사용할 수 있는 기술• JavaScript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술 • 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용
![Page 16: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/16.jpg)
Code of Collectorvar request = require('request'); var formdata = { 'to' : toAddr, 'from' : fromAddr, 'subject' : subject, 'html' : message
}; var options = { url: ‘/noti', form: formdata
}; // request 모듈을 이용하여 서버에 post방식으로 보낸다. request.post(options, function (err, httpResponse, body) { … });
![Page 17: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/17.jpg)
Code of Web
Server (app.js)
// connection이 발생할 때 핸들러를 실행한다. ioserver.sockets.on('connection', function (socket) {
// 클라이언트에서 joinroom 이벤트가 발생하면 데이터를 받는다. socket.on('joinroom', function (roomname) {
socket.join(roomname); });
});
// event notification을 통해 post 요청을 처리한다. app.post(‘/noti’, function (req, res) {
// 클라이언트로 redraw 이벤트를 보낸다. ioserver.sockets.in('CURRENT').emit('redraw', req.body);
});
Client (current.ejs)
// 서버에 joinroom 이벤트를 보낸다. socket.emit(‘joinroom', ‘CURRENT’);
// 서버에서 redraw 이벤트가 발생하면 데이터를 받는다. socket.on('redraw', function (data) {
var sensorname = data.sensorname; var point = data.point;
updateChart(sensorname, point); });
![Page 18: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/18.jpg)
Ajax with jQuery
•페이지 일부분을 업데이트 하기 위한 정보를 서버에 요청할 수 있다.
•서버로부터 받은 데이터로 작업을 한다.
•Code of Web Browser
$.ajax({ url: '/api/current', data: { sensorname: sensorid }, success: function(point) { $('#' + sensorid).html(point);
}, cache: false
});
![Page 19: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/19.jpg)
Highchart
•Highchart : Javascript로 이루어진 charting library
![Page 20: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/20.jpg)
Bootstrap
•Bootstrap : CSS와 Javascript로 이루어진 library
- 더 빠르고 쉬운 웹 개발을 위한 세련되고 직관적이며 강력한 프레임워크이다.
- 수 많은 테마가 존재하며 아이콘, 네비게이션 등 다양한 기능을 제공한다.
![Page 21: IoT 센서, 게이트웨어, 웹 서버, 실시간 모니터링 (소마 6기 1단계 JJK팀)](https://reader035.vdocuments.site/reader035/viewer/2022082208/58ce99a01a28ab8c3b8b7131/html5/thumbnails/21.jpg)
감사합니다