html, javascript에서 mqtt 사용하기 & WebSocket connection to 'ws://127.0.0.1:9001/mqtt' failed: 해결

1. mqtt 설명

IoT 환경에서 작은 데이터를 전송하는 경우, HTTP 통신을 하게 되면 오버헤드가 발생하여 효율성이 떨어지게 됩니다. 그리고 폴링 방식을 사용하기 때문에 성능이 낮아지는 문제점도 있습니다.

따라서 경량화 된 통신을 제공하고 IoT 환경에 최적화 된 MQTT 프로토콜을 사용하는 것을 추천합니다.

MQTT 모식도

MQTT 브로커는 publisher와 subcriber사이에 토픽에 따라 메시지를 전달해주는 역할을 합니다.

 

2. mqtt explorer 설치

설치 링크

mqtt-explorer.com/

MQTT Explorer

MQTT Connection setting

Host는 127.0.0.1, Port 번호는 1883를 입력해줍니다.

 

3. html, javascript 작성하기

1) cdn 추가

<!-- mqtt cdn-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>

 

2) script tag안에 코드 작성

$(document).ready(function(){

    var port = 9001;

    var client = new Paho.MQTT.Client(location.hostname, Number(port), "clientId");

    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;


    client.connect(
        {onSuccess: onConnect}
    );


    function onConnect() {
        console.log("onConnect");
        client.subscribe("chartInfo"); //토픽 설정
    }

    function onConnectionLost(responseObject){
        if(responseObject.errorCode != 0){
            console.log("onConnectionLost:" + responseObject.errorMessage);
        }
    }

    function onMessageArrived(message) {
        console.log("Message arrived: topic=" + message.destinationName + ", message=" + message.payloadString);
        if (message.destinationName == "chartInfo") {
            var rdata=message.payloadString;
            var resultData = JSON.parse(rdata).result; //json형식으로 저장
        }
    }

});

 

4. 통신 결과

이제 mqtt explorer를 통해 publish 해보겠습니다.

topic은 아까 설정한 "chartInfo"를 넣어줍니다. 그리고 json 형식으로 데이터를 입력 후, publish 버튼을 눌러줍니다.

publish

같은 "chartInfo" 토픽을 subscribe한 client가 데이터를 받아온 것을 확인할 수 있습니다.

개발자 도구에서 console.log 확인

 

---

*에러 해결

아래와 같은 websocket 에러가 나올 경우가 있습니다.

WebSocket connection to 'ws://127.0.0.1:9001/mqtt' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

mosquitto.config에 websocket protocol 추가하여 해결할 수 있습니다!

$ sudo nano /etc/mosquitto/mosquitto.conf

그리고 추가해주세요

````

listener 9001
protocol websockets

listener 1883
protocol mqtt

```

mosquitto 서비스 재 실행 후 상태를 확인해주세요

$ sudo service mosquitto restart

$ systemctl status mosquitto