개발 노트

MQTT 본문

React

MQTT

알 수 없는 사용자 2022. 11. 29. 16:58

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