2016년 4월 19일 화요일

[Javascript/MQTT] MQTT Web Subscribe Client 구현하기.(Javascript 이용)

[Javascript/MQTT] MQTT Web Subscribe Client 구현하기.(Javascript 이용)



1. 개요

MQTT Subscribe Client를 Web에서 구현한다. 즉, MQTT Web Subscribe Client를 구현하는 것이다.
Javascript에서 웹소켓을 통하여 MQTT Broker에 접속한다. 이때, MQTT Broker는 반드시 Websockets을 지원해야만 가능하다.
다양한 MQTT Broker의 기능 여부를 아래 링크에서 확인할 수 있다.
https://github.com/mqtt/mqtt.github.io/wiki/Server%20support

2. 개발 환경

  • Windows 7
  • STS(Spring Tool Suite 3.7.3.RELEASE)
  • Tomcat 7
  • JDK, JRE 1.8

3. 필요한 라이브러리

Javascript에서 MQTT Client를 구현하기 위해서는 라이브러리가 필요하다.
여기서는 Paho에서 구현한 라이브러리를 이용한다. Paho는 다양한 플랫폼에서의 MQTT Client 라이브러리를 구현해 놓았다.
그중에서 Javascript를 위한 라이브러리는 'mqttws31.js'이며 이는 아래 링크에서 다운로드 할 수 있다.
이 라이브러리를 이용하면 Sub/Pub 모두 가능하다.
압축을 해제하면 안에서 'mqttws31.js'를 찾을 수 있다.

4. 라이브러리 추가 및 설정

(참고. 필자는 STS에서 프로젝트를 Spring MVC Project로 생성하였다. 프로젝트의 종류에 따라 디렉토리 구성이 조금씩 다른듯 하다.)
다운받은 라이브러리를 사용하기 위해서 프로젝트에 추가해줘야 하고, 추가적인 설정이 필요하다.
우선 라이브러리(mqttws31.js)를 아래와 같이 src/main/webapp/resources/js 에 추가하였다.
그리고 추가한 라이브러리를 프로젝트가 찾을 수 있게 위치를 알려줘야 한다. 그 작업은 servlet-context.xml에 해준다.
아래의 그림과 같이 js에 대한 리소스 경로를 추가해준다.
마지막 줄을 추가한 것이다.

5. 소스코드

필자가 작성한 소스코드(javascript가 작성된 jsp파일)은 아래 링크에서 확인할 수 있다.
https://github.com/ChanMinPark/makeup/blob/master/010_MQTT_web_client/code/mqttwebclientpage.jsp
더 기본적이고 추가적인 설명은 Paho에서 제공하는 예제와 API doc을 확인하는 것이 좋다.

6. 구현 페이지

필자가 작성한 페이지는 아래와 같이 구현된다.
동작 테스트는 Paho에서 Web을 이용한 client 구현을 테스트 할 수 있게 제공하는 사이트를 이용한다.
http://www.eclipse.org/paho/clients/js/utility/index.html
위의 사이트에서 상단의 Client ID만 대강 수정해주고 Connect를 누르면 Paho쪽의 MQTT Broker에 접속된다.
아래에서 Sub/Pub 테스트를 모두 할 수 있다.

댓글 7개:

  1. 안녕하세요 블로그 글 잘읽었습니다. 혹시 질문을 드려도 될까요?

    혹시 mosquitto 브로커 서버에는 접속이 안되는건지 궁금합니다.

    답글삭제
    답글
    1. 안녕하세요. 제 글을 읽어주셔서 감사합니다.
      모스키토는 mqtt 브로커(서버)이고 paho는 mqtt client 구현체이기 때문에 이론적으로 가능할 것이라 생각됩니다.
      그래서 찾아보니 아래와 같이 모스키토와 paho를 이용한 글이 있었습니다. 참고하시면 좋을 것 같습니다.
      http://modes3.tumblr.com/post/138280034525/getting-started-with-mqtt-mosquitto-and-paho

      삭제
    2. http://www.hardcopyworld.com/gnuboard5/bbs/board.php?bo_table=tech_android&wr_id=12
      위 포스팅도 참고해보시면 좋을 것 같습니다.

      삭제
  2. 댓글 감사합니다.

    아 제가 moquitto 브로커 서버는 자바라이브러리를 활용한 paho mqtt client로는 현재 테스트하여 데이터를 받아오는 것 까지는 확인을 하였습니다.

    지금 시도하고 있는게 웹 클라이언트로 접근하고자 하여 본 블로그를 참고 하게되었습니다.
    본 블로그 내용대로 이클립스에 STS를 설치하고 내용대로 웹페이지를 구성하여 연결을 시도하였는데 mqttws31.jar 라이브러리가 적용이 안되는지 버튼을 눌러도 아무런 내용이 없어서 질문을 드렸습니다.

    혹시 mqttws31.jr 라이브러리는 본 포스팅대로만 하면 사용할 수 있는 것인지 궁금합니다.

    답글삭제
  3. 추가적으로 코드의 각 순서마다 실행되는 절차를 확인해보니 client.connect에서 onFailure로 들어가 "Please enter host and port again." 문구가 계속 뜨고 있습니다. 그래서 제가 생가한 결론은 mqttws31.js 라이브러리가 적용이 안되는것으로 판단하였습니다.
    자꾸 문의드려 죄송하지만 해결 방안이 있으신지 궁금합니다.

    답글삭제
    답글
    1. 음.. 정확히 어떤 문제인지는 모르겠으나..
      onFailure 까지 간다는건 mqttws31.js는 인식을 해서 connect함수를 콜 했으나 실패한것으로 생각됩니다.
      더 정확하게 mqttws31.js 가 웹클라이언트에서 로드 됐는지 확인하시려면 크롬의 개발자 도구에서 페이지 여실때 mqttws31.js가 다운로드 되는지 확인해보시면 좋을 것 같습니다.
      그리고 js 파일을 다운로드해서 직접 웹서버에 넣지 않으시고, CDN을 이용하여도 될 것 같은데 한번 해보셔도 좋을 것 같습니다.
      (script태그의 src속성을 다음과 같이 설정합니다.
      src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" ) => min 버전이 아닌걸로 해야 뭔게 콘솔로 오류메세지가 나오지 싶습니다.
      이에 대한 더 자세한 설명(Paho 사이트의 Get Started)은 https://www.eclipse.org/paho/clients/js/ 에서 'Using the Eclipse Paho JavaScript Client'의 CDNs 부분을 참고하시면 됩니다.

      크게 도움이 되면 좋겠는데 저도 포스팅을 한지 오래되서 많이 가물가물해져서..송구스럽습니다..

      결론적으로 제가 추천드리는 절차는,
      1. 웹브라우저 개발자 도구에서 네트워크 탭에서 mqttws31.js를 로드하는지 확인
      2. script 주소를 cdn 주소로 설정해서 로드가 되는지 확인
      3. 디버깅을 mqttws31.js 안쪽으로 들어가서 왜 onFailure로 연결되는지 확인

      입니다.. 명확한 해결책을 드리지 못해서 죄송합니다.

      삭제
  4. 게시글이 많은 도움이 되었습니다.
    제가 한가지 여쭤보고 싶은게 브로커를 라즈베리파이에 두고 웹페이지를 클라이언트로 두어 접속이 가능하게 할 수 있을까요?

    답글삭제