일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- DatePicker
- 맥 어드레스
- pm2 상태 확인
- setInterval 정지
- allow_anonymouse
- timepicker
- pm2 확인
- listener 1883
- map이 undefined가 뜰 때
- pm2
- Replication
- pm2 설치
- mySQL_Replication
- pm2 시작
- setInterval 외부 정지
- DataGridView 직접 입력
- 공인IP
- c# datagridview 데이터 넣기
- mosquitto.conf
- mosquitto
- datagridview 직접입력
- 데이터테이블 데이터 넣기
- setInterval clear
- html #select #option #multiple
- AntDesign
- setInterval 중지
- transfer
- 1883
- 서버동기화
- invalid data
- Today
- Total
개발 노트
MQTT 본문
MQTT는 발행-구독(Publish - Subscribe) 구조.
누군가 어떤 주제(topic)로 메세지를 발행하면 해당 주제에 가입된, 즉 해당 주제를 구독 중인 디바이스들만 메세지를 받게 된다.
이러한 발행-구독 구조에서는 메세지를 전달해주는 메시지 브로커가 필요한데 이를 MQTT Broker라고 부름.
Topic = 주제 -> 나 이거 할거야 ㅇㅋ?
Subscribe = 구독!
1.Connect
const [client, setClient] = useState(null);
const mqttConnect = (host, mqttOption) => {
setConnectStatus('Connecting');
setClient(mqtt.connect(host, mqttOption));
};
useEffect(() => {
if (client) {
console.log(client)
client.on('connect', () => {
setConnectStatus('Connected');
});
client.on('error', (err) => {
console.error('Connection error: ', err);
client.end();
});
client.on('reconnect', () => {
setConnectStatus('Reconnecting');
});
client.on('message', (topic, message) => {
const payload = { topic, message: message.toString() };
setPayload(payload);
});
}
}, [client]);
기본 세팅은 client = mqtt.connect(url,options);인데 옵션없이도 가능하다.
borker에 따라 username과 password를 요구하는 브로커가 있다면 자바스크립트 객체를 생성해 옵션을 작성하고 넣어주면 된다.
2.Subscribe
subscribe 구독
브로커에 구독을 하려면 client.subscribe 메소드를 사용하면 된다. 물론 토픽이 배열이나 객체도 가능하다. 나도 자주 사용하지 않을 것 같아서 맨 아래 npm 링크를 참조하면 된다. 보통은 connect 할 시 구독을 한다.
.
client.subscribe(topic/topic array/topic object, [options], [callback])
const mqttSub = (subscription) => {
if (client) {
const { topic, qos } = subscription; //qos는 서비스 품질
client.subscribe(topic, { qos }, (error) => {
if (error) {
console.log('Subscribe to topics error', error)
return
}
setIsSub(true)
});
}
};
3.Unsubscribe
const mqttUnSub = (subscription) => {
if (client) {
const { topic } = subscription;
client.unsubscribe(topic, error => {
if (error) {
console.log('Unsubscribe error', error)
return
}
setIsSub(false);
});
}
};
message - 메세지 수신부
구독을 했다면 메시지가 왔을 때 message 이벤트로 리스너를 만들어 처리한다. 보통 문자열이 전송되기 때문에 구분 문자(/, \...)를 두어 구분하여 사용하면 된다. 구분 문자를 사용하여 여러개의 데이터를 문자열로 전송할 때 주의할 점은 해당 메시지 안에 구분 문자를 사용하면 안된다. 예를 들어 해당 데이터가 암호화가 되면 특수문자도 포함된다. 그렇기 때문에 여러개로 인식되니 주의 하자.
client.on('message', async function (topic, message) {
var _message = message.toString().split('/');
})
4.Publish
const mqttPublish = (context) => {
if (client) {
const { topic, qos, payload } = context; //payload가 보통 작동할 행동
client.publish(topic, payload, { qos }, error => {
if (error) {
console.log('Publish error: ', error);
}
});
}
}
publist - 메시지 전송
기본 예제는 아래와 같다. 보통 옵션이 없다면 topic과 message만 보내면 된다.
client.publish(topic, message, [options], [callback])
옵션과 콜백은 선택사항이다. 옵션은 retain message flag나 qos 등을 설정할 수 있다.
var options = {
retain:true,
qos:1
};
client.publish(topic, message, options)
Disconnect
const mqttDisconnect = () => {
if (client) {
client.end(() => {
setConnectStatus('Connect');
});
}
}
'React' 카테고리의 다른 글
Nodejs와 TCP/IP 통신 (0) | 2022.12.02 |
---|---|
React - Mqtt Client (0) | 2022.11.30 |
JSON()을 사용할 때 주의할 점. (0) | 2022.11.27 |
React - iterable object error (0) | 2022.11.27 |
Html tag- data-set (0) | 2022.11.27 |