1. 程式人生 > >Ubuntu下搭建Mqtt服務,跑Websocket JS客戶端

Ubuntu下搭建Mqtt服務,跑Websocket JS客戶端

一、執行環境Ubuntu14.04

二、安裝依賴

  1. sudo apt-get update
  2. sudo apt-get install g++
  3. sudo apt-get install cmake
  4. sudo apt-get install openssl 
  5. sudo apt-get install libssl-dev
  6. sudo apt-get install xsltproc
  7. sudo apt-get install docbook-xsl
  8. sudo apt-get install docbook-defguide
  9. sudo apt-get install build-essential
  10. sudo apt-get install libc-ares-dev
  11. sudo apt-get install uuid-dev
  12. sudo apt-get install daemon
  13. sudo apt-get install libwebsockets-dev

三、安裝libwebsockets(Websocket支援)

  1. git clone https://github.com/warmcat/libwebsockets.git
  2. cd libwebsockets
  3. mkdir build
  4. cd build
  5. cmake ..
  6. make
  7. sudo make install
  8. sudo ldconfig

四、安裝Mosquitto(Mqtt伺服器)

        port 1883
        listener 1884
        protocol websockets 

  1. git clone https://github.com/eclipse/mosquitto.git
  2. cd mosquitto
  3. 更改configure.mk中
    WITH_WEBSOCKETS:=yes
    WITH_SRV:=no  
  4. make
  5. sudo make install 
  6. sudo cp mosquitto.conf /etc/mosquitto
  7. 請在/etc/mosquitto/mosquitto.conf 的“Default Listener”  一節新增如下幾行:

五、執行mqtt服務

mosquitto -c /etc/mosquitto/mosquitto.conf

六、測試mqtt

mosquitto_sub -h 127.0.0.1 -p 1883 -t "track" -v (訂閱訊息,主題為“track”)

mosquitto_pub -h 127.0.0.1 -t "track" -m "test message" (傳送訊息)

七、MQTT協議 Websocket JS客戶端

<html>
<head>
    <title>Mosquitto Websockets</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        var mqtt;
        var reconnectTimeout = 3000;
        var host = '127.0.0.1';    // hostname or IP address
        var port = 1884;
        var topic = 'track';        // topic to subscribe to
        var useTLS = false;
        var username = null;
        var password = null;
        // username = "test";
        // password = "123456";
        var cleansession = true;

        function MQTTconnect() {
            mqtt = new Paho.MQTT.Client(
                host,
                port,
                "web_" + parseInt(Math.random() * 100,
                10));
            var options = {
                timeout: 3,
                useSSL: useTLS,
                cleanSession: cleansession,
                onSuccess: onConnect,
                onFailure: function (message) {
                    $('#status').val("Connection failed: " + message.errorMessage + "Retrying");
                    setTimeout(MQTTconnect, reconnectTimeout);
                }
            };

            mqtt.onConnectionLost = onConnectionLost;
            mqtt.onMessageArrived = onMessageArrived;

            if (username != null) {
                options.userName = username;
                options.password = password;
            }
            console.log("Host="+ host + ", port=" + port + " TLS = " + useTLS + " username=" + username + " password=" + password);
            mqtt.connect(options);
        }

        function onConnect() {
            $('#status').val('Connected to ' + host + ':' + port);
            // Connection succeeded; subscribe to our topic
            mqtt.subscribe(topic, {qos: 0});
            $('#topic').val(topic);
        }

        function onConnectionLost(response) {
            setTimeout(MQTTconnect, reconnectTimeout);
            $('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");

        };

        function onMessageArrived(message) {

            var topic = message.destinationName;
            var payload = message.payloadString;

            $('#ws').prepend('<li>' + topic + ' = ' + payload + '</li>');
        };

        function button_onclick(){
            //這裡寫你要執行的語句
            var tp = $('#sendtopic').val();
            var val = $('#textsend').val();
            if(tp==''||val=='')
            {
                alert("no aaa");
                return;
            }
            var message = new Paho.MQTT.Message(val);
            message.destinationName = tp;
            message.qos=0;
            mqtt.send(message);
//        mqtt.publish(tp, 0, val);
            $('#ws').prepend('<li>' + tp + ' = ' + val+ '</li>');
        };

        $(document).ready(function() {
            MQTTconnect();
        });

    </script>
</head>
<body>
<h1>Mosquitto Websockets</h1>
<div>
    <div>Subscribed to <input type='text' id='topic' disabled />
        Status: <input type='text' id='status' size="30" disabled />
        </br>
        publish to <input type='text' id='sendtopic' /> text <input type='text' id='textsend' size="30"/>
        Status: <input type='button' value="send" id='btn' onclick="javascript:button_onclick()"/></div>
    <ul id='ws' style="font-family: 'Courier New', Courier, monospace;"></ul>
</div>
</body>
</html>

原始碼