1. HTTP : 입력과 출력을 분리 할 경우, 입력은 HTTP로 보낼 수 있다. 채팅 서비스를 예로 들자면, 메시지 입력은 HTTP 로 보 내고 응답은 MQTT로 받는 식이다.
2. WebSocket : HTTP 기반의 애플리케이션을 위해서, MQTT 앞단에 websocket을 둔다.
3. JavaScript› : Javascript의 MQTT 라이브러리를 이용해서 직접 MQTT기반 통신을 할 수 있다.

• 운영체제 : 우분투 리눅스 14.04
• Ruby 2.1.2 : 우분투 리눅스 14.04에 들어있는 루비는 버전 1.9.x다. 최근 레일즈 공부하면서 2.1.2로 업데이트 했다. 1.9로 테스트해도 문제 없을 거라 생각하는데, 이번 기회에 그냥 업데이트 하자.

  # sudo apt-get install python-software-properties
  # sudo apt-add-repository ppa:brightbox/ruby-ng
  # sudo apt-get update
  # sudo apt-get install ruby2.1
  

• Sinatra 경량 웹 프레임워크
• Thin

1. 테스트 클라이언트로 "Firefox 웹 브라우저"를 사용한다. Websocket을 깔끔하게 지원한다.
2. Ruby Sinatra : Thin 웹서버 + Sinatra 조합으로 Push server를 구성했다. sinatra-websocket으로 websocket 서비스를 구현했다.
3. Ruby MQTT 라이브러리를 이용해서, MQTT Client를 개발했다.
4. VirtualBox로 Sensor Device를 만들었다. 온도와 습도를 측정하는 디비이스다(물론 가상의 디바이스다. MQTT Client로 주기적으로 온도와 습도 정보를 MQTT 브로커에 Pub 하는 식으로 작동한다). MQTT 브로커로 mosquitto를 사용했다. 
   
   

1. Web Browser로 Push Server에 접근한다.
2. 웹 서버는 유저 인터페이스를 출력하고, 유저 연결을 Websocket 으로 변환한다.
3. Websocket은 Ruby-MQTT 라이브러리를 이용해서 MQTT-Broker에 sensor topic을 구독신청(subscribe)한다.
4. 구독정보는 Websocket를 통해서 웹 브라우저로 전송하고, 웹 브라우저는 javascript를 이용해서 화면에 표시한다. 
   
   

# gem install sinatra-websocket

# encoding: utf-8
require 'sinatra-websocket'
require 'mqtt'
require 'pp'
require 'time'

class MyApp < Sinatra::Application

    # 유저 화면을 출력한다.
    # index 페이지는 MQTT 서버 정보입력을 위한 UI와
    # MQTT 서버로 부터의 Push 메시지를 출력하기 위한 UI가 있다. 
    get "/" do
        @title = "MQTT Push Test"
        erb :index
    end

    # 유저가 Websocket을 사용하지 않고 /mqtt에 접근할 경우
    # 에러페이지를 출력한다.
    get "/error" do
        erb :error
    end

    # index 페이지에서 MQTT 서버정보를 입력하고 submit 하면
    # websocket 페이지로 프로토콜 change 한다.
    # qos는 사용하지 않는다.(귀찮아서)
    get "/mqtt" do
        ip   = params[:ip]
        port = params[:port]
        qos  = params[:qos]
        topic  = params[:topic]

        # websocket 연결이 아니면 에러 페이지로 보낸다.
        if !request.websocket?
            erb :error
        else
            request.websocket do |ws|
                ws.onopen do
                    # MQTT 서버에 연결한 후 topic을 subscribe 한다.
                    MQTT::Client.connect(:host=>ip, :port=>port) do | conn |
                        conn.get(topic) do |topic, message|
                            message = message.force_encoding("UTF-8")
                            ws.send "{\"time\":\"#{Time.new.to_s}\",\"msg\":\"#{message}\"}"
                        end
                    end
                end

                ws.onmessage do |msg|
                end

                ws.onclose do
                    puts "Web socket close"
                end
            end
        end
    end
end

# cat index.erb
<script>
    function mqtt(ip, port, qos, topic) {
        var ws = new WebSocket('ws://'+window.location.host+'/mqtt?ip='+ip+'&topic='+topic+'&port='+port)
        ws.onopen = function() {};
        ws.onclose = function() {};
        ws.onmessage = function(m) {
            addItem(JSON.parse(m.data))
        };
    }
    function addItem(obj) {
        $("#message").append(
            '<li><span class="label">'+obj.time+'</span> '+obj.msg+'</li>'
        )
    }

    $(document).ready(function() {
        $("#submit").click(function(e) {
            var ip = $("#ip").val()
            var port = $("#port").val()
            var qos = $("#qos").val()
            var topic = $("#topic").val()
            mqtt(ip, port, qos, topic)
        });
    });
</script>
<form>
<div class="row">
    <div class="large-12 columns">
        <div class="large-2 columns">
            <label>Host</label>
                <input id="ip" type="text" name="ip" placeholder="127.0.0.1"/>
            </label>
        </div>
        <div class="large-2 columns">
            <label>Port</label>
                <input id="port" type="text" name="port" placeholder="1833"/>
            </label>
        </div>
        <div class="large-4 columns left">
            <label>Topic</label>
                <input id="topic" type="text" name="topic" placeholder="/sensor/temperature"/>
            </label>
        </div>
        <div class="large-4 columns">
            <label>QoS</label>
                <input type="radio" id="qos" name="qos" value="0" checked><label>0</label>
                <input type="radio" id="qos" name="qos" value="1"><label>1</label>
                <input type="radio" id="qos" name="qos" value="2"><label>2</label>
            </label>
        </div>
    </div>
    <div class="large-12 columns">
        <div class="large-4 columns">
            <input id="submit" type="button" class="button tiny" value="연결">
        </div>
    </div>
</div>
</form>

<div class="row">
    <div class="large-12 columns">
        <div class="large-12 columns">
            <div class="panel">
                <ul class="no-bullet" id="message">
                </ul>
            </div>
        </div>
    </div>
</div>

• https://github.com/yundream/MqttPush 
  
  

# thin --threaded -R config.ru start

# mosquitto_pub -h 192.168.56.101 -d -t /sensor/message -m "Hello World"

1. 실 서비스의 경우 유저 인증, 데이터 베이스 연동과 같은 다른 많은 작업들이 필요할 수도 있다. 단순히 Sub/Pub 할거라면 모르겠지만, 복잡한 데이터 처리 로직이 들어갈 경우 MQTT에 직접 붙는 것은 좋은 방법은 아니다.
2. 어차피 websocket 기반이라서 딱히 달라질건 없다. 모스키토 같은 브로커들은 이미 websocket를 지원하고 있어서 연동하는데 크게 문제는 없겠다.