MQTT 입문 (10) - MQTT 와 WebSocket

브 라 우 저 기반 웹 애플 리 케 이 션 은 일반적으로 자바 스 크 립 트 를 통 해 서버 와 상호작용 을 하 는데 이 때 는 웹 소켓 기반 MQTT 를 사용 할 수 있 습 니 다.대부분의 브로커 들 은 MQTT over WebSocket 을 지지 합 니 다.이렇게 하면 브 라 우 저의 웹 소켓 을 잘 이용 할 수 있 고 서버 는 80 / 443 이외 의 포트 를 개방 하지 않 아 도 된다 는 장점 이 있다.
MQTT 본 성 은 WebSocket 과 아무런 관계 가 없 지만 Broker 는 WebSocket 에 있 는 MQTT 가방 을 처리 할 수 있 습 니 다.
[img]http://dl2.iteye.com/upload/attachment/0128/4477/d794a0f9-49a8-35cf-a0c5-83f9ca280631.png[/img]
[b] Mosqiutto Broker [/ b] 설정
/etc/mosquitto/mosquitto.conf

listener 1883
protocol mqtt

listener 9001
protocol websockets

서버 를 다시 시작 하면 Broker 는 두 가지 접근 형식 을 동시에 지원 합 니 다.
[quote]tcp://localhost:1883
ws://localhost:9001[/quote]
[b] 테스트 코드 [/ b]
mosquitto 와 paho 는 이미 이 부분 코드 를 봉 하여 직접 다운로드 하여 사용 하면 된다.
[b]ws.html[/b] http://mosquitto.org/js/mosquitto-1.1.js

   
      
      <br>         var mosq = null;<br>         var url = "ws://localhost:9001/";<br>         var topic = "test/rensanning/ws";<br>         var time = 0;<br>         function conn() {<br>            if ("WebSocket" in window) {<br>               console.log("WebSocket is supported by your Browser!");<br>               mosq = new Mosquitto();<br>               mosq.connect(url);<br>               mosq.onconnect = function(rc) {<br>                console.log("CONNACK " + rc);<br>               };<br>               mosq.ondisconnect = function(rc) {<br>                console.log("Lost connection");<br>               };<br>               mosq.onmessage = function(topic, payload, qos) {<br>                console.log("PUBLISH " + topic + " " + payload);<br>               };<br>            } else {<br>               console.log("WebSocket NOT supported by your Browser!");<br>            }<br>         }<br>         function sub() {<br>             mosq.subscribe(topic, 0);<br>         }<br>         function pub() {<br>             time = time + 1;<br>             var msg = "ws test by mosquitto-1.1.js. " + time;<br>             mosq.publish(topic, msg, 0);<br>         }<br>      
   
   
      

         connection

         subscribe

         publish
      

   

[b]ws-paho.html[/b] https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js

   
      
      <br>         var client = null;<br>         var url = "ws://localhost:9001/";<br>         var topic = "test/rensanning/ws";<br>         var time = 0;<br>         function conn() {<br>            if ("WebSocket" in window) {<br>               console.log("WebSocket is supported by your Browser!");<br>               client = new Paho.MQTT.Client(url, "ClientId");<br>               client.onConnectionLost = onConnectionLost;<br>               client.onMessageArrived = onMessageArrived;<br>               client.connect({onSuccess:onConnect});<br>            } else {<br>               console.log("WebSocket NOT supported by your Browser!");<br>            }<br>         }<br>         function sub() {<br>             client.subscribe(topic);<br>         }<br>         function pub() {<br>             time = time + 1;<br>             var msg = "ws test by mqttws31.js. " + time;<br>             var message = new Paho.MQTT.Message(msg);<br>             message.destinationName = topic;<br>             client.send(message);<br>         }<br>         function onConnect() {<br>            console.log("CONNACK");<br>         }<br>         function onConnectionLost(responseObject) {<br>            console.log("Lost connection");<br>            if (responseObject.errorCode !== 0)<br>              console.log("onConnectionLost:" + responseObject.errorMessage);<br>         }<br>         function onMessageArrived(message) {<br>            console.log("PUBLISH " + message.destinationName + " " + message.payloadString);<br>         }<br>      
   
   
      

         connection

         subscribe

         publish
      

   

모든 connection 을 하나씩 실행 하고 subscribe 를 하나씩 실행 합 니 다. 마지막 으로 Publish 메시지 들 은 websocket 이 든 mqtt 이 든 모두 정확하게 처리 할 수 있 습 니 다.
[img]http://dl2.iteye.com/upload/attachment/0128/4460/cf5c654d-411b-3c2c-9aeb-59612134053b.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0128/4462/bd27c59f-7ff9-37cf-bdbf-6a5db1880982.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0128/4464/1a4beacc-b131-3308-900b-f7f4f56f91fb.png[/img]
웹 소켓 의 HTTP 와 Packet 을 확인 합 니 다:
[img]http://dl2.iteye.com/upload/attachment/0128/4466/51082975-e23d-3097-a61b-d6a1fa2a0409.png[/img]
[img]http://dl2.iteye.com/upload/attachment/0128/4468/a1cbab93-82ef-357c-b05e-005a5fc526c6.png[/img]