[ IoT] Python Flask + JavaScript

<데스크탑 버전과 모바일 버전>

 

AJAX를 왜 썼는가?

  각 카드 안의 파란 버튼을 누르면 최신 데이터를 가져오도록 구현하는 것이 웹의 목적이었다. 각 버튼을 통해 URL GET 요청으로 서버에서 MQTT request를 요구하도록 구현하였다. 그 때마다 html 파일과 버튼에 해당하는 결과값을 받도록 하였는데, 그 때마다 새로운 html로 화면이 전환된다. 이 때 html 파일과 함께 원하는 특정 최신 데이터만 받으므로, 다른 데이터의 값은 다시 사라지게 된다. 예를 들어 온도 값이 html과 함께 rendering 되었으나, 습도 값을 가져오는 버튼을 눌렀을 때 다시 새로운 URL 요청으로 새 html과 습도 값만 가져오므로 모든 값들은 프론트까지 오지 못하게 된다.

 

  이 상황에서 세 가지 옵션을 생각했다.

 

1. URL 요청 시, 어느 버튼이라도 모든 데이터를 함께 html과 rendering 해준다.
2. 각 버튼을 눌렀을 때, 화면 전환 없이 원하는 특정 데이터 값만 받아서 수치만 바뀌게 한다.
3. 아예 버튼을 클릭하여 데이터를 요청하는 것이 아니라 주기적으로 모든 데이터를 가져오도록 한다.

 

1번의 가정에서는 원하는 것은 단지 캐릭터 몇 개인데 화면 전체를 가져오는 것은 비효율적이다. 또한 특정 데이터만 가져오는 것이 아니라 모든 데이터를 리프레쉬하므로 원래의 시나리오와 맞지 않았다.

 

3번, 또한 버튼을 클릭해서 모든 데이터를 주기적으로 가져오도록 구현하는 것 역시 비효율적이었다. 데이터를 가져오는 주기가 너무 짧으면 반복되는 데이터를 가져오는 낭비이고, 그 주기가 너무 길면 수동으로 가져오도록 요청하는 기능 구현을 해야 하는데 어차피 이것은 원래 시나리오와 반복되기 때문이다.

 

2번 옵션의 경우에는 제일 처음 생각난 것이 ajax이다. javascript에서 비동기식으로 데이터를 요청하여 받은 데이터만 업데이트하는 식으로 구현하면 화면 전체를 다시 시작할 필요도 없고, 따라서 하나의 데이터를 가져오면 또 다른 데이터가 사라질 위험이 없기 때문이다.

 

 

 

사용방법

<!-- ajax download -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="{{url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
<script type=text/javascript>

$(function() {
	$('a#test1').bind('click', function() {
    	$.getJSON('/iot/nth405/led',
         	function(data) {
            var result = data;
            document.getElementById("ledAjax").innerHTML = data['LED'];
        });
        return false;
    });
});
 

<div class="Result" id="ledAjax">&nbsp</div>