[MQTT/JavaScript] JavaScript에서 MQTT 수신하기
기존까지는 좌표 정보들을 DB에서 select 해 표출하는 방식으로 지도에 그렸다.
하지만 DB에 저장되기 전, MQTT를 통해 실시간으로 수신되는 데이터를 표출해야 하는 상황이 발생하였다.
DB에서 좌표 데이터를 조회하여 표출하는 방식은 미세하게라도 시간 차가 발생하기 때문에, 중요한 데이터를 확인할 때는 MQTT로 수신 받자마자 지도에 표출하는 것이 더 좋을 것이라는 생각을 하였다.
그래서 이번 포스팅은 JavaScript를 통해 MQTT 클라이언트를 연결하고 데이터를 수신 받는 소스를 작성하였다.
(여담으로 SpringBoot로 MQTT 클라이언트를 구현하여 데이터를 수신 받으려 하였으나, 개발 로직 상 맞지 않아 며칠 고민하다 자바스크립트로 변경하였다. SpringBoot에서의 연결은 추후에 작성해보려 한다.)
MQTT란?
MQTT는 ISO 표준 발행-구독 기반의 메시징 프로토콜로, TCP/IP 프로토콜 위에서 동작을 한다. 발행-구독 메시징 패턴은 메시지 브로커를 필요로 한다.
해당 프로토콜에 대한 자세한 내용은 이전 포스팅에서 확인할 수 있다.
MQTT란 무엇일까?
MQTTMQTT(Message Queueing Telemetry Transport)는 머신 대 머신 통신에 사용되는 표준 기반 메시징 프로토콜 또는 규칙 세트이다.스마트 센서, 웨어러블 및 기타 IoT 디바이스는 일반적으로 리소스 제약이 있
justdo1tme.tistory.com
JavaScript로 MQTT 데이터 수신하기
필요 파일 준비
JavaScript를 통해 MQTT 데이터를 수신하기 위해서는 아래의 js 파일을 준비한다.
- mqttws31.js
- mqttws31-min.js
해당 파일들을 원하는 디렉토리에 위치시키고 index.html의 head에 경로와 함께 로드해준다.
<head>
<script src="/userpath/mqttws31.js"></script>
<script src="/userpath/mqttws31-min.js"></script>
</head>
MQTT 클라이언트 연결 및 데이터 수신
클라이언트 연결
function connectMattFunc() {
let mqttClient = null;
const client_id = 'clientID-' + parseInt(Math.random() * 100); // client_id
mqttClient = new Paho.MQTT.Client(mqtt_ipaddress, Number(mqtt_port), client_id);
mqttClient.onConnectionLost = onConnectionLost;
mqttClient.onMessageArrived = onMessageArrived;
mqttClient.connect({
onSuccess: onConnect,
onFailure: onFailure,
userName: mqtt_id,
password: mqtt_pw,
useSSL: false
});
// mqtt_ipaddress, mqtt_port, mqtt_id, mqtt_pw는 따로 선언해두었음
}
MQTT topic 구독
MQTT 클라이언트에 연결이 되면 topic을 구독한다.
function onConnect() {
// topic 리스트 구독 (QoS 값 포함)
for (let i = 0; i < topics.length; i++) {
mqttClient.subscribe(topics[i], {qos:Qos[i]});
}
}💡 QoS를 topic 별로 다르게 설정하여 서비스의 질을 각기 다르게 보장할 수 있다.
MQTT 메시지 수신
function onMessageArrived(message) {
const resAddress = message.destinationName; // 토픽
const topic = resAddress.split('/'); // 토픽을 찾기 위한 분리
// console.log(topic[5]); // 해당 내용은 토픽에서 필요한 데이터 추출을 위해 달라질 수 있다.
console.log(message.payloadString); // MQTT로 수신 받은 데이터
}
MQTT 클라이언트 연결 실패
function onFailure(responseObject) {
console.log('mqtt - connection fail');
console.log('fail response:', responseObject);
}
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
console.log('mqtt - onConnectionLost: ', responseObject.errorMessage);
// 재연결 시도
retryConnMqtt();
}
}
MQTT 재연결
function retryConnMqtt() {
console.log('mqtt - 재연결 중');
mqttClient.connect({
onSuccess: onConnect(),
onFailure: onFailure()
});
}
번외
MQTT와 관련된 읽어보면 좋은 포스팅들이다.
해당 포스팅은 JavaScript를 사용하여 MQTT를 수신하는 방법을 작성한 포스팅이지만, 이를 변형하여 Java에서도 구현할 수 있다.
[Java] CompletableFuture에 대한 이해 및 사용법
이번에는 자바8에 추가된 CompletableFuture에 대해 알아보도록 하겠습니다. 1. CompletableFuture에 대한 이해 [ Future의 단점 및 한계 ] Java5에 Future가 추가되면서 비동기 작업에 대한 결과값을 반환 받을
mangkyu.tistory.com
MQTT 공부 중 참고할만한 문헌 모아두기
MQTT 설계 아키텍처 관련 https://www.joinc.co.kr/w/man/12/MQTT/MultiChat MQTT를 이용한 Push 서비스 개발 MQTT를 이용한 Push 서비스 개발에서 MQTT 설치와 함께, 간단한 채팅 애플리케이션을 만들었다. 한발 더 나
gaebalsogi.tistory.com
[ 참고 자료 ]