mqtt통신 하기

우선 이번 프로젝트는 니나농님과 동일한 환경으로 테스트를 하기 위해 mqtt Explorer로 테스트 후 pub.dev에서 mqtt관련 패키지를 설치하여 진행하였다.
해당 패키지 링크
mqtt통신의 경우 니나농님이 다 하고 나는 원리만 이해했는데, 간단하게 설명하면 전 게시물에서 다루었던 브로커의 역할을 aws가 해준다고 생각하면 쉽다.

시리얼 번호 받아오기

mqtt통신에 필요한 정보로는 시리얼 번호와 업데이트 주기가 있다.
이 업데이트 주기가 만약 받아오는 정보별로 다르다면 좀 더 까다로웠겠지만, 이번 프로젝트의 경우 아직까지는 모든 정보가 동일한 주기를 가지기 때문에 하나의 드롭다운 박스로 해결해주었다.
이미지1 이미지2 시리얼 번호는 간단하게 자릿수로만 검증을 시도하였고, 넘버만 입력할 수 있도록 조치해두었다.
만약 자릿수가 맞지 않으면 저장하기 버튼을 눌렀을 때 저장을 하지 않고, 시리얼 번호는 n자릿수라는 안내메시지가 나온다.
그리고 유저들이 업데이트 주기가 0이라는 게 뭔지 알기 어려울 수도 있기 때문에 단발성 업데이트임을 여러번 강조하여 알려주도록 설계하였다.

mqtt가 연결되지 않은 경우

이때에는 각 데이터에 ?를 띄울까도 고민했으나, 어차피 불러올 수 있는 정보가 없는 것인데 굳이 그렇게 해야하나 싶어서 시리얼 정보가 없다는 안내만 띄우주도록 하였다. 이미지 없음

정상적인 통신 화면

통신 완료 화면 사진이 잘린 이유는 아랫쪽에 내 ip주소가 들어가는 부분이 있기 때문이다.
현재에는 ui를 바꾸어 표로 알아보기 쉽도록 수정해주었다.
아랫쪽 데이터에는 실시간으로 변하는 fps정보나 켜진 시각 wifi속도 등이 있는데 그 부분을 보면 제대로 변화하는것도 확인할 수있다.

댓글남기기